x***@163.com
x***@163.com
  • 发布:2021-10-27 17:03
  • 更新:2021-10-27 17:03
  • 阅读:717

【报Bug】video组件 处于加载中的时候,调用pause不生效

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: mac os big sur 11.0.1

HBuilderX类型: 正式

HBuilderX版本号: 3.2.9

手机系统: iOS

手机系统版本号: iOS 14

手机厂商: 苹果

手机机型: iphone11

页面类型: nvue

打包方式: 离线

项目创建方式: HBuilderX

示例代码:

<template>  
    <view class="container" :style="windowH">  
        <video class="view-video" id="videoContext" ref="videoContext" :style="windowH"  
            :src="url" autoplay="false">  
        </video>  

        <view class="view-layer">  
            <button class="btn" @click="onStartEvent">开始测试</button>  
            <button class="btn" @click="onResetEvent">重置</button>  
        </view>  
    </view>  
</template>  

<script>  
    const sysInfo = uni.getSystemInfoSync();  

    export default {  
        data() {  
            return {  
                title: 'Hello',  
                url:"https://outin-ccb8bf70814811ebb73400163e021072.oss-cn-shenzhen.aliyuncs.com/sv/5765b592-17cbbfc1a69/5765b592-17cbbfc1a69.mp4?Expires=1637833488&OSSAccessKeyId=LTAI4FocoL6tuCdYhuvug6Ee&Signature=Rt31s%2FGy%2F4gj1tI4%2Bmh9sSN0ASM%3D",  
            }  
        },  
        onLoad() {  

        },  
        onReady() {  
            this.videoContext = uni.createVideoContext("videoContext");  
        },  
        methods: {  
            windowH() {  
                return `height:${sysInfo.windowHeight}px`;  
            },  
            onStartEvent(){  
                console.log("测试");  
                //设置一个比较大的视频  
                this.playVideo()  

                //加载3秒的样子停止视频 并跳到另一个页面  
                setTimeout(()=>{  
                    this.pauseVideo();  
                    uni.navigateTo({  
                        url:"./page-two"  
                    })  
                },5000)//如果网络较快减小几秒时间,网络较慢增加一些时间,保证在视频处于加载的时候执行就能复现。我测试的时候100%复现  
            },  
            onResetEvent(){  
                this.stopVideo();  

            },  
            playVideo(){  
                if(this.videoContext){  
                    console.log("播放视频");  
                    this.videoContext.play();  
                }  
            },  
            pauseVideo(){  
                console.log(this.videoContext);  
                if(this.videoContext){  
                    console.log("停止播放");  
                    this.videoContext.pause();  
                }  
            },  
            stopVideo(){  
                if(this.videoContext){  
                    this.videoContext.stop();  
                }  
            }  
        }  
    }  
</script>  

<style lang="less">  
    .container {  
        display: flex;  
        flex-direction: column;  
        width: 750rpx;  
        background-color: #000000;  
        justify-content: center;  
        align-items: center;  
    }  

    .view-video{  
        width: 750rpx;  

    }  

    .view-layer{  
        width: 750rpx;  
        height: 300rpx;  
        background-color: #FFFFFF;  
        display: flex;  
        flex-direction: column;  
        align-items: center;  

        .btn{  
            width: 400rpx;  
            margin-top: 30rpx;  
        }  
    }  

</style>  

操作步骤:

在video 组件调用play()处于加载中的时候调用pause()

预期结果:

停止加载视频,或者加载完后不播放

实际结果:

视频加载完后依旧会播放,pause没有生效

bug描述:

关于Video 的一个问题:在video 加载一个比较大的网络视频的时候,会loading相对比较长的时间,在这个过程中调用了pause(),之后视频加载完还会播放,这个时候用户可能等不了进入了其他页面。

2021-10-27 17:03 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复