3***@qq.com
3***@qq.com
  • 发布:2022-08-24 13:47
  • 更新:2022-09-08 09:47
  • 阅读:215

【报Bug】切换tabbar页面 使用uni.createVideoContext(videoId, this)和pause()无效视频无法暂停播放

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10专业版

HBuilderX类型: 正式

HBuilderX版本号: 3.5.3

手机系统: Android

手机系统版本号: Android 11

手机厂商: OPPO

手机机型: OPPO A9

页面类型: nvue

vue版本: vue3

nvue编译模式: fast

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view>  
        <video :src="url" :poster="url + '?x-oss-process=video/snapshot,t_1,m_fast'">  
            <cover-view class="cover">video组件</cover-view>  
        </video>  

        <video  
            id="myVideo"  
            :src="url"  
            :show-center-play-btn="false"  
            :controls="false"  
            :enable-progress-gesture="false"  
            :show-fullscreen-btn="false"  
            :show-progress="false"  
            :show-loading="false"  
            codec="hardware"  
            :play-strategy="1"  
            :poster="url + '?x-oss-process=video/snapshot,t_1,m_fast'"  
            style="margin-top: 40rpx;"  
        >  
            <cover-image class="logo" @click="clickBtn(5)" src="../../static/logo.png"></cover-image>  
            <cover-view class="cover"></cover-view>  
        </video>  

        <view class="btns">  
            <button class="btn" @click="clickBtn(1)" type="primary">播放</button>  
            <button class="btn" @click="clickBtn(2)" type="primary">暂停</button>  
            <button class="btn" @click="clickBtn(3)" type="primary">全屏(竖屏)</button>  
            <button class="btn" @click="clickBtn(4)" type="primary">全屏(横屏)</button>  
            <button class="btn" @click="clickBtn(5)" type="primary">退出全屏</button>  
            <button class="btn" @click="clickBtn(6)" type="default">video</button>  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            url: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4',  
            videoContext: ''  
        };  
    },  
    onHide() {  
        let id = `myVideo`;  
        this.videoContext = uni.createVideoContext(id, this);  
        this.videoContext.pause();  
        console.log('onHide');  
    },  
    methods: {  
        clickBtn(i) {  
            let id = `myVideo`;  
            switch (i) {  
                case 1:  
                    try {  
                        this.videoContext = uni.createVideoContext(id, this);  
                        this.videoContext.play();  
                    } catch (err) {  
                        console.log(err);  
                    }  
                    break;  
                case 2:  
                    this.videoContext = uni.createVideoContext(id, this);  
                    this.videoContext.pause();  
                    break;  
                case 3:  
                    this.videoContext = uni.createVideoContext(id, this);  
                    // this.videoContext.requestFullScreen({ direction: -90 });  
                    this.videoContext.requestFullScreen({ direction: 0 });  
                    break;  
                case 4:  
                    this.videoContext = uni.createVideoContext(id, this);  
                    this.videoContext.requestFullScreen({ direction: -90 });  
                    // this.videoContext.requestFullScreen({ direction: 0 });  
                    break;  
                case 5:  
                    this.videoContext = uni.createVideoContext(id, this);  
                    this.videoContext.exitFullScreen();  
                    break;  
                case 6:  
                    uni.navigateTo({  
                        url: '../video/video'  
                    });  
                    break;  
            }  
        }  
    }  
};  
</script>  

<style scoped>  
.cover {  
    width: 200rpx;  
    height: 200rpx;  
    border-radius: 10rpx;  
    background: orangered;  
}  
.logo {  
    width: 40rpx;  
    height: 40rpx;  
    margin: 80rpx;  
}  
.btns {  
    width: 375px;  
    margin-top: 20rpx;  
}  
.btn {  
    width: 686rpx;  
    margin: 20rpx 32rpx;  
}  
</style>  

操作步骤:

点击video的播放图标视频播放切换tabbar页面,在onHide里面使用uni.createVideoContext(videoId, this)和pause()无效,视频无法暂停播放

预期结果:

视频可以暂停播放

实际结果:

视频无法暂停播放

bug描述:

切换tabbar页面时使用使用uni.createVideoContext(videoId, this)和pause()方法无效,视频无法暂停播放

2022-08-24 13:47 负责人:无 分享
已邀请:
DCloud_UNI_XU

DCloud_UNI_XU

这并不是一个 bug,各端展示效果会有所区别,正如你所说的,在 onHide 中去手动暂停是可以实现这种操作的,如果是微信小程序还可以使用 auto-pause-if-navigate 属性达到这种效果

  • 3***@qq.com (作者)

    切换tabbar无法暂停

    2022-08-24 14:36

  • 3***@qq.com (作者)

    只有使用uni,navigateTo()跳转页面才可以手动暂停

    2022-08-24 14:38

  • 3***@qq.com (作者)

    切换tabbar页面无法暂停

    2022-08-24 14:38

3***@qq.com

3***@qq.com (作者)

如果切换到tabber页面 手动暂停无效果

3***@qq.com

3***@qq.com (作者)

vue2没有这个问题

3***@qq.com

3***@qq.com (作者)

切换到tabbar页面,使用uni.createVideoContext(videoId, this)和pause()无法暂停视频播放
vue2.0则可以暂停视频播放

3***@qq.com

3***@qq.com (作者)

vue3.0 切换到tabbar页面,使用uni.createVideoContext(videoId, this)和pause()方法无效

3***@qq.com

3***@qq.com (作者)

实例

DCloud_UNI_XU

DCloud_UNI_XU

vue3.0 切换到tabbar页面,使用uni.createVideoContext(videoId, this)和pause()方法无效

此 bug 已复现,我们会尽快修复。

  • 3***@qq.com (作者)

    好的,感谢

    2022-08-29 15:10

  • 3***@qq.com (作者)

    你好,请问下个版本预计什么时间发布?

    2022-08-29 15:43

  • DCloud_UNI_XU

    回复 3***@qq.com: 此 bug 修复,我会在此贴回复

    2022-08-29 15:49

  • 3***@qq.com (作者)

    回复 DCloud_UNI_XU: 好的,感谢

    2022-08-29 18:24

DCloud_UNI_LXH

DCloud_UNI_LXH

alpha 3.6.1 已修复

要回复问题请先登录注册