共计 2124 个字符，预计需要花费 6 分钟才能阅读完成。
随着抖音、快手这类的视频类 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 标签时有帮助。如果有错误或不严谨的地方，欢迎批评指正，如果喜欢，欢迎点赞。
