h5+jquery实现多个video标签自定义倍速播放

在HTML5中，使用<video>标签可以嵌入视频内容。结合jQuery，可以实现对多个视频的控制，包括定义和改变播放速度。

以下是一个简单的示例，展示如何使用jQuery来设置和改变多个<video>标签的播放速度（倍速）：

HTML部分：

<video id="video1" controls>
  <source src="movie1.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
 
<video id="video2" controls>
  <source src="movie2.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
 
<!-- 其他 video 标签 -->

jQuery部分：

$(document).ready(function(){
  // 设置初始播放速度为1.0
  var playbackRate = 1.0;
 
  // 为 video1 设置倍速播放
  $('#video1').get(0).playbackRate = playbackRate;
 
  // 为 video2 设置倍速播放
  $('#video2').get(0).playbackRate = playbackRate;
 
  // 为所有 video 设置倍速播放的函数
  function setPlaybackRate(rate) {
    $('video').each(function() {
      this.playbackRate = rate;
    });
  }
 
  // 示例：双倍速播放
  setPlaybackRate(2.0);
 
  // 示例：0.5倍速播放
  // setPlaybackRate(0.5);
});

在这个示例中，我们首先设置了初始的播放速度playbackRate。然后，使用jQuery选择器为每个<video>标签设置了相同的播放速度。通过setPlaybackRate函数，可以轻松地更改所有视频的播放速度。只需调用setPlaybackRate(desiredRate)并传入所需的播放速度即可。