如何單獨暫停/播放 html5 視頻

Question

我有一個包含視頻列表的頁面。 我想為它們中的每一個添加一個暫停/播放按鈕，以便可以單獨控制它們。

不過，我似乎無法讓它工作。 每個視頻都有這個標記：

<div class="media-container">
  <button class="pause-play" type="button">Pause/play</button>
  <div class="video">
    <video playsinline loop muted autoplay>
      <source src="https://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
    </video>
  </div>
</div>

這是我嘗試過的：

onload = e => {
  const containers = Array.prototype.slice.apply(document.querySelectorAll('.media-container'));
  containers.forEach(container => {
    const video = container.querySelector('video');
    const playButton = container.querySelector('.pause-play');
    playButton.addEventListener('click', e => {
      //Pause this individual video...? video.pause();
    })
  })
}

我得到的錯誤是： Uncaught TypeError: Cannot read property 'addEventListener' of null

JsFiddle在這里

jQuery 也是一個選項...

Answer 1

正如您所說，我想添加，我猜.pause-play按鈕不在頁面中（或者它在頁面中但不在.media-container內部），而不是獲取對現有元素的引用：

const playButton = container.querySelector('.pause-play');

您應該創建一個：

const playButton = document.createElement('BUTTON');
playButton.className = 'pause-play';
playButton.addEventListener('click', () => { ... });
container.appendChild(playButton);