Как показать / скрыть видео YouTube, используя JQuery без потери текущего состояния? - PullRequest
Новая
       4

Как показать / скрыть видео YouTube, используя JQuery без потери текущего состояния?

2 голосов
/ 17 октября 2011

Я создаю JQuery AJAX страницу, которая показывает список видео YouTube.У меня есть два представления на странице (список и видео), которые построены как элементы LI, плавающие влево, внутри элемента UL.Я построил его таким образом, потому что переход между видами выполняется с использованием эффекта горизонтального скольжения, и я обнаружил, что использование списка позволяет корректно изменять размер страницы по вертикали, когда высота просмотров различается.

Когда видеовыбирается из списка, сначала я вижу, существует ли он внутри DOM.Если это так, я просто переместить его в просмотр видео.Если нет, я создаю новый DIV и загружаю в него видео.Как только видео перемещено в просмотр видео, я сдвигаю его на место.При переходе обратно к представлению списка, я перемещаю видео в скрытый «вспомогательный» div, чтобы сохранить его в DOM.

Проблема, с которой я столкнулся, заключается в том, что проигрыватель youtube получает сброс при каждом перемещенииэто к / от просмотра видео.Таким образом, даже если видео полностью загружено (и / или частично воспроизведено), после его перемещения проигрыватель возвращается к 0 и должен полностью перезагрузиться.Я использую appendTo () для его перемещения.

Вот упрощенный тест jsfiddle:

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

В моем тестовом коде вы увидите, что я могупоказать / скрыть игрока и сохранить состояние.Но когда я использую .appendTo (), чтобы переместить видео DIV в вспомогательный DIV, я теряю состояние проигрывателя.Я настроил 3 теста ... вы можете изменить тест, изменив глобальную переменную whichTest.

Ответы [ 2 ]

3 голосов
/ 17 октября 2011

Попробуйте изменить видимость видео: 

visiblity: hidden

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

Вы можете добавить этот элемент в сторону «просмотра видео», если оно еще не загружено, изатем измените его видимость, желательно с помощью класса css.

Вы можете использовать это вместе с API YouTube и останавливать / запускать видео с помощью JavaScript:

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

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

Возможно, вам придется переключиться с iframe на тег embed

Кроме того, библиотека javascript SWFObject всегда хороша при работесо вспышкой

0 голосов
/ 17 октября 2011

Добавление элемента - это не то же самое, что перемещение этого. Я не изучал исходный код jQuery для этого ответа, но я почти уверен, что то, что происходит, когда вы берете элемент и добавляете его куда-то еще, это просто копирует исходный узел, уничтожает его, а затем вставляет копию в новое место , Это разрушит состояние вашего видео.

У Охотника есть ответ, который вы ищете. Скрывая видео и используя API YouTube, чтобы остановить его, вы эффективно достигаете своей цели.

...