如何play/pause，如果页面上有多个视频

Question

我在一个页面上有很多视频标签。我需要 play/pause 一个元素，如果它被点击，并暂停前一个元素，如果它正在播放。当我在页面加载后点击一个元素时，被点击的元素被播放但是当我第二次点击时，在同一个视频上，它没有暂停。

<video class='vsingle' src='01.mp4' poster='01.jpg' preload='none' controls></video>
<video class='vsingle' src='02.mp4' poster='02.jpg' preload='none' controls></video>
<video class='vsingle' src='03.mp4' poster='03.jpg' preload='none' controls></video>

$('.vsingle').on('click', function(){
    if($(this).hasClass('active')){
        $(this).trigger('pause').removeClass('active');
    }
    else{
        $('.active').trigger('pause').removeClass('active');
        $(this).trigger('play').addClass('active');
    }
});

Answer 1

jQuery 方法 .trigger() 处理标准事件。它不识别 Web API 独有的事件，例如 <video> 标签所属的 MediaElement 接口。所以事件 "pause" 和 "play" 不能用任何 jQuery 方法触发。此外，"pause"/"play" 事件由 .pause() 和 .play() 方法触发。要使用它们，它们需要在 <video> 标签的普通 JavaScript 对象后加上后缀。 jQuery $(objects) 不能使用简单的 JavaScript 方法，反之亦然。

$('video').on('click', function(e) {
  let vids = $.makeArray($(this).siblings('video'));

  vids.forEach(vid => {
    vid.pause();
    vid.classList.remove('active');
  });

  $(this).toggleClass('active');
  if ($(this).is('.active')) {
    this.play();
  } else {
    this.pause();
  }
});

video {
  height: 30vh;
  cursor: pointer;
}

.active {
  outline: 2px solid blue
}

<video src='https://glpjt.s3.amazonaws.com/so/av/vs34s3.mp4'></video>
<video src='https://glpjt.s3.amazonaws.com/so/av/vs34s3.mp4'></video>
<video src='https://glpjt.s3.amazonaws.com/so/av/vs34s3.mp4'></video>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如何play/pause，如果页面上有多个视频

how to play/pause, if there is multiple videos on a page

javascript

video

jquery