plyr / video not autoplaying when 2 vimeo videos on the same page

user_1005335 0
Viewed 3340

I have had a problem recently where I cannot autoplay / play two videos from vimeo when they are on the same page using Plyr, although they work for the youtube videos.

Here is a snippet 

jQuery(document).ready(function($) {
var $videoComponent = $('.jsVideoComponent');

if ($videoComponent.length) {

    $videoComponent.each(function(index) {
        var $thisComponent = $(this);
  console.log($thisComponent);
        var $thisVideo = $thisComponent.find('.jsVideo');

        // control video
        var video = plyr.setup($thisComponent.find('.jsVideo').get());

        var $button = $thisComponent.find('.jsVideoBtn');
        $button.on('click', function() {
    console.log($thisComponent);
            $thisComponent.find('.plyr').show();
            video[0].toggleFullscreen();
            video[0].play();
        });

        video[0].on('exitfullscreen', function() {
            $thisComponent.find('.plyr').hide();
            video[0].stop();
        });
    });

  }
 });
plyr.js plyr video jquery javascript
1 Answers

Vimeo video player

By default, when another video is played in the same browser, Vimeo player will automatically pause.

To enable the autopause behavior of Vimeo player use vimeo setAutopause():

player.setAutopause(false).then(function(autopause) {
    // autopause was turned off
}).catch(function(error) {
    switch (error.name) {
        case 'UnsupportedError':
            // Autopause is not supported with the current player or browser
            break;

        default:
            // some other error occurred
            break;
    }
});

Usage with Plyr

As in Plyr documentation there is no trace of "autopause" option I think the only way is to access the Vimeo player embedded.

Among methods exposed to Plyr instance there is getEmbed():

getEmbed() — Get the embed API to access those methods - either YouTube or Vimeo.

So when Plyr instance is ready get the embedded player and apply setAutopause(false):

plyr_instance.on('ready', function(event) {
    var player = plyr_instance.getEmbed();
    player.setAutopause(false)
});

Example:

here is a jsfiddle showing my approach: https://jsfiddle.net/beaver71/01f0umdz/

user_44322080
Related