带有 Vimeo 视频的 jQuery Cycle 插件幻灯片答案

【问题标题】：jQuery Cycle Plugin slideshow with Vimeo videos带有 Vimeo 视频的 jQuery Cycle 插件幻灯片
【发布时间】：2011-08-27 09:11:28
【问题描述】：

我正在尝试将 Vimeo 视频合并到我的 jQuery Cycle 幻灯片中。

视频在幻灯片中效果很好，但是使用新的<iframe> 嵌入系统，当观众按视频播放时，我似乎无法让视频停止幻灯片。

我需要在移动设备上使用新的<iframe> 系统。

这是幻灯片的 jQuery：

jQuery('#imagegallery').cycle({
    fx: 'scrollHorz'
});

这是嵌入代码：

<iframe src="http://player.vimeo.com/video/23565246?title=0&amp;byline=0&amp;portrait=0" width="584" height="328" frameborder="0"></iframe>

幻灯片结构：

<div id="imagegallery>
<span><iframe src="http://player.vimeo.com/video/23565246?title=0&amp;byline=0&amp;portrait=0" width="584" height="328" frameborder="0"></iframe></span>
<span style="display:none;"><iframe src="http://player.vimeo.com/video/23565246?title=0&amp;byline=0&amp;portrait=0" width="584" height="328" frameborder="0"></iframe></span>
</div>

对此的任何想法将不胜感激！我在 jQuery 方面表现不错，我只是认为 <iframe> 嵌入系统正在发生一些事情。

谢谢，丹

【问题讨论】：

标签： jquery video slideshow cycle vimeo

【解决方案1】：

一些想法..

尝试使用循环插件的暂停选项，并确保查看此页面 [http://jquery.malsup.com/cycle/options.html] 以获取更多选项。

另一个想法，因为视频包含在 iframe 中，所以检查 iframe“引发”的事件（可能悬停）？并停止循环插件（请参阅选项页面中的停止选项）。

通常尝试确定可以引发哪些事件以及是否/何时指示插件“停止”动画。

【讨论】：

【解决方案2】：

我不久前也遇到过这个问题，所以我想我会发布我的答案......它与暂停选项一起使用。我找不到通过 iframe 捕获“播放”事件的方法，所以当用户将鼠标悬停在 iframe 上时，我只是暂停了视频。通过使用播放和暂停控件，至少用户能够看到幻灯片播放或暂停的时间。

我只是将.video 类附加到所有 iframe 元素

$('.video').mouseover(function() {
        $('.slideshow').cycle('pause');
    });

同样，在我的例子中，如果视频结束，或者用户想继续，我使用“播放”按钮来保持幻灯片播放。

【讨论】：