Question

我正在尝试将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>嵌入系统正在发生一些事情。

谢谢，丹

Answer 1

一些想法..

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

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

一般情况下，尝试确定可以引发哪些事件以及它们是否/何时指示插件“停止”动画。

Answer 2

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

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

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

同样，在我的情况下，如果视频播放完毕，或者用户想继续播放，我会使用“播放”按钮来保持幻灯片播放。

带有Vimeo视频的jQuery Cycle Plugin幻灯片

2 个答案: