js实现多个video,一个播放其他暂停

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
window.onload=function(){
    var videos = document.getElementsByTagName('video');//获取所有video
    //循环给所有video添加监听事件 当前的video开始播时  调用pauseAll 将当前播放的video的索引传值过去
    for (var i = videos.length - 1; i >= 0; i--) {
        (function(n){
            videos[n].addEventListener('play',function(){
                pauseAll(n);
            })
        })(i)
    }
    //接收调用传来的索引 循环所有video 索引与传来的索引不相同的 暂停 重载
    function pauseAll(index){
        for (var j = videos.length - 1; j >= 0; j--) {
            if (j!=index){
                videos[j].pause();
                videos[j].load();
            }
        }
    };
 
}

  vue

复制代码
<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>

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()
            }
        }
    }
}
复制代码

 

posted @   蓝色精灵jah  阅读(319)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示