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标签时有帮助。若是有错误或不严谨的地方，欢迎批评指正，若是喜欢，欢迎点赞。