Question

我有一个包含图片和视频的fancybox2（v2.1.5）图库。我想将图库显示为幻灯片（autoPlay：true），但是当playSpeed启动时视频会被中断（例如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

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

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

youtube's player API
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事件：

是内容视频还是图片？ if video：暂停幻灯片放映。
什么是fancybox幻灯片状态：暂停还是活动？
是youtube视频完成了吗？所以我们可以恢复幻灯片
如果访客在观看视频时手动推进图库，该怎么办？未检测到视频结尾，幻灯片显示可能无法恢复

Follow是完整的文档代码（没有gallery元素使其更短）。

查看工作 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来处理视频更改事件。

fancybox 2图库和视频的幻灯片，但等待视频完成

1 个答案: