play/pause multiple videos on click jQuery

Question

I wish to have 3 videos playing onClick. I have used the following solution play/pause of video on click which works for only a single video at a time.

Works perfectly:

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

Does not work:

$('#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>

score 3 · Accepted Answer · answered Jan 22 '20 at 13:00

First,

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

needs to be

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

note that it's a single string with comma-separated IDs, not 3 strings

Next, .get(0) will get the first entry only, you need to loop through them to use .paused etc. One method is:

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

Note: This will toggle each of them individually (eg if 1 is playing, it will stop and the others will start). You might like to determine if they should be played/paused before the loop.

user12711697 · Answer 2 · 2020-01-22T13:02:38.987

Try this:

$('#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>

The reason it isn't working is because you select an array of items and then take the first item to play and pause.

The way the above answer works is that it takes the array of items and then for each item it will pause/play the video.

@freedomn-m Don't worry, I am aware of this. I accidentally clicked the 'send answer' button instead of the 'run code snippet' one (they are both blue :) ). I have since edited my answer. — user12711697, Jan 22 '20 at 13:04

play/pause multiple videos on click jQuery

2 Answers2