单击视频时，如何使用 Javascript 切换多个视频的播放/暂停？

Posted 2023-03-13

【中文标题】单击视频时，如何使用 Javascript 切换多个视频的播放/暂停？

【英文标题】：How do I use Javascript to toggle play/pause for multiple videos when I click on the video?

【发布时间】：2014-11-08 12:45:54

【问题描述】：

当我将onclick="playPause()" 添加到一个视频中时，效果很好。我点击视频，它会像我想要的那样播放或暂停。如果我有多个视频，即使这些视频具有不同的 ID（例如：video id="v1" 和 video id="v2"），只要我点击一个视频，它总是会播放一个特定的视频。在多个视频上使用此脚本似乎只允许在一个视频上播放/暂停切换。这是我正在使用的 html 和脚本：

<video id="v1"   controls onclick="playPause()">
<source src="S12E13%203%20Acts%20of%20God.mp4" type="video/mp4">
</video>
    <script> 
var myVideo = document.getElementById("v1"); 
function playPause()  
if (myVideo.paused) 
    myVideo.play(); 
else 
    myVideo.pause();  
    </script>


<video id="v2"   controls onclick="playPause()">
<source src="S12E13%203%20Acts%20of%20God.mp4" type="video/mp4">
</video>
    <script> 
var myVideo = document.getElementById("v2"); 
function playPause()  
if (myVideo.paused) 
    myVideo.play(); 
else 
    myVideo.pause();  
    </script>


<video id="v3"   controls onclick="playPause()">
<source src="S12E13%203%20Acts%20of%20God.mp4" type="video/mp4">
</video>
    <script> 
var myVideo = document.getElementById("v3"); 
function playPause()  
if (myVideo.paused) 
    myVideo.play(); 
else 
    myVideo.pause();  
    </script>

顺便说一句：没什么大不了的，但是当我使用这个脚本时，我注意到原来的播放按钮不再起作用了。有办法解决吗？

【问题讨论】：

当你的脚本被编译时，playPause() 函数将被它后面的函数覆盖，直到最后一个函数......最终每当你调用 playPause() 处理视频的最后一个函数#v3将被调用...

【参考方案1】：

您可以将单击的元素作为参数传递给函数，例如onclick="playPause(this)"，然后您只需一个定义：

function playPause (video) 
  if (video.paused) 
    video.play(); 
  else 
    video.pause();

或者，您也可以使用document.getElementsByTagName() 或document.querySelectorAll() 迭代地查找所有视频并将事件侦听器绑定到它们：

document.querySelectorAll('video').forEach((video) => 
   video.addEventListener('click', function (event) 
     if (this.paused) 
       this.play(); 
     else 
       this.pause();
   );
);

【讨论】：

感谢您的帮助！ :)