如何让JS为全班执行？

如何解决如何让JS为全班执行？

我的页面上有很多视频，我在视频上创建了额外的按钮来加速视频，如果我调用 getElementById，它就可以工作。是否可以对页面上的所有视频使用一个 Javascript？由于它大约是 80+，那么将会有很多重复的 javascript 代码，因为我还必须制作按钮才能回到速度 1x

HTML 页面块看起来像这样。

....
<div class="LigthBox">
        <a href="#DVDList" class="close" id="clVid1"></a> <a href="javascript:Play15();" class="speed15"> <a href="javascript:Play1();" class="speed1"></a> 
        <video class="Video_LitBox" id="DVD101" controls preload="none" poster="img/DVDThb-101.png"> <source src="res/vid-str.PHP?play_video=101" type="video/mp4"> </video>  
        <h3 class="DVid_title">101 Intro </h3>
        <p class="DVid_body">101 Intro description .....</p>
    </div>
....

和下面的脚本区域我有以下内容：

<script type="application/javascript">
  var vid = document.getElementById("DVD101");
  vid.onended = function() { 
    alert("The video has ended");
    fireEvent( document.getElementById('clVid1'),'click'); 
  } 

  function Play1() { 
    vid.playbackRate = 1;
  }
  function Play15() { 
    vid.playbackRate = 1.5;
  }
</script>

所以变量 vid 以某种方式为页面上的每个视频或任何其他工作（如果有）定义。顺便说一句，视频结束后 fireevent 也不起作用，显示警报但不关闭窗口。

解决方法

您可能应该更改选择器，而不是使用 getElementById() 方法，您应该尝试：

document.querySelectorAll('video')

将返回一个包含所有视频实例的数组。然后，您可以使用简单的 for...in 或 forEach 循环轻松执行任何操作。

More details 关于 querySelectorAll() 方法。

对于任何对解决方案感兴趣的人。感谢@Aaron_Actu 的建议和一些挖掘，我最终只制作了一个带有参数（视频速度）的简短 JS

因此从 html 调用的所有视频看起来都一样

....
<a href="javascript:PlaySpeed(15);" class="speed15"></a>
....

在页面底部的脚本看起来像

....
  function PlaySpeed(vspd) { 
    var vid = document.querySelectorAll('video');
    for (var i=0; i<vid.length; i++) {     
      vid[i].playbackRate = vspd / 10;
    }
  }
...

我通过 10 倍乘数传递“视频速度”，以便参数是一个整数