移动端视频踩坑实录

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

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 中则可以正常听到背景音乐,因为在安卓中一个媒体播放是排斥其他媒体播放的。这个时候如果想要兼容

猜你喜欢

转载自www.cnblogs.com/programs/p/10343162.html