1***@qq.com
1***@qq.com
  • 发布:2021-10-25 13:36
  • 更新:2023-10-17 09:26
  • 阅读:907

uniapp上关于vidoe组件如何销毁?

分类:uni-app

平台:微信小程序
小程序版本:1.05
Hbuildx版本:3.2.3
Vue版本:2.x

通过tab实现切换video,发现video的视频即使暂停了,视频资源也还还是会一直加载,看到论坛有帖子关于这个问题的讨论,官方人员提出用v-if去销毁,试过了并没什么用
希望有大神能帮忙解决一下
下面为我的测试demo

<template>  
    <view class="content">  
        <button type="default" @click="play()">切换</button>  
        <view class="box" v-if="isPlay"></view>  
        <video id='myVideo' :src="src" controls v-else></video>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            src:'',  
            videoContext:'',  
            isPlay: true  
        };  
    },  
    onLoad() {},  
    onReady: function(res) {  
        // #ifndef MP-ALIPAY  
        this.videoContext = uni.createVideoContext('myVideo');  
        // #endif  
    },  
    mounted() {},  
    methods: {  
        play() {  
            this.isPlay = !this.isPlay;  

            if(this.isPlay){  
                this.src='';  
                this.videoContext.stop()  
            }else{  
                this.src = 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v'  
                this.videoContext.play()  
            }  
        }  
    }  
};  
</script>  

<style lang="scss">  
.content {  
    width: 100%;  
    height: 500rpx;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
}  

.box {  
    width: 200rpx;  
    height: 200rpx;  
    border: 1rpx solid red;  
}  

</style>  
2021-10-25 13:36 负责人:无 分享
已邀请:
lihailan

lihailan - xue

解决了不

要回复问题请先登录注册