CODEWITHSUNDEEP
jqueryhtmlvideo
MrThunder
MrThunder

Reputation: 745

play/pause multiple videos on click jQuery

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>

Upvotes: 0

Views: 4085

Answers (2)

user12711697
user12711697

Reputation: 139

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.

Upvotes: 0

fdomn-m
fdomn-m

Reputation: 28611

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.

Upvotes: 3

Related Questions