0

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

4

2 回答 2

1

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

document.querySelectorAll('video')

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

有关方法的更多详细querySelectorAll()信息。

于 2021-02-02T23:50:38.967 回答
0

对于任何对解决方案感兴趣的人。感谢@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;
    }
  }
...

我用 10x 乘数传递“视频速度”，所以参数是一个整数

于 2021-02-03T16:18:07.013 回答