воспроизведение / пауза нескольких видео при нажатии jQuery

Question

У меня будет sh для воспроизведения 3 видео на клике. Я использовал следующее решение воспроизведение / пауза видео при нажатии , которое работает только для одного видео за раз.

Работает отлично:

$('#play-pause-button').click(function () {
      var mediaVideo = $("#video-background-first-video").get(0);
      if (mediaVideo.paused) {
          mediaVideo.play();
      } else {
          mediaVideo.pause();
     }
   });

Не работа:

$('#play-pause-button').click(function () {
    var mediaVideo = $("#video-background-first-video", "#video-background-second-video", "#video-background-third-video").get(0);
    if (mediaVideo.paused) {
        mediaVideo.play();
    } else {
        mediaVideo.pause();
   }
 });

html

<button id="play-pause-button">play</button> 
<video id="video-background-first-video"  loop >
     <source src="/assets/video/video-1.mp4" type="video/mp4">
 </video>
 <video id="video-background-second-video"   loop >
     <source src="/assets/video/video-2.mp4" type="video/mp4">
 </video>
 <video id="video-background-third-video"   loop>
     <source src="/assets/video/video-3.mp4" type="video/mp4">
 </video>

Answer 1

Во-первых,

$("#video-background-first-video", "#video-background-second-video", "#video-background-third-video")

должно быть

$("#video-background-first-video, #video-background-second-video, #video-background-third-video")

Обратите внимание, что это одна строка с идентификаторами, разделенными запятыми, а не 3 строки

Далее, .get(0) получит только первую запись, вам нужно l oop через них, чтобы использовать .paused et c. Один из методов:

$('#play-pause-button').click(function () {
    var mediaVideos = $("#video-background-first-video, #video-background-second-video, #video-background-third-video");
    mediaVideos.each(function() {
        var mediaVideo = this;

        if (mediaVideo.paused) {
            mediaVideo.play();
        } else {
            mediaVideo.pause();
       }
    });  
 });

Примечание: каждый из них будет переключаться отдельно (например, если 1 играет, он остановится, а остальные запустятся). Возможно, вы захотите определить, должны ли они быть воспроизведены / приостановлены до l oop.

Answer 2

Попробуйте это:

$('#play-pause-button').click(function() {
  var mediaVideo = $("#video-background-first-video, #video-background-second-video, #video-background-third-video");
  mediaVideo.each(function (k, v) {
    if (v.paused) {
      v.play();
    } else {
      v.pause();
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="play-pause-button">play</button>
<video id="video-background-first-video" loop>
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
<video id="video-background-second-video" loop>
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
<video id="video-background-third-video" loop>
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>

Причина, по которой он не работает, заключается в том, что вы выбираете массив элементов, а затем берете первый элемент для воспроизведения и паузы.

То, как работает приведенный выше ответ, состоит в том, что он принимает массив элементов, а затем для каждого элемента приостанавливает / воспроизводит видео.