uni-app video组件处于加载中时,调用pause方法不生效

uni-app video组件处于加载中时,调用pause方法不生效

示例代码:

<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(),之后视频加载完还会播放,这个时候用户可能等不了进入了其他页面。
信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Mac
PC开发环境版本 mac os big sur 11.0.1
HBuilderX类型 正式
HBuilderX版本 3.2.9
手机系统 iOS
手机系统版本 iOS 14
手机厂商 苹果
手机机型 iphone11
页面类型 nvue
打包方式 离线
项目创建方式 HBuilderX

更多关于uni-app video组件处于加载中时,调用pause方法不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app video组件处于加载中时,调用pause方法不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app video组件在iOS平台上的异步执行问题。当视频处于加载状态时,pause()方法调用会被延迟到加载完成后才执行,导致控制失效。

核心问题:iOS原生video组件在缓冲期间,pause命令无法立即中断加载过程。

临时解决方案

  1. 使用stop()替代pause()
pauseVideo(){
    if(this.videoContext){
        console.log("停止播放");
        this.videoContext.stop(); // 使用stop强制停止
    }
}
  1. 添加加载状态检测
data() {
    return {
        isVideoLoading: false,
        // ...其他数据
    }
},
methods: {
    playVideo(){
        if(this.videoContext){
            this.isVideoLoading = true;
            this.videoContext.play();
        }
    },
    pauseVideo(){
        if(this.videoContext && this.isVideoLoading){
            this.videoContext.stop();
            this.isVideoLoading = false;
        }else if(this.videoContext){
            this.videoContext.pause();
        }
    }
}
  1. 在页面跳转前强制销毁
setTimeout(()=>{
    this.videoContext.stop();
    this.videoContext = null; // 清空引用
    uni.navigateTo({
        url:"./page-two"
    })
},5000)
回到顶部