pause all html5 videos when play specific video jquery

3575 views javascript
5

I have 10 html5 videos in the same page,

PROBLEM

when I click in different videos, they play at the same time...

  <div><video class="SetVideo"></video><button class="videoP"></button></div>
      <div><video class="SetVideo"></video><button class="videoP"></button></div>
  <div><video class="SetVideo"></video><button class="videoP"></button></div>
  <div><video class="SetVideo"></video><button class="videoP"></button></div>
  <div><video class="SetVideo"></video><button class="videoP"></button></div>
  <div><video class="SetVideo"></video><button class="videoP"></button></div>
  <div><video class="SetVideo"></video><button class="videoP"></button></div>

How do I pause all the videos once I click play in an specific video?

I have this so far, but nothing

  $(".videoP").on("click",function(){ 


   $(document).find("video").pause();
$(this).closest("div").find(".SetVideo").play();
 });

But it doesn work

answered question

You need to supply more details, how you have embedded the video?

1 Answer

13

How about something like this:

$(".videoP").on("click",function(vid){
    $('.SetVideo').pause();                       // Matches all videos with class videoP
    $(vid).parent().find('.SetVideo').play();   // Should match the video corresponding to the clicked button
});

posted this

Have an answer?

JD

Please login first before posting an answer.