这里我用的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, 否则不生效)
