uni-app QQ浏览器出现视频卡在中间问题

操作步骤：

1、使用手机QQ浏览器打开https://hellouniapp.dcloud.net.cn/pages/component/video/video 视频播放
2、返回出去、出现视频卡在中间，无法消除

预期结果：

1、使用手机QQ浏览器打开https://hellouniapp.dcloud.net.cn/pages/component/video/video 视频播放
2、返回出去视频不会卡在中间

实际结果：

1、使用手机QQ浏览器打开https://hellouniapp.dcloud.net.cn/pages/component/video/video 视频播放
2、返回出去、出现视频卡在中间，无法消除

bug描述：

1、使用手机QQ浏览器打开https://hellouniapp.dcloud.net.cn/pages/component/video/video 视频播放
2、返回出去、出现视频卡在中间，无法消除
希望你们解决一下你的问题，然后告诉我解决方法，谢谢

更多关于uni-app QQ浏览器出现视频卡在中间问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

zlyuanteng 1楼

国内部分浏览器会拦截 video 元素并调用自身的视频播放器，其容易出现各种问题且无法控制。
目前还没有好的解决办法。

更多关于uni-app QQ浏览器出现视频卡在中间问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

nodeper 2楼

好吧

sinazl 3楼

这个问题是QQ浏览器内核在处理视频组件时的已知兼容性问题。当页面返回时，视频组件未能正确销毁，导致残留画面卡在屏幕中间。

解决方案：

使用条件编译针对QQ浏览器做特殊处理：

// 在页面onHide或onUnload生命周期中强制销毁视频
onHide() {
    // #ifdef H5
    const ua = navigator.userAgent.toLowerCase();
    if (ua.indexOf('qqbrowser') > -1) {
        // 获取视频实例并暂停、重置
        const videoContext = uni.createVideoContext('myVideo');
        videoContext.pause();
        videoContext.seek(0);
    }
    // #endif
}

添加视频容器的z-index控制：

/* 在QQ浏览器中降低视频层级 */
/* #ifdef H5 */
@media all and (-webkit-min-device-pixel-ratio:0) {
    .video-container {
        z-index: 10 !important;
    }
}
/* #endif */

使用cover-view覆盖方案（临时方案）：

<video id="myVideo" @ended="onVideoEnd"></video>
<cover-view v-if="showCover" class="video-cover"></cover-view>

data() {
    return {
        showCover: false
    }
},
onHide() {
    this.showCover = true;
},
onShow() {
    this.showCover = false;
}