移动端视频踩坑实录

最近刚结束一个移动端涉及视频播放的小项目，踩了不少坑，现记录在此：

1、ios系统中让视频宽高都100%铺满所在父层

设置width="100%" height="100%"在ios中是无法实现宽高都100%的，应该设置 video 的样式：

100%;
height:100%;
object-fit:fill;

2、安卓系统中禁止视频全屏

playsinline只能禁止ios全屏，不能禁安卓全屏，要在安卓禁止视频全屏须在 video 中设置

x5-playsinline="true"

另外，在安卓手机如果不禁止视频全屏的话，在视频播放完后会跳到一个视频推荐页面

3、视频在谷歌浏览器不能自动播放

在 video 中加了 autoplay 发现在谷歌浏览器中并不能默认播放，如果强制 play() 则会出现 “Uncaught (in promise) DOMException” 错误，这是因为 Chrome 的 autoplay 政策在2018年4月做了更改，必须有用户点击等行为发生时才能播放（音频也是如此），想要解决这个问题必须在客户端修改浏览器设置：

第一步，在chrome浏览器中输入：chrome://flags/#autoplay-policy；

第二步，在Autoplay policy中将Default改为No user gesture is required；

第三步，点击下方的“RELAUNCH NOW”重启浏览器就大功告成了！

4、视频在微信浏览器中打开的自动播放

在微信浏览器打开视频如果想要实现自动播放须在 wx.ready 中设置该视频 play()，或者用如下代码：

document.addEventListener('WeixinJSBridgeReady', function () {
   mp4.play()
})

5、如何去掉视频播放前的黑屏

视频下载下来后在播放之前还需要处理流数据，如果视频比较大处理流数据时间比较长就会导致播放前的黑屏（也可能是一片白，总之是没有播放任何内容），这时可以通过判断视频播放时间（currentTime）是否大于0来判断视频是否已经可以播放了，如果currentTime大于0再把视频层显示出来就可以有效跳过播放前的黑屏现象，视频层显示出来时注意要把视频的currentTime重新设为0，否则会出现视频前面几帧缺失的情况。

6、mp4+mp3 在ios和安卓不同的表现

如果在播放视频时有其他的音频背景音乐，在安卓中播放视频的同事音频不能同时播放，在 ios 中则可以正常听到背景音乐，因为在安卓中一个媒体播放是排斥其他媒体播放的。