一、什么都不设置的情况下
层级问题
1、在苹果手机中: safari播放视频会自动全屏并且是竖屏,uc和QQ会全屏但是是横屏。
2、在安卓手机中:uc中video层级太高,不播放前都正常,一播放后层级就变最高,滑动页面的时候会连头部标题栏都,无论怎么设置z-index都没用。在QQ中会弹出小窗口悬浮,脱离原来的设置好的播放框里面
解决办法
1、不管是安卓手机还是苹果手机都设置播放的时候 就全屏播video.webkitEnterFullScreen(),这样就不会出现浮窗,安卓手机全屏播放时是按照重力方向来感应的,不会像之前的苹果手机中的uc和QQ,竖着手机打开视频也是横屏
x5-video-player-type="h5",这个只能在QQ浏览器中起作用,解决层级高的问题
封面问题
1、在pc中或者模拟器中,都是默认第一帧会封面
2、在手机里面,没有封面,必须自己设置poster属性值给它一张图
封面解决办法
1、加上判断在苹果手机中加上autoplay属性,在pc端中会自动播放,但是在手机端不会,还有出现封面图 ,安卓手机加上也没用
2、用截取视频的第一帧来作为封面,播放的时候 隐藏,但是只有safari会显示图片 uc和QQ依旧显示不了,方法如下
// 设置视频封面 为视频第一帧
setPoster(time,obj){
var video, output;
output = document.getElementById("output"+time);
var canvas = document.createElement('canvas')
var img = document.createElement("img");
video = document.getElementById('myVideo'+time)
video.setAttribute('crossOrigin', 'anonymous')
canvas.width = video.clientWidth
canvas.height = video.clientHeight
video.onloadeddata = (() => {
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
var dataURL = canvas.toDataURL('image/png')
img.src = dataURL;
img.style.width = '100%';
output.appendChild(img);
})
},
output要进行定位
3、总的来说不管哪种方法依旧没有解决问题