javascript - 多个视频的播放/暂停功能

Question

HTML:

 <video width="840" id="video">
          <source src="{{box.video}}" type="video/mp4">
 </video>

JS:

video = document.querySelector("#video");
$this = $(this);
function playVideo() {
   video.play();
}
function stopVideo() {
   video.pause();
}
function pauseVideo() {
   video.pause();
}
function skip(value) {
   video.currentTime += value;
} 

它适用于一个视频，但我的页面上有很多视频。因此，当我点击另一个视频时，它每次都会获得第一个音频。

如何对多个视频使用这些功能？

Answer 1

这里的问题是，您在页面中的多个视频元素中使用相同的 id，id 在页面中需要是唯一的，这就是为什么它总是停止/播放第一个视频，因为它是 DOM 处理的唯一视频。

最好的办法是附加 click 页面中所有视频的事件监听器，如下所示:

$("video").click(function() {
  if (this.paused)
    this.play();
  else
    this.pause();
});

演示:

$("video").click(function() {
  if (this.paused)
    this.play();
  else
    this.pause();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video width="240">
          <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>

<video width="240">
          <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>

<video width="240">
          <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>