具有多個視頻的播放/暫停功能

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處理的唯一video 。

最好的方法是將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>