uni-app微信小程序解决多个视频同时播放问题

这里我用的uni-app开发的小程序,微信小程序原生开发也是同理, 写法和api简单改下就行

当你的页面上有多个视频video组件标签时, 会出现多个视频可以同时播放的问题,这样显然是不正常的, 那么解决办法如下

调用 uni.createVideoContext 来创建并返回 video 上下文 videoContext 对象

假设页面有两个视频的话, 第一个视频开始播放时调用 videoContext 对象的暂停方法pause, 暂停第二个视频即可

但是很多情况下, 页面的video组件标签的个数是不确定的, 是通过列表循环出来的, 那么解决办法如下

<view v-for="(item,index) in videoList" :key="index">
      <video :id="`video${index}`"   :src="item" controls v-if="item" @play='videoPlay(index)'></video>
 </view>

给video组件标签加上一个video和下标加起来的动态id, 方便uni.createVideoContext 传入第一个参数获取video上下文对象

声明一个变量 playIdx 记录上一次播放视频的下标

videoPlay(index) {
                if (this.playIdx !== '') {
                    console.log(`暂停上一个下标为${this.playIdx}的视频`);
                    let videoContext  = uni.createVideoContext(`video${this.playIdx}`)
                    videoContext .pause()
                }

                this.playIdx = index
            }

这样即可

(注意.在组件中使用uni.createVideoContext时, 要在第二个参数传入this, 否则不生效)