jquery - fancybox 2 画廊的幻灯片，包含图像和视频，但等待视频完成

Question

我有一个 fancybox2 (v2.1.5) 图库，其中包含图像和视频。我想以幻灯片形式显示图库(autoPlay:true)，但是当播放速度加快(例如 playSpeed:3000)时，视频会被中断。我希望幻灯片等待视频完成播放，然后再继续播放下一个图像或视频，本质上是在视频持续时间内暂停幻灯片，无论 playSpeed 值如何。

这是我目前拥有的示例:

$(document).ready(function() {
  $.fancybox.open(
    [
      { href : 'https://www.google.com/images/srpr/logo11w.png', title : 'first image' },
      { href : 'http://www.youtube.com/embed/XYZ?autoplay=1', title : 'first video', type : 'iframe' }, 
      { href : 'https://some/other/image.png', title : 'second image' }
    ]
    ,
    { autoPlay : true, playSpeed : 3000 }
  );
});

我希望幻灯片能够按需要显示，无需用户交互(即无需单击按钮)。

Fancybox 2 可以实现这种行为吗？

Answer 1

解决方案比您想象的要复杂一些，但这是可能的。

首先，您需要在页面中加载更多资源:

1. youtube's player API
2. Fancybox media helper

然后，您需要将整个 fancybox 初始化代码(包括 .ready() 方法)封装在 onYouTubePlayerAPIReady() 函数中，如下所示:

function onYouTubePlayerAPIReady() {
    $(document).ready(function () { 
        $.fancybox.open([...],{
            // API options
        }); // fancybox
    }); // ready
};

上面的函数将允许您检测来自 YouTube 播放器的事件(例如视频的开始、暂停、结束等)

此外，您必须创建另一个函数来处理 youtube 事件(它将在 fancybox 回调中调用)

function onPlayerStateChange(event) {
    // callback for youtube events 
};

现在，有趣的是检测 fancybox 和 youtube 事件:

• 内容是视频还是图像？如果是视频:暂停幻灯片放映。
• fancybox 幻灯片状态是什么:暂停还是事件？
• youtube 视频完成了吗？这样我们就可以恢复幻灯片播放了
• 如果访问者在观看视频时手动前进图库会怎样？未检测到视频结尾，幻灯片可能无法恢复

以下是完整记录的代码(没有库元素以使其更短)。

看到它工作 JSFIDDLE

function onPlayerStateChange(event) {
    if (event.data === 0) {
        // video is finished
        $.fancybox.play(); // resume slide show
    }
}

function onYouTubePlayerAPIReady() {
    $(document).ready(function () {
        $.fancybox.open([....], {
            autoPlay: true,
            playSpeed: 3000,
            helpers: {
                media: {}
            },
            beforeLoad: function () {
                // the coming content is iframe (video)
                // and the slideshow is active/running
                if (this.type == "iframe" && $.fancybox.player.isActive) {
                    $.fancybox.play(); // pause slide show
                } else if (!$.fancybox.player.isActive) {
                    // the slideshow is paused
                    // most likely we advanced gallery using arrows
                    $.fancybox.play(); // resume slideshow
                };
            },
            beforeShow: function () {
                if (this.type == "iframe") {
                    // bind callback to youtube events
                    var id = $.fancybox.inner.find('iframe').attr('id');
                    var player = new YT.Player(id, {
                        events: {
                            onStateChange: onPlayerStateChange
                        }
                    });
                };
            },
            margin: [20, 60, 20, 60] // Increase left/right margin
        }); // fancybox
    }); // ready
} // youtube API ready

您将注意到JSFIDDLE中的一些CSS代码，这些代码使fancybox导航箭头在仅播放视频时移出fancybox(另请注意API选项margin。)这允许您访问 YouTube 的控件，否则该控件将被箭头阻止。

最后注释:

此解决方案仅适用于 YouTube 视频。对于其他类型的视频，您可能需要实现自己的 API 来处理视频更改事件。