解决 uniapp video视频组件层级过高，预览会覆盖其他组件的问题。

解决 uniapp video视频组件层级过高，预览会覆盖其他组件的问题。解决方法：1、将被覆盖的组件用nve页面的方法展示，就不会被覆盖了。2、将video组件v-show隐藏，展示预览图片，点击预览视频时全屏播放视频即可。

哈里波提

9863人浏览 · 2021-12-14 15:19:31

哈里波提 · 2021-12-14 15:19:31 发布

解决 uniapp video视频组件层级过高，预览会覆盖其他组件的问题。

解决方法：

1、将被覆盖的组件用nve页面的方法展示，就不会被覆盖了。

2、将video组件v-show隐藏，展示预览图片，点击预览视频时全屏播放视频即可。

我使用的是第二种

html代码

// 创建一个预览图片，并给予点击事件
<image src="@/static/image/bofang.png" alt="" style=" width: 350rpx; height: 280rpx; position: relative;" @click="onIsVideo(videoSrc)">
// 创建一个用于预览的video标签
<video :src="onVideoSrc" x5-video-player-type="h5-page" :autoplay='true' v-show="false" style="width: 100vw; height: 100vh; " id="video_play" ></video>

js代码

onIsVideo(src){
        // 获取视频地址
        this.onVideoSrc = src
        // 获取 video 上下文 videoContext 对象
        this.videoContext = uni.createVideoContext('video_play');
        // 进入全屏状态
        this.videoContext.requestFullScreen();
},

这样的话用户点击会直接进入全屏模式播放视频，退出时被v-show隐藏