移动端视频踩坑实录

Posted 2021-02-07 programs

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

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

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

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

 

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

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

x5-playsinline="true"

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

 

3、video中src的地址不能为相对路径

video 中路径须为绝对路径或者 base64 数据

 

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

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

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

 

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

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

 

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

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