Question

当我添加onclick =＆＃34; playPause（）＆＃34;只有一个视频效果很好。我点击视频，它就像我想要的那样播放或暂停。如果我有多个视频，即使视频具有不同的ID（例如：视频ID =＆＃34; v1＆＃34;以及视频ID =＆＃34; v2＆＃34;），每当我点击一个视频时＃39; ll总是播放一个特定的视频。在多个视频上使用此脚本似乎只允许在一个视频上播放/暂停切换。这是我使用的html和脚本：

<video id="v1" width="480px" height="267px" 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" width="480px" height="267px" 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" width="480px" height="267px" 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>

任何帮助将不胜感激！ BTW：没什么大不了的，但我注意到当我使用这个脚本时，原来的Play按钮不再起作用了。有办法解决这个问题吗？感谢。

Answer 1

您可以使用document.getElementsByTagName()或document.querySelectorAll()查找所有视频，并使用单个for循环对其进行迭代：

function playPause() {
 var videos = document.querySelectorAll("video");
 for(var i=0;len=videos.length;i<len i++){
  var myVideo = videos[i];
  if (myVideo.paused) 
    myVideo.play(); 
  else 
    myVideo.pause();
 }
}

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

1 个答案: