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，使其仅按类而不是按id暂停任何内容？我尝试过('.video-js').pause()，但这会引发错误。

Answer 1

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

Answer 2

您可以通过类名而不是ID选择这些元素。像这样：

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

Answer 3

如果您正在使用jquery，那么。

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

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

3 个答案: