使用js实现多个video，一个播放其他暂停

最新推荐文章于 2025-03-18 20:23:20 发布

昵称2-20个字符

最新推荐文章于 2025-03-18 20:23:20 发布

阅读量3k

点赞数 3

分类专栏： HTML5 javascript 文章标签： js video 视频

本文链接：https://blog.youkuaiyun.com/weixin_39517183/article/details/107026576

版权

javascript 同时被 2 个专栏收录

59 篇文章

订阅专栏

HTML5

13 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现一个视频播放时，其他视频暂停的功能。通过监听video元素的'play'事件，可以确保当一个视频开始播放时，其他所有视频都会暂停，达到视频播放的同步效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

 <div class="videoContent">
	 <div class="videoMod">
	    <h3>海贼王：路飞成功收编小弟，草帽海贼团全员都在聆听他的誓言！</h3>
	    <video src="./video/video1.mp4" controls >您的浏览器不支持 video 标签。</video>
	  </div>
	  <div class="videoMod">
	    <h3>海贼王：索隆大大精彩时刻，一个永远不会喊痛的男人！</h3>
	    <video src="./video/video2.mp4"  controls >您的浏览器不支持 video 标签。</video>
	  </div>
	  <div class="videoMod">
	    <h3>海贼王：“顶上战争”精彩的对决，让人热血沸腾的画面！</h3>
	    <video src="./video/video3.mp4"  controls >您的浏览器不支持 video 标签。</video>
	  </div>
</div>

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

}