javascript - 当同一页面上有 2 个 vimeo 视频时，plyr/video 不自动播放

Question

我最近遇到了一个问题，我无法使用 Plyr 在同一页面上自动播放/播放来自 vimeo 的两个视频，尽管它们适用于 youtube 视频。

这是一个片段

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

  }
 });

Answer 1

Vimeo 视频播放器

默认情况下，当在同一浏览器中播放另一个视频时，Vimeo 播放器会自动暂停。

要启用 Vimeo 播放器的自动暂停行为，请使用 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;
    }
});

使用 Plyr

在 Plyr 文档中没有“自动暂停”选项的痕迹，我认为唯一的方法是访问嵌入的 Vimeo 播放器。

其中methods exposed to Plyr instance有 getEmbed():

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

因此，当 Plyr 实例准备就绪时，获取嵌入式播放器并应用 setAutopause(false):

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

示例:

这是一个展示我的方法的 jsfiddle:https://jsfiddle.net/beaver71/01f0umdz/