最近刚结束一个移动端涉及视频播放的小项目，踩了不少坑，现记录在此：
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 中则可以正常听到背景音乐，因为在安卓中一个媒体播放是排斥其他媒体播放的。这个时候如果想要兼容
原文地址：https://www.cnblogs.com/programs/p/10343162.html
时间： 2024-11-07 23:29:23