CODEWITHSUNDEEP
jqueryvideo
Adam
Adam

Reputation: 3128

How can I pause all playing VideoJS instances on page when one is started?

I came up with this solution now:

    var myPlayer1 = _V_("ID1");
    var myPlayer2 = _V_("ID2");
    ...
    ...

    var myFunc1 = function(){
        var myPlayer1 = this;

        myPlayer2.pause();
        myPlayer3.pause();
        myPlayer4.pause();
        ...
    };
    myPlayer1.on("play", myFunc1);

    var myFunc2 = function(){
        var myPlayer2 = this;

        myPlayer1.pause();
        myPlayer3.pause();
        myPlayer4.pause();
        ...
    };
    myPlayer2.on("play", myFunc2);

    ...

Any other sane way to do it?

Thanks.

Upvotes: 2

Views: 8712

Answers (4)

Scopestyle
Scopestyle

Reputation: 665

This is a working solution to pause all other videojs instances on the page, when play is clicked.

$(".video-js").each(function (videoIndex) {
    var videoId = $(this).attr("id");
    videojs(videoId).ready(function(){
        this.on("play", function(e) {
            $(".video-js").each(function (index) {
                if (videoIndex !== index) {
                    this.player.pause();
                }
            });
        });
    });
});

Solution found here.

Upvotes: 0

goksel
goksel

Reputation: 4560

I use this for new Videojs v5

$('.video-js').each(function () {
  videojs(this.id).ready(function () {
    myPlayer = this;
    myPlayer.play();
  });
});

Upvotes: 0

Stepan Suvorov
Stepan Suvorov

Reputation: 26146

the same on pure JS:

var medias = Array.prototype.slice.apply(document.querySelectorAll('audio,video'));
medias.forEach(function(media) {
  media.addEventListener('play', function(event) {
    medias.forEach(function(media) {
      if(event.target != media) media.pause();
    });
  });
});

Upvotes: 4

rk1
rk1

Reputation: 1058

You can try this solution, assuming you use jQuery.

You might try to avoid pausing videos that are not currently playing. This can be done by adding another check in the loop - here all videos on the page are being paused whenever another one starts playing.

Also, there might be a better way to avoid the video ids ( ike $(this).player or something similar), but this does the job.

 $(".video-js").each(function (videoIndex) {
    var videoId = $(this).attr("id");

    _V_(videoId).ready(function(){
        this.on("play", function(e) {
            //pause other video
            $(".video-js").each(function (index) {
                if (videoIndex !== index) {
                    this.player.pause();
                }
            });
        });

    });
});

Upvotes: 2

Related Questions