如何在不丢失当前状态的情况下使用jquery显示/隐藏youtube视频? [英] how do I show/hide a youtube video using jquery without losing current state?

问题描述

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

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.

从列表视图中选择视频后，我首先查看它是否存在于DOM中.如果是这样，我只需将其移至视频视图即可.如果没有，我创建一个新的DIV并将视频加载到其中.将视频移到视频视图后，我将视频视图滑入到位.回到列表视图时，我将视频移到一个隐藏的"helper" div中，以便将其保留在DOM中.

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.

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

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.

这是一个简化的jsfiddle测试:

Here's a simplified jsfiddle test:

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

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

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.

推荐答案

尝试更改视频的可见性:

Try changing the video's visibility:

visiblity: hidden

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

如果尚未加载该项目，则可以将该项目附加到视频视图"侧，然后更改其可见性，最好使用css类.

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.

您可以将其与YouTube API结合使用，并使用javascript停止/启动视频:

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

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

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

You'll probably have to switch from an iframe to an embed tag

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

Also, the SWFObject javascript library is always good when working with Flash

这篇关于如何在不丢失当前状态的情况下使用jquery显示/隐藏youtube视频?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！