如何单独暂停/播放 html5 视频答案

【问题标题】：How to pause/play html5 videos individually如何单独暂停/播放 html5 视频
【发布时间】：2020-05-14 10:44:25
【问题描述】：

我有一个包含视频列表的页面。我想为它们每个添加一个暂停/播放按钮，以便可以单独控制它们。

不过，我似乎无法让它工作。每个视频都有这个标记：

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

jQuery 也是一个选项...

【问题讨论】：

标签： javascript jquery html5-video

【解决方案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);

【讨论】：