Vue 一個頁面只播放一個音頻的解決方法

html 代碼如下

<div class='video-list'>
    <div class="video-wrap" v-for="(item, index) in dataList" :key="index">
          <div class="video">
                <video :src="item.src" @play="handlePlay(index)" controls="controls"></video>
          </div>
    </div>
</div>

vue代碼如下

data () {
    videoElement: [] // 創建一個數組
},
mounted () {
    this.videoElement = document.getElementsByTagName('video') // 獲取頁面上所有的video對象
},
handlePlay (index) {
    const videoElement = this.videoElement
    if (videoElement && videoElement.length > 0) {
        for (let i = 0; i < videoElement.length; i++) {
            if (i === index) {
                this.videoElement[i].play()
            } else {
                this.videoElement[i].pause()
            }
        }
    }
}

 僅提供思路，可隨意發揮