Как я могу приостановить все видео html5, кроме того, которое я выбрал для воспроизведения? - PullRequest
Новая
       22

Как я могу приостановить все видео html5, кроме того, которое я выбрал для воспроизведения?

0 голосов
/ 04 декабря 2018

У меня есть три HTML5-видео на одной странице, и я хочу приостановить / отключить все видео, кроме того, которое я выбрал.Кажется, это работает нормально, когда я нацеливаю свой родительский div на прослушиватель событий при щелчке, однако мне нужно, чтобы он работал и тогда, когда я нацеливался на элементы управления видео.

Однако, когда я начинаю тестировать прослушиватели событий на медиа-событиях html5такие как «пауза» или «играть».Я не могу слушать, как применить "video.play ()" к событиям без прерывания. 

var M = M || {};
var $allVideos = $('video');

M.playVideo = function($target) {
  var $video = $target.children('video');
  var $previewImage = $target.children('img.previewImage');
  
  $allVideos.map(function(index, element, something){
    element.pause();
    element.muted = true;
  });

  if($video[0].paused){
    $previewImage.css('display', 'none');
    $video[0].muted = false;
    $video[0].play();
  } else {
    $video[0].pause();
  }

}

$('.parallax-box').on('click', function (e) {
  e.preventDefault();
  M.playVideo($(this));
});

$('video').on('play', function(e) {
  //pause all videos initially
  $allVideos.map(function(index, element, something){
    element.pause();
  });
  //if the target video is paused, play it
  if($(this)[0].paused){
    $(this)[0].play(); // play() just keeps running breaking the browser
  }
}
<a id="video1" class="video-box" target="_blank" href="#" title="video">
  <video id="vid1" preload="metadata" loop controls>
    <source src="vid1.mp4"/>
	</video>
  <img class="previewImage" src="image1.jpg" />
</a>
<a id="video2" class="video-box" target="_blank" href="#" title="video">
  <video id="vid2" preload="metadata" loop controls>
    <source src="vid2.mp4"/>
	</video>
  <img class="previewImage" src="image2.jpg" />
</a>
<a id="video3" class="video-box" target="_blank" href="#" title="video">
  <video id="vid3" preload="metadata" loop controls>
    <source src="vid3.mp4"/>
	</video>
  <img class="previewImage" src="image3.jpg" />
</a>

1 Ответ

0 голосов
/ 04 декабря 2018

Вы можете исключить элемент, используя not()

var $allVideos = $('video');

$('video').on('play', function(e) {
  $allVideos.not(this).each(function() {
    this.pause()
  })
});
video {width: 300px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<video id="vid1" preload="metadata" loop controls>
  <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/1/18/Big_Buck_Bunny_Trailer_1080p.ogv/Big_Buck_Bunny_Trailer_1080p.ogv.160p.webm" />
</video>
<video id="vid2" preload="metadata" loop controls>
  <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/1/18/Big_Buck_Bunny_Trailer_1080p.ogv/Big_Buck_Bunny_Trailer_1080p.ogv.160p.webm" />
</video>
<video id="vid3" preload="metadata" loop controls>
  <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/1/18/Big_Buck_Bunny_Trailer_1080p.ogv/Big_Buck_Bunny_Trailer_1080p.ogv.160p.webm" />
</video>
...