Остановить воспроизведение текущего видео, когда пользователь воспроизводит другое видео?

Question

У меня есть боковая панель, которая содержит несколько видео, теперь пользователь может воспроизводить и приостанавливать любое видео, которое он хочет, но когда воспроизводится определенное видео и пользователь воспроизводит другое видео, оба видео воспроизводятся,

Теперь я хочу, чтобы при воспроизведении одного видео и при воспроизведении другого видео пользователь остановил воспроизведение текущего видео.

Вот живое демо: Живое демо

Вот функция воспроизведения паузы видео

 $(".playpause").on('click', function(){

                    var videotag = $(this).parent().find("video")[0];
                    if(videotag.paused==true) {
                            $(this).parent().find("video")[0].play();
                            $(this).css("opacity", 0)
                            $(videotag).on('ended',function(){
                                    $('.playpause').css("opacity", 1);
                            });


                    } else if(videotag.paused==false) {
                            $(this).parent().find("video")[0].pause();
                            $(this).css("opacity", 1)
                            $('.playpause').show();
                    }

            });

Что мне нужно изменить, чтобы это работало?

Answer 1

Когда начинается воспроизведение видео, вы можете выбрать все другие видео и вызвать метод pause() для них.Также обратите внимание, что вы можете привести в порядок свою логику, кэшируя селекторы и определяя событие ended один раз.else if также является избыточным, поскольку paused имеет только два состояния.Попробуйте это:

var $allVideos = $('video').on('ended', function() {
  $('.playpause').css("opacity", 1);
});
var $allPlayPause = $('.playpause');

$allPlayPause.on('click', function() {
  var $playpause = $(this),
    video = $playpause.parent().find("video")[0];

  if (video.paused) {
    video.play();
    $allPlayPause.css('opacity', 1');
    $playpause.css("opacity", 0)

    // pause all but this:
    $allVideos.not(video).each(function(i, vid) {
      vid.pause();
    });
  } else {
    video.pause();
    $playpause.css("opacity", 1)
    $('.playpause').show();
  }
});

Answer 2

Вы можете приостановить все видео, а затем запустить то, на которое нажали:

$(".playpause").on('click', function() {

  // PAUSE EVERY SINGLE VIDEO IN .sidebar
  $('.sidebar video').each( function(index, element) {
    $(element).parent().find("video")[0].pause();
  });

  // PLAY THE VIDEO WHICH WAS CLICKED
  $(this).parent().find("video")[0].play();

});