如何使用 jquery 显示/隐藏 youtube 视频而不丢失当前状态？
我正在构建一个 jquery ajax 页面，显示 YouTube 视频列表。我在页面上有两个视图（列表和视频），它们构建为 LI 元素，向左浮动，位于 UL 元素内。我这样构建它是因为视图之间的过渡是使用水平滑动效果完成的，并且我发现使用列表允许页面在视图高度不同时正确垂直调整大小。
当从列表视图中选择视频时，我首先查看它是否存在于 DOM 中。如果是这样，我只需将其移动到视频视图即可。如果没有，我会创建一个新的 DIV 并将视频加载到其中。将视频移动到视频视图后，我将视频视图滑动到位。当转换回列表视图时，我将视频移动到隐藏的“helper”div 中，这样我就可以将其保留在 DOM 中。
我遇到的问题是，每当我将 YouTube 播放器移至/移出视频视图时，YouTube 播放器都会重置。因此，即使视频已完全加载（和/或部分播放），在移动视频后，播放器也会重置回 0 并且必须完全重新加载。我正在使用appendTo()来移动它。
这是一个简化的 jsfiddle 测试：
你会看到在我的测试代码中，我可以显示/隐藏玩家并保持状态。但是，当我使用 .appendTo() 将视频 DIV 移动到辅助 DIV 中时，我会丢失播放器的状态。我设置了 3 个测试...您可以通过更改whichTest 全局变量来更改测试。
I'm building a jquery ajax page that shows a list of youtube videos. I've got two views on the page (list & video), which are built as LI elements, floated left, inside a UL element. I built it this way because the transition between the views is done using a horizontal slide effect and I found that using the list allows the page to vertically resize correctly when the height of the views are different.
When a video is selected from the list view, I first see if it exists inside the DOM. If it does, I simply move it to the video view. If not, I create a new DIV and load the video into it. Once the video is moved into the video view, I slide the video view into place. When transitioning back to the list view, I move the video into a hidden "helper" div so I can keep it in the DOM.
The problem I'm having is that the youtube player gets reset whenever I move it to/from the video view. So even if a video has been completely loaded (and/or partially played), after moving it, the player resets back to 0 and has to completely reload. I'm using appendTo() to move it around.
Here's a simplified jsfiddle test:
You'll see in my test code that I can show/hide a player and keep the state. But when I use .appendTo() to move the video DIV into a helper DIV, I lose the state of the player. I setup 3 tests... you can change the test by changing the whichTest global variable.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
尝试更改视频的可见性：
http://jsfiddle.net/UPhek/4/
您可以附加此内容如果尚未加载，则将项目添加到“视频视图”一侧，然后更改其可见性，最好使用 css 类。
您可以将其与 YouTube API 结合使用，并使用 javascript 停止/启动视频：
http:// /code.google.com/apis/youtube/js_api_reference.html
您可能需要从
iframe切换到embed标记此外，<一个href="http://code.google.com/p/swfobject/" rel="nofollow">SWFObject javascript 库在使用 Flash 时总是很好用
Try changing the video's visibility:
http://jsfiddle.net/UPhek/4/
Tou can append this item to the "video view" side, if it hasn't been loaded already, and then change it's visiblity, preferably with a css class.
You could use this in conjunction with the YouTube API and stop/start videos with javascript:
http://code.google.com/apis/youtube/js_api_reference.html
You'll probably have to switch from an
iframeto anembedtagAlso, the SWFObject javascript library is always good when working with Flash
追加元素与移动元素不同。我还没有深入研究这个答案的 jQuery 源代码，但我很确定当您获取一个元素并将其附加到其他位置时会发生什么，它只是复制原始节点，销毁它，然后将副本插入新位置。这会破坏视频的状态。
亨特有您正在寻找的答案。通过隐藏视频并使用 youtube api 来阻止它，您就可以有效地实现您的目标。
Appending an element isn't the same as moving it. I haven't dove into the jQuery source for this answer but I'm pretty sure that what happens when you take an element and append it somewhere else, it's merely copying the original node, destroying it, then inserting the copy into the new location. This will destroy the state of your video.
Hunter has the answer you're looking for. By hiding the video and using the youtube api to stop it, you're effectively accomplishing your goal.