3

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();
        });
    });

  }
 });
beaver
  • 17,333
  • 2
  • 40
  • 66
Kiwimoisi
  • 4,086
  • 6
  • 33
  • 64
  • use flash might solve this, browser go queer when two or more video play at the same time, maybe decode costs alot, I'm not sure – Josh Lin Feb 01 '18 at 04:25
  • @Kiwimoisi: pay attention plyr tag here on SO refer to https://github.com/hadley/plyr and not to https://github.com/sampotts/plyr – beaver Feb 01 '18 at 15:51

1 Answers1

2

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/

beaver
  • 17,333
  • 2
  • 40
  • 66
  • Beaver thank you for your approach, that does make a lot of sense. I will therefore accept this answer. Also, I do have another issue regarding multi videos on the same page using Plyr ? Maybe you could be helpful too ? https://stackoverflow.com/questions/48534684/plyr-video-plugin-multiple-instances – Kiwimoisi Feb 01 '18 at 22:17
  • I've seen your new question, but I have no ipad to try on, sorry – beaver Feb 02 '18 at 06:38