3

我最近遇到了一个问题，当它们使用 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();
        });
    });

  }
 });
4

1 回答 1

2

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 播放器。

在暴露给 Plyr 实例的方法中有getEmbed()：

getEmbed() — 获取嵌入 API 以访问这些方法 - YouTube 或 Vimeo。

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

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

例子：

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

于 2018-02-01T15:48:27.010 回答