uni-app小程序解决多个视频同时播放问题
uni-app⼩程序解决多个视频同时播放问题这⾥我⽤的uni-app开发的⼩程序，⼩程序原⽣开发也是同理, 写法和api简单改下就⾏
当你的页⾯上有多个视频video组件标签时, 会出现多个视频可以同时播放的问题，这样显然是不正常的, 那么解决办法如下调⽤来创建并返回 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, ⽅便传⼊第⼀个参数获取video上下⽂对象
声明⼀个变量 playIdx 记录上⼀次播放视频的下标
videoPlay(index) {
if (this.playIdx !== '') {
console.log(`暂停上⼀个下标为${this.playIdx}的视频`);
let videoContext  = ateVideoContext(`video${this.playIdx}`)
小视频app开发videoContext .pause()
}
this.playIdx = index
}
这样即可
(注意.在组件中使⽤时, 要在第⼆个参数传⼊this, 否则不⽣效)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。