带有图像和视频的 fancybox 2 画廊的幻灯片，但等待视频完成答案

【问题标题】：slideshow of fancybox 2 gallery with images and videos but wait for video to finish带有图像和视频的 fancybox 2 画廊的幻灯片，但等待视频完成
【发布时间】：2014-04-07 04:16:07
【问题描述】：

我有一个包含图像和视频的 fancybox2 (v2.1.5) 库。我想将画廊显示为幻灯片（自动播放：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 可以实现这种行为吗？

【问题讨论】：

标签： jquery video fancybox fancybox-2 autoplay

【解决方案1】：

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

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

然后，您需要将整个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 视频完成了吗？这样我们就可以继续播放幻灯片了
如果访问者在观看视频时手动推进画廊怎么办？未检测到视频结尾，幻灯片可能无法继续播放

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

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

【讨论】：