标签:str 小项目 手机 黑屏 没有 cti video 否则 安卓系统
最近刚结束一个移动端涉及视频播放的小项目,踩了不少坑,现记录在此:
1、ios系统中让视频宽高都100%铺满所在父层
设置width="100%" height="100%"在ios中是无法实现宽高都100%的,应该设置 video 的样式:
width:100%;
height:100%;
object-fit:fill;
2、安卓系统中禁止视频全屏
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 中则可以正常听到背景音乐,因为在安卓中一个媒体播放是排斥其他媒体播放的。这个时候如果想要兼容
标签:str 小项目 手机 黑屏 没有 cti video 否则 安卓系统
原文地址:https://www.cnblogs.com/programs/p/10343162.html