掘金：h5视频播放踩坑记录

2019-04-09 H5案例分享 H5案例分享

随着抖音、快手这类的视频类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

如上图所示，这是全屏播放的视频，同时在这个视频上面层叠了一个透明的浮层，但是会明显发现视频播放时有黑边，那是因为没有声明x5-video-player-fullscreen，如果不申明此属性，页面得到视口区域为原始视口大小(视频未播放前)，比如在微信里，会有一个常驻的标题栏，如果不声明此属性，这个标题栏高度不会给页面，播放时会平均分为两块（上下黑块），设置了属性效果图如下： WechatIMG312.jpeg

会明显看到视频上顶到标题栏，黑边消失，如果此时视频的宽高使用的并不是动态计算的单位，你还需要重新赋值视频宽高：

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属性支持表：

总结

随着移动流量时代的到来，移动端的上网体验的优化，更多的视频播放场景和需求都会承载到移动端上，但是移动端的视频播放由于浏览器内核、系统等限制性导致视频在播放时表现不一，需要开发人员花时间精力去处理此类问题，希望这篇文章能对大家在移动端使用video标签时有帮助。如果有错误或不严谨的地方，欢迎批评指正，如果喜欢，欢迎点赞。

作者：william_li
链接：https://juejin.im/post/5c958e55f265da61200990b5
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

（转自掘金的h5视频播放踩坑记录，作者：william_li，链接：https://juejin.im/post/5c958e55f265da61200990b5）

以上为“H5案例分享”团队转载文章，版权归原作者所有。

以上为“H5案例分享”团队原创文章，转载请注明出处！