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

我建议先选择所有视频。然后我会向数组中的每个视频对象添加事件侦听器，如下所示：

const videos = document.querySelectorAll('videos')

function playVideo() {
  this.play();
}

videos.forEach( video => video.addEventListener('click',playVideo));

Answer 2

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

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

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

<强>演示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

具有多个视频的播放/暂停功能

2 个答案: