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, 否則不生效)