如何在HTML页面播放其他视频时自动暂停当前视频？

嘿，我懂你现在的困扰——纯HTML确实没办法实现“播放一个视频时自动暂停其他视频”的功能，因为HTML本身没有这种联动的交互逻辑，得借助一点点JavaScript来搞定。别担心，代码非常轻量，完全不会复杂，我给你整理好了完整的实现方案：

完整代码示例 #

直接替换你现有的代码就能用，我保留了你的页面结构，只添加了必要的JS逻辑：

<!DOCTYPE html>
<html>
<head>
    <title>Videos | MCloud | Your Music Place</title>
</head>
<body>
    <HEADER>
        <a href="/" title="MCloud"><img src="images/logo.jpg" height="70"></a>
    </HEADER>

    <!-- 这里可以放任意数量的video元素，示例里放3个 -->
    <video controls width="400">
        <source src="video1.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

    <video controls width="400">
        <source src="video2.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

    <video controls width="400">
        <source src="video3.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

    <script>
        // 获取页面上所有的视频元素
        const allVideos = document.querySelectorAll('video');

        // 给每个视频绑定播放事件监听
        allVideos.forEach(video => {
            video.addEventListener('play', () => {
                // 遍历所有视频，暂停当前播放视频之外的其他视频
                allVideos.forEach(otherVideo => {
                    if (otherVideo !== video && !otherVideo.paused) {
                        otherVideo.pause();
                    }
                });
            });
        });
    </script>
</body>
</html>

代码工作原理 #

• 第一步：用document.querySelectorAll('video')获取页面上所有的<video>元素；
• 第二步：给每个视频添加play事件监听——当某个视频开始播放时，就会触发这个事件；
• 第三步：在事件处理函数里，遍历所有视频，判断如果不是当前正在播放的视频，并且它处于播放状态，就调用pause()方法暂停它。

小提示 #

• 确保你的视频文件路径是正确的（比如video1.mp4要和HTML文件在同一目录，或者用正确的相对路径）；
• 这个代码兼容所有现代浏览器，不需要引入任何第三方库；
• 如果你的视频用了自定义播放按钮（不是浏览器默认的controls），只需要在自定义播放按钮的点击事件里，加入这段暂停其他视频的逻辑就行。

内容的提问来源于stack exchange，提问作者Samiul Alim