更改多个 html5 视频播放器速度

Question

我有一个页面只有几个 HTML5 视频播放器，我想以 0.5 倍速播放所有这些播放器。我已经展示了仅针对单个视频播放器运行的 js 片段。

<script type="text/javascript">
  /* play video twice as fast */
  document.querySelector('video').defaultPlaybackRate = 1.0;
  document.querySelector('video').play();

  /* now play three times as fast just for the heck of it */
  document.querySelector('video').playbackRate = 3.0;
</script>

这仅适用于第一个视频。我的每个视频都需要它。以下是 html.

的一部分片段

<ul class="regular slider">
    <li class="videodiv" style="background-image: url('boxing.jpg')">
      <video preload="yes" loop>
        <source src="12950321.mp4" type="video/mp4"/>
      </video>
      <div class="slantedcaption">Boxing</div>
      <a href="detail.html">
        <div class="caption">
          <h2>Boxing</h2>
          <div class="category">Passion</div>
        </div>
      </a>
    </li>
    <li class="videodiv" style="background-image: url('coding.jpg')">
      <video preload="yes" loop>
        <source src="14019065.mp4" type="video/mp4"/>
      </video>
      <div class="slantedcaption">Boxing</div>
      <a href="detail.html">
        <div class="caption">
          <h2>Boxing</h2>
          <div class="category">Passion</div>
        </div>
      </a>
    </li>
    <li class="videodiv" style="background-image: url('dance.jpg')">
      <video preload="yes" loop>
        <source src="12950321.mp4" type="video/mp4"/>
      </video>
      <div class="slantedcaption">Boxing</div>
      <a href="detail.html">
        <div class="caption">
          <h2>Boxing</h2>
          <div class="category">Passion</div>
        </div>
      </a>
    </li>
</ul>

Answer 1

这是因为 querySelector 只有 return 第一个元素。

如果您想访问多个视频标签，可以改用 querySelectorAll。

querySelectorAll 将 return 您所有视频的数组，然后您需要循环播放它们以应用您的 defaultPlaybackRate。

示例：

var videos = document.querySelectorAll('video');

for(i=0;i<videos.length;i++){
  videos[i].playbackRate = 0.5;
}

Answer 2

Javscript 文件更改为：

<script type="text/javascript">
  /* play video twice as fast */
  document.querySelector('video').defaultPlaybackRate = 1.0;
  document.querySelector('video').play();

  /* now play three times as fast just for the heck of it */
  var videos =document.querySelectorAll('video');
  for (var i=0;i<videos.length;i++)
  {
    videos[i].playbackRate = 3.0;
  }
</script>

错误是当您使用 querySelector 时，它 returns 是一个视频对象。作为querySelectorAll，returns对象数组（作为所有视频标签）。所以你必须迭代数组并提高视频的速度。

希望对您有所帮助。编码愉快！！

更改多个 html5 视频播放器速度

Change multiple html5 video player speed

html

javascript

video

playback

html5-video