CODEWITHSUNDEEP
jquerywordpressvideo.js
JakeParis
JakeParis

Reputation: 11210

pause other players when playing one

I have a page with multiple instances of <video> players using the video.js framework. I would like to pause any other playing instances when playing one of them. Or, to say it the other way, when playing one, I'd like all the others to pause.

As an aside: Unfortunately, I'm using this in a Wordpress environment where I don't know the id of the video.js element, since it is created dynamically. I also have access to jquery.

The html output ends up looking like: 

<video id="example_video_id_1984815762" class="video-js vjs-default-skin" width="350" height="198" poster="http://example.com/wp-content/uploads/2013/09/filename.jpg" controls preload="none" data-setup="{}">
    <source src="http://example.com/wp-content/uploads/2013/09/filename.mp4" type='video/mp4' />
</video>

and I've tried this, but to no avail: 

$('.filmWrapper a').click(function(){

    var vidId = $(this).find('video').attr('id');

    var myPlayer = videojs(vidId);

    myPlayer.on('play',function(){
    this.siblings().pause();
    });

    return false;

});

I'm pretty sure I'm

  1. doing this completely wrong, and
  2. mixing up my jquery and videojs stuff badly.

This should be a common usage. Can someone tell me how it is done?

Upvotes: 0

Views: 454

Answers (1)

zoranc
zoranc

Reputation: 2456

You can try getting all the ids based on their common class first and then assign events to each of them to control all the other ones

something along these lines( you may have to tweak this code a bit, but it will give you a rough guideline how to go about it):

var ids, length;
ids = new Array();
jQuery(".video-js").each(function() {
  ids.push(this.id);
});
length = ids.length;
for (var i = 0; i < length; i++) { // cycle through all the IDs
  var otherIDs = ids;
  videojs(ids[i]).on('play', function() { //the current ID
    otherIDs.splice(i, 1); //remove the current id from the otherIDs array
    for (var j = 0; j < length - 1; j++) { //cycle through the otherIDs array
       videojs(otherIDs[j]).pause(); 
    }
  });
});

Upvotes: 1

Related Questions