暂停所有其他视频，无论页面上有多少视频

Question

因此，我在一个多页项目中使用 video.js，该项目的每个页面上都有不同数量的视频。我想播放一个视频以暂停页面上播放的任何其他视频。我已经让它工作了，但我的代码只有在专门为页面制作时才能工作，而不是在每个页面上单独工作。

HTML（例子）

<video id="video5" poster="poster.png" class="video-js vjs-16-9 vjs-big-play-centered"
  data-setup='{
    "controls": true,
    "autoplay": false,
    "preload": "none"
  }'>
  <source src="video.mp4" type='video/mp4'>
</video>

JS

var player1 = videojs('video1');
var player2 = videojs('video2');
var player3 = videojs('video3');
var player4 = videojs('video4');
var player5 = videojs('video5');
var player6 = videojs('video6');

var players = [player1, player2, player3, player4, player5, player6];

players.forEach(function(player) {
  player.on('play', function() {
    console.log('test');
    players.forEach(function(pl) {
      if (pl !== player) {
        pl.pause();
      }
    })
  })
});

因此，如果我有 6 个 ID 一致的视频，这就可以正常工作。但是，如果我有更多或更少，它就会破裂。有没有一种方法可以将 JS 格式化为仅通过 class 而不是通过 id 暂停任何内容？我试过 ('.video-js').pause() 但这会引发错误。

Answer 1

您可以通过 class 名称而不是 ID select 这些元素。像这样：

var videos = document.getElementsByClassName('video-js');
for (var i = 0; i < videos.length; i++) {
    videos[i].pause();
}

Answer 2

如果您正在使用 jquery 那么。

$('video').each((videoIndex, video) => {
    console.log('video paused', video);
    video.pause();
})

Answer 3

NM，找到答案了。留下这个，以便可能更容易为人们找到。

var medias = Array.prototype.slice.apply(document.querySelectorAll('audio,video'));
medias.forEach(function(media) {
  media.addEventListener('play', function(event) {
    medias.forEach(function(media) {
      if(event.target != media) media.pause();
    });
  });
});

暂停所有其他视频，无论页面上有多少视频

Pausing all other videos, regardless of how many videos are on a page

javascript

jquery

video.js