Question

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

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

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

这是一个简化的jsfiddle测试：

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

Answer 1

尝试更改视频的可见性：

visiblity: hidden

Tou可以将此项附加到“视频视图”一侧（如果尚未加载），然后更改它的可见性，最好使用css类。

您可以将此功能与YouTube API结合使用，并使用javascript停止/启动视频：

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

您可能需要从iframe切换为embed代码

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

Answer 2

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

Hunter有你想要的答案。通过隐藏视频并使用youtube api来阻止它，您就可以有效地实现目标。