录像播放–踩坑小计

录像播放–踩坑小计

playsinline 兼容性

先是要掌握环球近日多个浏览器内核:

  • 微软IE的__Trident__
  • 网景最初研究开发后卖给Mozilla基金会并演化成火狐的__Gecko__
  • KDE的开源内核__Webkit__
  • Opera的__Presto__

澳门新萄京8522 1

其中:

  • __Trident __在运动端首要为WP7体系内置浏览器
  • Presto 在全体联网设备上都利用,移动终端上海重型机器厂大为 Opera
    Mobile、OperaMini、欧朋浏览器以及欧朋HD Beta版
  • __Webkit__基础的适用范围则较为常见,Android原生浏览器、苹果的Safari、谷歌(谷歌(Google))的Chrome(Android4.0用到)都以基于Webkit开源内核开发的。

而境内大面积的PC浏览器如__UC浏览器、QQ浏览器、百度手提式有线电话机浏览器、360四平浏览器、谷歌浏览器、搜狗手提式有线电电话机浏览器、猎豹浏览器__以及__移步端的UC、QQ、百度等手提式有线电话机浏览器__都以依照Webkit修改回复的水源,本质上大家可以认为市镇上移步端用户选拔的大多都以webkit内核或然根据webkit 内核做修改的浏览器,所以 playsinline 的包容性十分好!

浅谈html5 video 移动端填坑记,浅谈html5

本文介绍了html5 video 移动端填坑记,分享给我们,具体如下:

<video id="video" 
  style="object-fit:fill" 
  autoplay
  webkit-playsinline 
  playsinline 
  x5-video-player-type="h5"
  x5-video-player-fullscreen="true"
  x5-video-orientation="portraint" 
  src="video.mp4" />
</video>
<!--
  object-fit: fill   视频内容充满整个video容器
  poster:"img.jpg" 视频封面
  autoplay: 自动播放
     auto - 当页面加载后载入整个视频
     meta - 当页面加载后只载入元数据
     none - 当页面加载后不载入视频

  muted:当设置该属性后,它规定视频的音频输出应该被静音

  webkit-playsinline playsinline:   内联播放

  x5-video-player-type="h5" :  启用x5内核H5播放器
  x5-video-player-fullscreen="true"  全屏设置。ture和false的设置会导致布局上的不一样
  x5-video-orientation="portraint" :声明播放器支持的方向,可选值landscape 横屏,portraint竖屏。
                                     默认值portraint。无论是直播还是全屏H5一般都是竖屏播放,
                                     但是这个属性需要x5-video-player-type开启H5模式
-->

自动播放

设置autoplay属性

<video autoplay></video>

一举手一投足浏览器中

只是在无数活动浏览器里,都是供给用户的实际操作来(touchend、click、doubleclick
或 keydown 事件等正规的风云)触发调用video.play(),才能自动播放影音录制。

 dom.addEventListener('click', function () {
   video.play()
})

微信中

也得以在  wx.ready()里触发video.play()

wx.ready(function () {
  video.play()
})

内联播放

安装属性 webkit-playsinline playsinline

<video id="video" webkit-playsinline playsinline /></video>

在iOS
Safari和局地安卓的有些浏览器下播放摄像的时候,不可能在h5页面中播放录制,系统会自动接管录像

万一急需在h5页面内播放录像,需求在录像标签上充裕 
webkit-playsinline,在iOS10今后,需求丰硕playsinline,提议还要丰硕那四个属性。同时还索要app支持那种方式

webview.allowsInlineMediaPlayback = YES;

ios手Q和微信都援助那种形式,可是android 微信就挂了

android 微信

android微信内置浏览器选取腾讯X5内核,不遵从X5web正式,video强制全屏正是这几个。摄像播放完成后还会并发QQ自个儿的录制推荐

听大人讲,其有个白名单,白名单下的录像能源,就不会全屏。可是腾讯现已不可能再扩充白名单了。尿性,无解。。。。。。

当前还有多个消除办法,即是运用h5  canvas 播放 video

canvas 播放摄像

使用canvas 蒙受的坑:video 必须加 x5-video-player-type=”h5″
属性,不然,在运动端就会卡死不能够播放录制,个人认为是因为摄像被接管的原由造成。

<div class="wrapper">
  <video id="video" style="display: none" autoplay src="video.mp4" x5-video-player-type="h5"></video>
  <canvas id="canvas"></canvas>
</div>
<script>
  var video = document.querySelector('#video')
  var canvas = document.querySelector('#canvas')
  var wrapper = canvas.parentNode
  var width = wrapper.offsetWidth
  var height = wrapper.offsetHeight
  var ctx = c.getContext('2d')
  var time = null
  canvas.width = width
  canvas.height = height

  canvas.addEventListener('click', function () {
    video.play()
  })

  video.addEventListener('play', function () {
      time = window.setInterval(function () {
        ctx.drawImage(v, 0, 0, width, height);
      }, 20);
  }, false);

  video.addEventListener('pause', function () {
      window.clearInterval(time);
  }, false);

  video.addEventListener('ended', function () {
      window.clearInterval(time);
  }, false);
</script>

最终发现,固然选拔canvas播放摄像,android微信中可以遮挡全屏录像播放完的引荐录制。可是还不能明确命令禁止摄像播放时
的全屏难点。依旧得万恶的白名单。吐槽。。。。。。。。。。。。。。。。
更坑爹的是尚未找到js触发退出全屏的主意。

ios黑屏难点

ios 在播音摄像时,会油不过生短暂的黑屏,然后平常呈现。

解决方法:

在摄像上层覆盖二个添加一个div并用一张图片填充,创立播放前加载假象。然后监听事件 timeupdate
,录制播放有画面时移除这些“div块”

video.addEventListener('timeupdate', function(){
  if(video.currentTime > 0.1){
      posterImg.hidden();
  }
})

Media 方法和脾气

HTMLVideoElement和HTML奥迪oElement 均三番八回自HTMLMediaElement

// 媒体错误
MediaObj.error; //null:正常
MediaObj.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效

//媒体当前状态
MediaObj.currentSrc; //返回当前资源的URL
MediaObj.src = value; //返回或设置当前资源的URL
MediaObj.canPlayType(type); //是否能播放某种格式的资源
MediaObj.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
MediaObj.load(); //重新加载src指定的资源
MediaObj.buffered; //返回已缓冲区域,TimeRanges
MediaObj.preload; //none:不预载 metadata:预载资源信息 auto:

//准备状态
MediaObj.readyState;//1:HAVE_NOTHING 
                    //2:HAVE_METADATA 
                   //3.HAVE_CURRENT_DATA 
                  //4.HAVE_FUTURE_DATA 
                 //5.HAVE_ENOUGH_DATA
MediaObj.seeking; //是否正在seeking

//回放状态
MediaObj.currentTime = value; //当前播放的位置,赋值可改变位置
MediaObj.startTime; //一般为0,如果为流媒体或者不从0开始的资源,则不为0
MediaObj.duration; //当前资源长度 流返回无限
MediaObj.paused; //是否暂停
MediaObj.defaultPlaybackRate = value;//默认的回放速度,可以设置
MediaObj.playbackRate = value;//当前播放速度,设置后马上改变
MediaObj.played; //返回已经播放的区域,TimeRanges,关于此对象见下文
MediaObj.seekable; //返回可以seek的区域 TimeRanges
MediaObj.ended; //是否结束
MediaObj.autoPlay; //是否自动播放
MediaObj.loop; //是否循环播放
MediaObj.play(); //播放
MediaObj.pause(); //暂停

//视频控制
MediaObj.controls;//是否有默认控制条
MediaObj.volume = value; //音量
MediaObj.muted = value; //静音

//TimeRanges(区域)对象
TimeRanges.length; //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置

//【★★★**相关事件**★★★】
//事件分发
var eventTester = function(e){
    Media.addEventListener(e,function(){
        console.log((new Date()).getTime(),e)
    },false);
}
//事件监听
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载(不是因为错误引起)
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载(不是因为错误引起),
eventTester("error"); //请求数据时遇到错误
eventTester("stalled"); //网速失速
eventTester("play"); //play()和autoplay开始播放时触发
eventTester("pause"); //pause()触发
eventTester("loadedmetadata"); //成功获取资源长度
eventTester("loadeddata"); //
eventTester("waiting"); //等待数据,并非错误
eventTester("playing"); //开始回放
eventTester("canplay"); //可以播放,但中途可能因为加载而暂停
eventTester("canplaythrough"); //可以播放,歌曲全部加载完毕
eventTester("seeking"); //寻找中
eventTester("seeked"); //寻找完毕
eventTester("timeupdate"); //播放时间改变
eventTester("ended"); //播放结束
eventTester("ratechange"); //播放速率改变
eventTester("durationchange"); //资源长度改变
eventTester("volumechange"); //音量改变

上述便是本文的全部内容,希望对大家的上学抱有支持,也可望大家多多协理帮客之家。

video 移动端填坑记,浅谈html5
本文介绍了html5 video 移动端填坑记,分享给大家,具体如下: video
id=video style=object-fit:fill autoplay w…

1)全屏api

h5暴光了2个webkitRequestFullScreen方法,能够让各样dom都请求全屏,当然video标签也足以行使。

只是在测试中窥见,一些安卓机不帮衬该属性,如金立手提式无线电话机,所以供给在调用的时候举办一下判定

var player = $('#player')[0];if (player.webkitSupportsFullscreen) {
    player.webkitEnterFullscreen();
} else {
   player.webkitRequestFullScreen();
}
video标签的一些属性
  <video
    id="my-video"
    src="test.mp4"
    controls = ""    /*禁掉默认控制条-- 必要*/
    poster="poster.jpg"  /*视频封面*/
    preload="auto"  /*预加载*/
    webkit-playsinline="true"  /*iOS 10中设置可以让视频在小窗内播放*/
    playsinline="true"
    x-webkit-airplay="allow"  /*启用AirPlay支持*/
    x5-playsinline
    x5-video-player-type="h5"  /*对于x5内核声明启用同层H5播放器*/
    x5-video-player-fullscreen="true"   /*全屏设置设置为 true 是防止横屏*/
    x5-video-orientation="portraint"  /*播放器的方向,默认为竖屏*/
    x5-video-orientation="portraint" /*播放器支付的方向,landscape横屏,portraint竖屏,默认值为竖屏*/
    style="object-fit:fill" /*去除黑边*/
    >
   </video>

playsinline 废除全屏

假定想完成不全屏播放,只需在video标签加个 playsinline 属性即可,这一个性子在__基于webkit内核的运动端浏览器__着力没问题,实在万分就再加个 webkit-playsinline :

<video src={videoUrl} webkit-playsinline=”true” playsinline=”true”
/>

1
2
3
4
5
<video
    src={videoUrl}
    webkit-playsinline="true"
    playsinline="true"
  />

那正是说对于别的基本的浏览器要怎么处理吧?那一个时候要询问下近日市面上存在的浏览器有何样。

总结:

在经历过各个优化和调动后,大家得以在h5直播页做到看直播,看弹幕,发弹幕,发送礼物,表情,查看排行等各样功效,再同盟上手Q里的隐藏titlebar的_wv=16777217,能够实现全屏播放效果,做到了比美原生播放的经验。

现行反革命的h5的播音还有为数不少的变现和包容性的题材,希望那份指南能够帮你在遇到同样的坑时能尽快爬出来,并优化你的h5播放体验,吸引到越多的用户
: D


更加多精彩内容欢迎关切腾讯 Bugly的微信公众账号:

澳门新萄京8522 2

腾讯
Bugly是一款专为移动开发者塑造的品质监察和控制工具,扶助开发者急速,便捷的定位线上行使崩溃的图景以及缓解方案。智能合并功用扶助开发同学把每一日上报的数千条
Crash
依照根因合并分类,每一日早报会列出影响用户数最多的夭折,精准定位成效扶助开发同学定位到出题指标代码行,实时报告能够在通知后非常快的刺探应用的成色意况,适配最新的
iOS, Android 官方操作系统,鹅厂的工程师都在采取,快来出席大家啊!

赶上的一对现象
  1. 从不 <source> 元素且 src 属性为空时播放会触发 error
    事件,状态码为4
    缓解:忽略 src 属性为空时的报错

  2. 播音完成会触发暂停
    化解:注明状态变量,随着具体操作更新意况,播放状态下才会履行暂停操作,停止状态不执行

  3. 广播完成后重放会触发 seeking 和 seeked ,一般浏览器触发一次,
    android 下uc浏览器触发多次
    解决:同上

  4. 一部分浏览器监听不到 seeking 和 seeked
    化解:在 timeupdate 里来分析估摸用户行为

  5. 有个别浏览器存在数十次接连触发 seeking + seeked 的场地
    缓解:时间戳 + 节流 等待最后三次

  6. seeking 和 seeked 与 timeupdate 要求保障不会同时履行
    化解:监听到 seeking 触发,就不再履行 timeupdate 模拟
    度过的坑:笔者曾考虑在播音时直接判断出是还是不是支持 seeking
    ,方式是广播时设置 currentTime 为 0.01 ,然后检查和测试 seeking
    属性,后来意识浏览器在那样设置后的 seeking 属性值不等同

  7. 分级浏览器播放状态下不触发 seeking 和 seeked
    ,可是在回看的时候接触
    消除:注解状态变量,随着具体操作更新情状,甘休状态不监听 seeking
    触发
    å

场景二:全屏处理

在运动端浏览器,  video 在用户点击播放依旧通过API video.play()
触发播放时,会强制以全屏置顶的格局实行播放,设计的初衷可能是因为全屏能提供更好的用户体验,但有时开发者希望能自个儿说了算是还是不是全屏从而达成任何急需。

7. 摄像的全屏难点

私下认可控件的隐形
    *::-webkit-media-controls-enclosure {
      display:none !important;
      -webkit-appearance: none;
    }
    *::-webkit-media-controls-panel {
      display: none!important;
      -webkit-appearance: none;
    }
    *::-webkit-media-controls-panel-container {
      display: none!important;
      -webkit-appearance: none;
    }
    *::--webkit-media-controls-play-button {
      display: none!important;
      -webkit-appearance: none;
    }
    *::-webkit-media-controls-start-playback-button {
      display: none!important;
      -webkit-appearance: none;
    }
    *::-webkit-media-controls {
    display: none!important;
    -webkit-appearance: none;
    }
  • 使用video.js来处理video标签
    参考video.js的文档,引入video.js
    实例

    var player = videojs('example_video_1');
    

videojs是大局函数,它能够选拔四个参数(id,options,onready)第多少个是回掉函数

  • options

有三种办法得以改变videojs的一坐一起:

  1. 由此抬高video标签的data-setup属性:

 <video data-setup='{"autoplay":"true",.....}'

  var player = videojs('example_video_1',{autoplay:true,....}) , 

直接传入options

由于第壹种方法是写在html标签中,通过JSON.parse解析,质量低,还不难报错。个人更赞成于方法2.

那边有大量有关options的布置参数:http://docs.videojs.com/tutorial-options.html

Chrome 模拟器

加载成功:

澳门新萄京8522 3

点击播放:

澳门新萄京8522 4

2. 页面内联播放难题

在iOS
Safari和一些安卓的一部分浏览器下播放录像的时候,不可能在h5页面中播放摄像,系统会自行接管录像

纵然须求在h5页面内播放录像,供给在录制标签上添加
webkit-playsinline,在iOS10后头,须要添加playsinline,建议还要丰盛那五个属性,同时需求app援助那种方式,手Q和微信都扶助那种形式

    //在html
    <video id="player" webkit-playsinline playsinline >    //在app内设置webview属性
    webview.allowsInlineMediaPlayback = YES;
参考资料

原生video
videojs
文档
videojs
github
html5–移动端录像video的android包容,去除播放控件、全屏等
移步端手提式有线电话机网页强制横屏或全屏模仿横评的js和css3方法
videojs
使用以及开创组件
videojs的使用 方法 事件
比较全
video.js–相当赞的H5录制播放库
video.js
的文档

为啥又允许自动播放?

  • 稍加开发者使用任何办法如 canvas、gif
    等来贯彻录像自动播放的效劳,可是质量上、流量消耗上都远不比录制播放;
  • 最近流量便宜了、手提式有线电话机硬件越来越好了;
  • 用户可以透过安装来禁止自动播放(开启省流量格局等);

2)系统接管播放

咱俩上边说道调用h5的webkitRequestFullScreen方法来进入录制的全屏,那么那几个措施会使浏览器完全接管录制播放,如图所示

澳门新萄京8522 5

那种接管的结果是此时的大家是不曾章程序控制制录像的播报,也从没艺术在地点浮动我们的dom元素,如弹幕,礼物这么些,会全盘被摄像盖在底下,所以大家的靶子便是解决那种系统接管的难题

常用多少个项有:
autoplay :  true/false   
//播放器准备好之后,是否自动播放 【默认false】If true/present as an attribute, begins playback when the player is ready

controls : true/false 
//是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮

height: 300px
//视频容器的高度,字符串或数字 单位像素  比如: height:300 or height:'300px'

width: 300px
//视频容器的宽度, 字符串或数字 单位像素

loop : true/false //视频播放结束后,是否循环播放

muted : true/false //是否静音

poster: 播放前显示的视频画面,播放开始之后自动移除。通常传入一个URL

preload:auto//预加载
   auto //自动
   metadata //元数据信息 ,比如视频长度,尺寸等
   none  //不预加载任何数据,直到用户开始播放才开始下载

children: Array | Object  
//可选子组件  从基础的Component组件继承而来的子组件,数组中的顺序将影响组件的创建顺序哦。

// 下面的方式只使用bigPlayButton和controlBar两个子组件
videojs('my-player', {
 children: [
     'bigPlayButton',
     'controlBar'
     ]
});

sources:Array //财富文件

  videojs('my-player', {
      sources: [{
          src: '//path/to/video.mp4',
          type: 'video/mp4'
          }, {
          src: '//path/to/video.webm',
          type: 'video/webm'
        }]
    });

等价于html中的情势:

<video ...>
    <source src="//path/to/video.mp4" type="video/mp4">
    <source src="//path/to/video.webm" type="video/webm">
</video>

techOrder: Array //使用哪种技术播放,可选值有'html5','flash'  默认为['html5'], 注意: 在v6.0.0 及以上的版本中,默认不包含flash的使用代码。如果要使用flash播放的,需要手动引入flash相关逻辑的代码。且需要指定swf文件的路径。
// 全局指定swf文件的位置
videojs.options.flash.swf = 'video-js.swf'
    // Create a player.
    var player = videojs('example_video_1',{
        teachOrder:['flash']
        },function(){
          console.log(this)
        }
     });

情景四:隐藏播放控件

controls 加上那天个性,Gecko
会提供用户控制,允许用户控制录制的播放,蕴含音量,跨帧,暂停/苏醒播放。

controls
属性规定浏览器应该为录像提供播放控件,反之则藏身播放控件,那么开发者能够自定义自身的广播控件。隐藏播放控件在
PC 端和 IOS
移动端包容性出色,而在__安卓移动端并不支持隐藏控件__,然则依然得以由此一些措施来促成。

3)使用伪全屏(样式全屏)

体制全屏的骨干是安装video标签的宽高,使其撑满整个webview,看上去像全屏一样

然则因为摄像一般都是16:9的宽高比,所以在竖屏景观下不能够很好的完结铺满整个荧屏

澳门新萄京8522 6

而相似用户进入页面基本都以竖屏,所以大家就要考虑怎么让用户在竖屏点击全屏按钮时,能感受到像终端app一样自动进入横屏全屏的体会,上边有三种方案

1.在用户点击全屏时候,通过css3属性旋转显示屏

透过css的transform,大家得以把dom成分旋转显示

透过-webkit-transform:
rotate(90deg)并安装video的莫斯中国科学技术大学学为当下webview的升幅,video的上升幅度为如今webview的惊人来落实旋转全屏.

那种形式的显示没有太大题材,但因为是经过css控制的页面dom展现,对于原生的半空中无法很好的操纵,如系统的键盘

澳门新萄京8522 7

在拉起键盘输入弹幕的时候,键盘不受控制依然竖屏呈现了
尽管页面不关乎与原生组件的相互,那么那种方案是一种很实用且包容性相比好的方案

2.用户在点击全屏时,通过js api来决定webview旋转横屏

在手Q里,大家和终点的同学合营添加了控制webview横竖屏的接口
在用户点击全屏的时候,先判断当前是还是不是横屏

    /**
     * 是否横屏
     */
    function isHorizontal() {       
        if (window.orientation != undefined) {        
            return (window.orientation == 90 || window.orientation == -90);
        } else {         
            return window.innerWidth > window.innerHeight;
        }
    }

//设置webview为横竖屏
 mqq.ui.setWebViewBehavior({         
      orientation: 0 //0是竖屏,1是横屏
 });

若是是竖屏则强制webview旋转进入横屏,同时监听页面包车型地铁resize方法,页面横竖屏变化的时候会触发那些法子,在那么些法子里再动态的调动video的宽高来铺满全体显示屏

澳门新萄京8522 8

注:

在此以前大家发现x5插入了一段js来勒迫录制的全屏的风浪

澳门新萄京8522 9

满意条件的video标签全屏时都会被X5接管,另向外调拨运输用webkitEnterFullscreen方法时,X5也会接管播放器。

倘诺发未来x5内核下不可能运用伪全屏而被浏览器接管,能够咨询下x5同事为你的域名开启白名单,不接管你域名下的录像播放

监理目的
  1. 广播:start:1(第二回播放)2(重放)

  2. 播放:end:1

  3. 播音暂停:pause:1

  4. 播音中止:pause:1

  5. 澳门新萄京8522,快进/快退:Jump:1(快进)2(快退)

  6. 荒谬:fail:
    1(取回进程);2(当下载时发出错误);3(当解码时产生错误);4(不补助音频/摄像)

  7. 广播等待: wait:1

  8. 广播时长:totaltime:秒(蕴含重放)

  9. 广播中止
    切切实实境况是移动端浏览器切换tab导致的隐没和用户按home键退出浏览器

    html5 提供了 Page Visibility API 来支撑监听tab切换,与之对应新增了

    document.hidden 属性,它呈现页面是还是不是为用户眼下看来的页面,值为 ture
    或 false
    document.visibilityState 属性, visible 表示页面被显示, hidden
    表示页面未被呈现, prerender 代表页面在重复生成,用户不可知
    visibilitychange 事件,监听页面在 visible 与 hidden 之间的切换

  1. 广播时间长度
    初步的笔触是收获到起来播报到停止播放的事件差,记下时间点选用了
    currentTime 属性,首要完毕在两下边

    playing 时记下时光点startT, pause 和 ended 和 seeked
    时记下时间点endT,endT – startT 即播放时间长度
    seeked 时记下时间点startT, seeking 时记下时间点endT,endT – startT
    即播放时长
    其一思路在 ios 下是类似没不正常的,不过 android
    下确实特别,主要缘由是 seeking 事件的监听没明白到位,seeking
    事件触发点是用户指标跳跃到的地点,比如:录像播放在 0
    秒点时,用户点击到了 60 秒点处,那是取到的 currentTime 就是 60
    ,本来以为会是 0 , ios
    下看似没非凡是因为它的全屏播放形式下,进程条是要拖拽的,不可能直接点击到某些点

    于是乎,使用 timeupdate 来赢得 seeking
    触发前的时间点,就能够拿走到对峙准确的播报时间长度了

  1. error事件
    监听 error 事件会回去 error.code 来标识错误类型:

    1 = MEDIA_ERR_ABO奇骏TED – 取回进程被用户中止
    2 = MEDIA_ERR_NETWO卡宴K – 当下载时产生错误
    3 = MEDIA_ERR_DECODE – 当解码时产生错误
    4 = MEDIA_ERR_SRC_NOT_SUPPOXC60TED – 不协助音频/录制
    获取横竖屏的音信

    1@  window.onorientationchange = function(){
          switch(window.orientation){
              case -90:
              case 90:
                  alert("横屏:" + window.orientation);
              case 0:
              case 180:
                   alert("竖屏:" + window.orientation);
              break;
          }
        }
    2@  @media (orientation: portrait) { } 横屏
        @media (orientation: landscape) { }竖屏
    3@  旋转 用css3的属性
        transform: rotate(90deg);

Safari 浏览器

__Safari
10 后__带音频的录像和音频私下认可禁止自动播放,更加多音信能够参考那篇小说;

Chrome(旧版本) 下自动播放:

澳门新萄京8522 10

Safari (10后)不自动播放:

澳门新萄京8522 11

6. 录制的刷新

我们理解video揭破了play和pause方法来提供录像的播报和刹车,可是h5没有正经的基础代谢方法,假使我们想完成录像的刷新,则供给经过js实现

var player = $('#player')[0];
player.load();
setTimeout(function () {
     player.play();
})
方法
autoplay
buffered
bufferedEnd
bufferedPercent
cancelFullScreen deprecated
controls
currentSrc
currentTime
currentType
dispose
duration
ended
error
exitFullscreen
init
isFullScreen deprecated
isFullscreen
language
load
loop
muted
pause
paused
play
playbackRate
poster
preload
remainingTime
requestFullScreen deprecated
requestFullscreen
seeking
src
volume
addChild inherited
addClass inherited
buildCSSClass inherited
children inherited
contentEl inherited
createEl inherited
dimensions inherited
el inherited
enableTouchActivity inherited
getChild inherited
getChildById inherited
hasClass inherited
height inherited
hide inherited
id inherited
initChildren inherited
name inherited
off inherited
on inherited
one inherited
options inherited
player inherited
ready inherited
removeChild inherited
removeClass inherited
show inherited
trigger inherited
triggerReady inherited
width inherited

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图