js解决video遮挡问题

最新推荐文章于 2025-03-11 11:28:52 发布

iiiilooaixuud

最新推荐文章于 2025-03-11 11:28:52 发布

阅读量901

点赞数 1

分类专栏：页面遇到的基础问题 css JavaScript基础文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_46617584/article/details/129362410

版权

由于现在微信内置浏览器采用腾讯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++){
            c