为什么嵌入式vimeo视频会在jquery循环插件中消失，如果它已经开始播放的话？

Question

我正在尝试使用jquery循环插件在幻灯片中显示许多嵌入式Vimeo视频，用户可以手动浏览。这一切都适用于所有桌面浏览器，但出于某种原因在ipad上如果你已经开始播放视频，当你离开时它会从幻灯片中消失。您可以在http://jsfiddle.net/deshg/gPfg7/查看此示例。尝试点击上一个/下一个几次然后点击播放任何视频，它可以在桌面和iPad上正常工作。现在重新加载并单击第一个视频上的播放，然后单击下一个然后单击上一个，以便返回第一张幻灯片。这适用于桌面，但在ipad上，视频已消失，但音频仍在播放。

我在YouTube上尝试了类似的事情，看看它是否是iframe /视频问题，这也行不通但是幻灯片变成空白似乎只显示没有内容或控件的黑色YouTube播放器（但是音频仍在播放）：http://jsfiddle.net/deshg/gPfg7/2/。我不能为我的生活看到为什么会发生这种情况或在其他地方找到任何参考，如果有人能够阐明为什么会发生这种情况，那将非常感激。

非常感谢，

戴夫

Answer 1

这是一种“非答案”的答案：让Vimeo视频与JavaScript / jQuery显示/隐藏一起使用是一种巨大的痛苦。不要介意让事件与他们的JavaScript API一起使用。

RANT 他们的文档需要批次。有时他们自己的例子不起作用，如果他们甚至提供。在与JavaScript交互方面，YouTube比Vimeo领先一步，并且表现更加可靠。 END RANT

我不知道您的目标浏览器是什么，但也知道使用JavaScript显示/隐藏Vimeo视频会导致不同浏览器出现一些奇怪的行为。

我发现我需要做的就是做一些事情：

• 如果IE是一个问题，遗憾的是，您将不得不使用Flash嵌入方法。对不起iOS。使用JavaScript显示/隐藏HTML5嵌入的视频将导致随机视频加载黑盒，而不是“关键帧”。这真的是一种或另一种情况 - 所以选择对你更重要的是：IE或iOS。听起来你将不得不忍受IE用户看到随机黑盒子。
• 如果您依靠Vimeo JavaScript API来响应某些事件，那么显示/隐藏它们对于让它跨浏览器工作也有点奇怪。我自己尝试了Cycle插件，但它杀死了某些其他事件（例如当用户切换到另一张幻灯片时暂停播放视频）。我最后要做的是将一个类附加到其中包含视频的“活动”容器中。然后我设置CSS使<object>绝对定位在-4000px（即离开页面）。当容器变为“活动”时，<object>变为position:static以将其带回页面。因此，从技术上讲，视频永远不会从DOM中删除，只是重新定位。

这两颗子弹总结了我在使用Vimeo视频时经历的数小时的痛苦。 （YouTube很快，但客户坚持Vimeo）有许多“WTF”和facepalm时刻。我希望我能为你节省一点时间。

Answer 2

为了让你不要疯狂地尝试测试你的代码，Youtube已经触摸过去24小时，至少在iMac上。这可能与您的问题有关，也可能没有，但我不会使用Youtube对其进行一段时间的测试。