Pause/stop videos into tabs when I clicked on a tab

Question

I have a tabs menu (three tabs) with a html-video into each tab (three videos).

My problem is when one video is playing, changing tab I can play another video but the first continues playing.

When I click on a tab I need to stop or pause the videos from the other tabs (if are playing)

This is the tabbed menu code:

<ul class="tabs-menu">
   <li class="current"><a href="#tab-1">Video1</a></li>
   <li><a href="#tab-2">Video2</a></li>
   <li><a href="#tab-3">Video3</a></li>
</ul>

And the tabs:

<div class="tab">
   <div id="tab-1" class="tab-content">
      <div class="video">  
        <video id="video01" width="640" height="480" controls>
          <source src="video1.mp4" type="video/mp4">
        </video>
      </div>

   <div id="tab-2" class="tab-content">
       <div class="video">  
        <video id="video02" width="640" height="480" controls>
          <source src="video2.mp4" type="video/mp4">
        </video>
      </div>
    </div>
    <div id="tab-3" class="tab-content">
       <div class="video">  
        <video id="video03" width="640" height="480" controls>
          <source src="video2.mp4" type="video/mp4">
        </video>
      </div>
    </div>

Any suggestions? Thanks in advance ;-)

Answer 1

When a tab is clicked, you pause all 3 videos for all tabs , and then start the video belonging to the actual tab. Something similar to this:

//set click event handler to whenever a tab is clicked
$('.tab-content').on('click' , function(){
    //stop all video on page
    $.each( $('.video'), function( key, value ) {
        $(this)[0].pause();
    });

    //start the video belonging to the tab that was clicked.
    $(this).find('video')[0].play();
});

Answer 2

This is the code for "a links" in tabs (javascript):

     $(document).ready(function() {
     $(".tabs-menu a").click(function(event) {
        document.querySelector('#myvideo').pause();
        event.preventDefault();
        $(this).parent().addClass("current");
        $(this).parent().siblings().removeClass("current");
        var tab = $(this).attr("href");
        $(".tab-content").not(tab).css("display", "none");
        $(tab).fadeIn();
      });
     });

Here I introduced a line to pause the first video (#myvideo) when I click to another tab. Can I use several IDs?

Answer 3

I was facing the same problem within pageable container section's. I was using the Flowplayer video plugin within each section. I could solve the issue with following code:

/* video player in carousel to pause on click on next carousel item */
jQuery("ul.vc_pagination li.vc_pagination-item").not('.vc_active').find('a').click(function() {
    var vid_id = jQuery('.vc_tta-panels .vc_tta-panel.vc_active .flowplayer-video').attr('id');
    flowplayer('#' + vid_id + '').pause();
});