vue中同一页面多个video播放问题

最新推荐文章于 2026-04-08 08:52:27 发布

原创最新推荐文章于 2026-04-08 08:52:27 发布 · 5.6k 阅读

13 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

本文介绍了一种在Vue.js项目中处理同一页面多个视频元素的方法，确保一次仅播放一个视频。通过使用v-if判断和数组存储video元素，当播放某视频时，暂停其他所有视频。在`handlePlay`方法中，遍历videoElement数组，当前选中视频播放，其余视频暂停。这种方法有效地避免了声音叠加的问题。

在这里插入图片描述
项目中同一页面中同时存在两个视频,播放A视频时,又播放B视频,声音会叠加,因此,需要在播放一视频时,将另一视频停掉.

在这里插入图片描述
此处视频路径是分开存储,因此在播放对应视频时传入对应的参数,调用该方法时使用v-if判断一下即可

data () {
    videoElement: [] // 创建一个数组
},
mounted () {
    this.videoElement = document.getElementsByTagName('video') // 获取页面上所有的video对象
},

在这里插入图片描述
当视频地址是放在数组中存储时,
html样式

<div>
    <div 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>

script代码

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

借鉴博客 ==>vue 一页面多个video只播放一个的解决办法

标签

#vue