由于现在微信内置浏览器采用腾讯X5内核,X5内核以增强用户体验为名,给video套上了自己的UI并强制全屏与置顶,这个全屏与层级不接受DOM层面的任何约束。
第一种情况如图
安卓的效果
视频会遮挡侧边栏。
思路:点击视频播放的时候,打开新的页面播放视频,此页面视频重新加载即可。
由于此页面数量不定,是从后台接口返回的src,自动渲染的。所以要循环出视频,然后获取这个视频的元素还要使用定时器才能获取到。(如果视频是本来页面就存在,那么不需要定时器。)
最后,由于ios不存在这个问题,所以一开始可以判断是否是ios。
mounted() {
var userAgent = navigator.userAgent;
var isiOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if(!isiOS){
setTimeout(function(){
const videos = document.getElementsByTagName('video');
for(var i=0;i<videos.length;i++){
const url=videos[i].firstElementChild.src
videos[i].addEventListener('playing',function(){
window.open(url);
this.load();
}
)
}
},500);
}
},
第二种情况如图
如果在当前页面播放,点击上面的导航栏按钮,那么也会遮挡。
思路:在video标签的同级添加一个div,能覆盖住这个video,也就是点击这个div可以直接在新页面播放视频,此页面不播放。
代码:
<div class="mask" @click.stop="videoClick" v-show="maskShow">
</div>
<video
controls
:src="systemConfig.trainningCenterApi + videoInfo.url"
webkit-playsinline="true"
playsinline="true"
:poster="systemConfig.trainningCenterApi + videoInfo.img_url"
id="video"
></video>
.mask{
position: absolute;
top:0;
width: 100%;
height: 100%;
z-index: 99;
}
isIos(){
var userAgent = navigator.userAgent;
var isiOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
// alert(isiOS);
if(!isiOS){
this.maskShow=true
}
else{
this.maskShow=false
}
},
videoClick() {
var elevideo = document.getElementById("video");
window.open(elevideo.src)
},
mounted() {
this.isIos();
},
data() {
return {
maskShow:false
};
},