h5视频播放踩坑纪录

2019年8月31日 317次阅读 来源: william

跟着抖音、快手这类的视频类app的火爆，挪动端h5视频类运用也随之鼓起，运用video播放的场景也越来越多，本篇文章重要例举了挪动端视频播放的一些场景和个人在开辟过程当中碰到的一些题目，愿望在看过这篇文章后，能对开辟者在挪动端运用video播放时疾速开辟削减踩坑

全屏播放

视频的全屏播放是挪动端一个很罕见的场景，因而我们须要对video设置全屏播放，全屏播放用到的要领是requestFullscreen()，再加上斟酌浏览器的兼容性题目，须要加上兼容代码：

let ele = document.getElementById('video')
if (ele.requestFullscreen) {
  ele.requestFullscreen()
} else if (ele.mozRequestFullScreen) {
  ele.mozRequestFullScreen()
} else if (ele.webkitRequestFullScreen) {
  ele.webkitRequestFullScreen()
}
ele.play()

猎取video元素节点，然后推断差异浏览器的requestFullscreen属性，挪用差异的要求全屏的要领，如许就能够保证视频的全屏播放

微信浏览器全屏播放

为何要零丁说起微信浏览器下的视频全屏播放能？因为在微信下你能够挑选运用原生浏览器内核衬着video照样启用腾讯的x5内核衬着，有什么区别呢？假如运用原生衬着，那就和在一般浏览器衬着一样，然则假如启用腾讯x5内核衬着，当视频播放时，x5内核会强迫视频全屏播放，然则如今并不支撑ios，接下来就一同来看微信中x5内核全屏播放表现

x5内核同层播放

通过给video标签增加x5-video-player-type=”h5″属性启用x5内核，启用x5内核衬着video虽然会全屏播放视频，然则如许也供应了更好的用户体验，同时x5内核衬着另有一个长处就是支撑同层衬着，video播放时层级不再是第一流，能够有元素浮在video上方，也许结果以下图：
WechatIMG310.jpeg
《h5视频播放踩坑纪录》
如上图所示，这是全屏播放的视频，同时在这个视频上面层叠了一个通明的浮层，然则会显著发明视频播放时有黑边，那是因为没有声明x5-video-player-fullscreen，假如不说明此属性，页面获得视口地区为原始视口大小(视频未播放前)，比如在微信里，会有一个常驻的标题栏，假如不声明此属性，这个标题栏高度不会给页面，播放时会均匀分为两块（高低黑块），设置了属性结果图以下：
WechatIMG312.jpeg
《h5视频播放踩坑纪录》
会显著看到视频上顶到标题栏，黑边消逝，假如此时视频的宽高运用的并非动态盘算的单元，你还须要从新赋值视频宽高：

window.onresize = function(){
  test_video.style.width = window.innerWidth + "px";
  test_video.style.height = window.innerHeight + "px";
}

playsinline

当在微信浏览器下想用x5内核衬着，然则又不想强迫全屏播放怎么办呢？这个时刻就要playsinline属性了，这个属性也能处置惩罚一些其他的挪动端浏览器强迫全屏播放的题目，只须要设置playsinline=”true”，webkit-playsinline=”true”声明，就能够够了，然则在x5下衬着，也就是说在android下假如要用x5衬着一定会全屏播放

事宜差异

loadedmetadata

此事宜示意媒体的元数据已加载终了，如今一切的属性包含了它们应有的有用信息，经常使用的信息有duration，猎取视频的时长，然则这个属性在android和ios下有点差异，在android中，在加载完视频后就会触发，猎取到响应视频信息，然则在ios下，微信浏览器中此事宜视频加载完成后并不会触发，点击播放后才会触发，然则在safari浏览器中视频加载完成后就会触发

canplay

此事宜示意在媒体数据已有充足的数据（最少播放数帧）可供播放时触发，此事宜在android下视频加载的时刻就会触发，然则在ios中要视频播放后才会触发

自动播放

在android中autoplay属性只要chrome浏览器中同时设置autoplay和muted（禁音）才自动播放，其他浏览器均不支撑让视频自动播放，并且在android微信浏览器中同时设置autoplay和poster属性，poster属性也会失效，视频封面展现不出来，在ios挪动端中autoplay并不能直接自动播放，然则mac safari中在video中设置autoplay和muted属性能够自动播放，这和在网上看到的文章有点相差，在MDN上有一个video属性支撑表：
《h5视频播放踩坑纪录》

总结

跟着挪动流量时期的到来，挪动端的上网体验的优化，更多的视频播放场景和需求都邑承载到挪动端上，然则挪动端的视频播放因为浏览器内核、体系等限制性致使视频在播放时表现不一，须要开辟人员花时间精神去处置惩罚此类题目，愿望这篇文章能对人人在挪动端运用video标签时有协助。假如有毛病或不严谨的处所，迎接批评指正，假如喜好，迎接点赞。

    原文作者：william
    原文地址: https://segmentfault.com/a/1190000018626384
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞