vue-一页面多个video只播放一个的解决办法

9次阅读

共计 615 个字符，预计需要花费 2 分钟才能阅读完成。

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 标签。</video>
          </div>
    </div>
</div>

javascript 代码：

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()}
        }
    }
}

原生 video 成果简陋，仅供参考。

参考链接：
https://segmentfault.com/a/11…

正文完