如何让JS执行整个class？

Question

我的页面上有很多视频，我在视频上创建了额外的按钮来加速视频，如果我调用 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。 btw fireevent 在视频结束后也不起作用，警报显示但不会关闭 window.

Answer 1

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

document.querySelectorAll('video')

这将 return 一个包含所有视频实例的数组。然后，您可以通过简单的 for...in or forEach 循环轻松地做任何您想做的事情。

More details 关于 querySelectorAll() 方法。

Answer 2

对于任何对解决方案感兴趣的人。感谢@Aaron_Actu 的建议和一些挖掘，我最终只制作了一个带有参数 (video-speed)

的简短 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 倍乘数传递“video-speed”，因此参数是一个整数

如何让JS执行整个class？

How to get JS to execute for whole class?

javascript

getelementbyid

playback-rate