全国服务热线:4008-888-888

技术知识

Html5 video标识视頻的最好实践活动

伴随着 4G 的广泛和 WiFi 的普遍应用,手机上上的网速早已充足平稳和高速,以视頻为主的 HTML5 也愈来愈广泛了,相比帧动漫,视頻的主要表现更为丰富多彩,这里详细介绍1些实践活动工作经验。

video的特性

<video
  id="video" 
  src="video.mp4" 
  controls = "true"
  poster="images.jpg" /*视頻封面*/
  preload="auto" 
  webkit-playsinline="true" /*这个特性是ios 10中设定能够
                     让视頻在小窗内播发,也便是并不是全屏播发*/  
  playsinline="true"  /*IOS手机微信访问器适用小窗内播发*/ 
  x-webkit-airplay="allow" 
  x5-video-player-type="h5"  /*开启H5播发器,是wechat安卓系统版特点*/
  x5-video-player-fullscreen="true" /*全屏设定,
                     设定为 true 是避免横屏*/
  x5-video-orientation="portraint" //播发器付款的方位, landscape横屏,portraint竖屏,默认设置值为竖屏
  style="object-fit:fill">
</video>

src: 视頻的详细地址

controls: 再加这个特性,Gecko 会出示客户操纵,容许客户操纵视頻的播发,包含声音,跨帧,中止/修复播发。

poster: 特性要求视頻免费下载时显示信息的图象,或在客户点一下播发按钮前显示信息的图象。假如未设定该特性,则应用视頻的第1帧来替代。

preload: 特性要求在网页页面载入后加载视頻。

webkit-playsinline和playsinline: 视頻播发局势域播发,不摆脱文本文档流 。可是这个特性较为非常, 必须嵌入网页页面的APP例如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES,才可以起效。换句话说,假如APP不设定,你网页页面中加了这标识也失效,这也便是为何安卓系统手机上WeChat 播发视頻一直全屏,由于APP不适用playsinline,而ISO的WeChat却适用。
这里就要填补下,假如是想做全屏直播间或全屏H5体验的客户,IOS必须设定删掉 webkit-playsinline 标识,由于你设定 false 是不适用的 ,安卓系统则不必须,由于默认设置全屏。但这时候候全屏是有播发控制的,不管你有木有设定control。 做直播间的将会用得着播发控制,可是全屏H5是不必须的,那末除去全屏播发情况下的控制,必须下列设定:同层播发

x-webkit-airplay="allow" : 这个特性应当是使此视頻适用ios的AirPlay作用。应用AirPlay能够立即从应用iOS的机器设备上的不一样部位播发视頻、歌曲也有相片文档,也便是说根据AirPlay作用能够完成影音文档的无线网络播发,自然前提条件是播发的终端设备机器设备也要适用相应的作用

x5-video-player-type: 开启同层H5播发器,便是在视頻全屏的情况下,div能够展现在视頻层上,也是WeChat安卓系统版独有的特性。同层播发别称也叫做沉浸于式播发,播发的情况下看似全屏,可是早已去除了control和手机微信的导航栏栏,只留下"X"和"<"两键。现阶段的同层播发器只在Android(包含手机微信)上起效,临时不适用iOS。至于为何同层播发只对安卓系统对外开放,是由于安卓系统不可以像ISO1样局域播发,默认设置的全屏会使得1些页面实际操作被阻止,假如是全屏H5还好,可是做直播间的话,诸如弹幕那样的作用就没法完成了,因此这时候候同层播发的定义就处理了这个难题。但是在检测的全过程中发现,不一样版本号的IOS和安卓系统实际效果略有不一样

x5-video-orientation: 申明播发器适用的方位,可选值landscape 横屏, portraint竖屏。默认设置值portraint。不管是直播间還是全屏H51般全是竖屏播发,可是这个特性必须x5-video-player-type打开H5方式

x5­-video­-player­-fullscreen:全屏设定。它又两个特性值,ture和false,true适用全屏播发,false不适用全屏播发。实际上,IOS 手机微信访问器是Chrome的核心,有关的特性都适用,也是为何X5同层播发不适用的缘故。安卓系统手机微信访问器是X5核心,1些特性标识例如playsinline就不适用,因此自始至终全屏。

全屏解决

ios
ios加playsinline特性,以前只带webkit前缀的在ios10之后,会吊起系统软件自带播发器,两个特性都再加基础ios端都可以以确保内敛到访问器webview里边了。假如仍有某些版本号的ios会吊起播发器,还能够引入1个库iphone-inline-video(实际用法很简易看它github,这里不详细介绍了,只需加js1句话,css加点),github详细地址再加playsinline webkit-playsinline这两个特性和这个库基础能够确保ios端沒有难题了(但是亲测,只加这两个特性不引进库仿佛也是ok的,至今沒有在ios端手机微信沒有出現难题,假如你要适配uc或qq的访问器提议带上这个库).

android
x5-video-player-type="h5"特性,腾迅x5核心系的android手机微信和手Q内嵌访问器用的访问器webview的核心,应用这个特性在手机微信中视頻会有不一样的主要表现,会展现全屏情况,貌似播发控制剥去了,最少加了这个特性后视頻顶层能够有别的dom元素出現了(非腾迅白名单机版制的1种解决对策)。

<video id="video" src="xx.mp4" playsinline webkit-playsinline></video>

全自动播发

android自始至终不可以全自动播发,很少说。值得1提的是经测如今ios10后版本号的safari和手机微信都不让视頻全自动播发了(顺便声频也不可以全自动播发了),但手机微信出示了1个恶性事件WeixinJSBridgeReady,在手机微信嵌入webview全局性的这个恶性事件开启后,视頻仍能够全自动播发,这个应当是如今在ios端手机微信的视頻全自动播发的较为可靠的方法,别的如手q或别的访问器,提议就正确引导客户考虑触摸屏的个人行为实际操作考虑较为好。

document.addEventListener("WeixinJSBridgeReady", function (){ 
    video.play();
    video.pause();
}, false)

播发操纵

针对video或audio等新闻媒体元素,有1些方式,常见的有play(),pause();也是有1些恶性事件,如'loadstart','canplay','canplaythrough','ended','timeupdate'.....这些。
在挪动端有1些坑必须留意,不必随便应用新闻媒体元素的除'ended','timeupdate'之外event恶性事件,在不一样的机子上将会有不一样的状况造成,比如:ios下监视'canplay'和'canplaythrough'(是不是已缓存了充足的数据信息能够顺畅播发),当载入时是不容易开启的,即便preload="auto"也没用,但在pc的chrome调节器下和android下,是会在载入环节就开启。ios必须播发后才会开启。总而言之便是如今的视頻规范还不尽健全,有许多坑要留意,要应用前最好是自身亲测1遍
便是当第1次播发视頻的情况下ios端,假如互联网慢,视頻从刚开始播到能呈现画面会有短暂性的黑屏(解决视頻源数据信息的時间),以便防止这个黑屏,能够在视頻上加个div浮层(能够1个假的视頻第1帧),随后用timeupdate方式监视,视屏播发及有画面的情况下再移除浮层

video.addEventListener('timeupdate',function (){
    //当视頻的currentTime超过0.1时表明黑屏時间已过,已有视頻画面,能够移除浮层(.pagestart的div元素)
    if ( !video.isPlayed && this.currentTime>0.1 ){
        $('.pagestart').fadeOut(500);
        video.isPlayed = !0;
    }
})

掩藏播发控制

听说腾迅的android精英团队的x5核心精英团队放宽了视頻播发的限定,视頻不1定启用它们那个备受诟病的视頻播发器了,x5-video-player-type="h5"特性这个特性仿佛就有点那个意思,尽管体验還是有点...(导航栏栏也会清除)但最少播发器控制沒有了,顶层能够浮div或别的元素了,这个還是值得1提。也有1点值得说的是,带播发器控制的掩藏.

<div class="videobox" ontouchmove="return false;">
    <video id="mainvideo" src="test.mp4" x5-video-player-type="h5" playsinline webkit-playsinline></video>
</div>

例如这个videobox在android下掩藏,只用display:none貌似還是不好的,但加个z-index:⑴,设定成⑴便可以做到掩藏播发器控制的目地了。

参照文章内容

html5--挪动端视頻video的android适配,除去播发控制、全屏等
MDN-Video
视頻H5のVideo标识在手机微信里的坑和技能
挪动端HTML5<video>视頻播发提升实践活动
手机微信端视頻播发难题

到此这篇有关Html5 video标识视頻的最好实践活动的文章内容就详细介绍到这了,更多有关Html5 video內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服