如何在不丢失当前状态的情况下使用 jquery 显示/隐藏 youtube 视频？

Question

我正在构建一个显示 youtube 视频列表的 jquery ajax 页面。我在页面上有两个视图（列表和视频），它们构建为 LI 元素，向左浮动，在 UL 元素内。我这样构建它是因为视图之间的过渡是使用水平滑动效果完成的，并且我发现使用列表允许页面在视图高度不同时正确垂直调整大小。

当从列表视图中选择视频时，我首先查看它是否存在于 DOM 中。如果是这样，我只需将其移至视频视图。如果没有，我创建一个新的 DIV 并将视频加载到其中。将视频移入视频视图后，我将视频视图滑动到位。转换回列表视图时，我将视频移动到隐藏的“帮助”div 中，以便将其保存在 DOM 中。

我遇到的问题是，每当我将 youtube 播放器移入/移出视频视图时，它都会被重置。因此，即使视频已完全加载（和/或部分播放），在移动它之后，播放器也会重置为 0 并且必须完全重新加载。我正在使用 appendTo() 来移动它。

这是一个简化的 jsfiddle 测试：

http://jsfiddle.net/UPhek/3/

您会在我的测试代码中看到我可以显示/隐藏播放器并保持状态。但是当我使用 .appendTo() 将视频 DIV 移动到辅助 DIV 时，我失去了播放器的状态。我设置了 3 个测试...您可以通过更改 whichTest 全局变量来更改测试。

Answer 1

尝试更改视频的可见性：

visiblity: hidden

http://jsfiddle.net/UPhek/4/

如果尚未加载，您可以将此项目附加到“视频视图”端，然后更改其可见性，最好使用 css 类。

---

您可以将它与 YouTube API 结合使用，并使用 javascript 停止/开始视频：

http://code.google.com/apis/youtube/js_api_reference.html

var video = document.getElementById('video');
video.pauseVideo();

您可能必须从 iframe 切换到 embed 标签

---

此外，SWFObject javascript 库在使用 Flash 时总是很好

Answer 2

追加元素与移动元素不同。我没有深入了解这个答案的 jQuery 源代码，但我很确定当你获取一个元素并将其附加到其他地方时会发生什么，它只是复制原始节点，销毁它，然后将副本插入新位置.这会破坏您视频的状态。

Hunter 有您正在寻找的答案。通过隐藏视频并使用 youtube api 停止它，您可以有效地实现目标。