uniapp 多个视频只播放当前视频暂停其它好用的方法

最新推荐文章于 2024-09-08 21:11:06 发布

contiguous

最新推荐文章于 2024-09-08 21:11:06 发布

阅读量1.7k

点赞数 2

分类专栏： uniapp 文章标签：小程序微信小程序

本文链接：https://blog.csdn.net/contiguous/article/details/119805699

版权

uniapp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

具体方式才考了https://blog.csdn.net/qq_45768871/article/details/111770781给出的方法，但是由于原文中提到的方法在Android微信小程序中存在不停暂停和播放的问题，在这里我将该问题给修复了，希望对需要的同学能有帮助。

<block v-for="(item,index) in videos" :key="index">
    <view>
        <view class="">
            <video :data-id="item.id" :key="item.id" :id="'video'+item.id"
             @play="playVideo" :poster="item.cover" @error="videoErrorCallback"
             :src="item.video_url" controls></video>
        </view>
    </view>
</block>

JS代码

playVideo(e){
    let _this = this;
    //全局变量changePlay表示正在切换。每次切换完播放等一秒在恢复，解决Android下的问题
    if(this.changePlay) {
        return
    }
    _this.changePlay = true
    let currentId = 'video' + e.currentTarget.dataset.id;// 获取当前视频id
    console.log("playVideo currentId ", currentId)
    this.videoContent = uni.createVideoContext(currentId,_this).play();
    
    // 获取视频列表
    let trailer = this.videos;
    trailer.forEach((item, index) =>{   // 获取json对象并遍历, 停止非当前视频
        if (item.video_url != null && item.video_url.length > 0) {
            let temp = 'video' + item.id;
            if (temp != currentId) {
                // 暂停其余视频
                uni.createVideoContext(temp,_this).pause(); //暂停视频播放事件
            }
        }
    })
    setTimeout(()=>{
        _this.changePlay = false
    },1000)
},

有问题望大家回复