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

因此，我在一个多页面项目上使用 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 格式化为按类而不是按 id 暂停任何内容？我试过了('.video-js').pause()但这会引发错误。

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();
    });
  });
});