onStateChange заменить элемент класса новым элементом YouTube без хрома - PullRequest
Новая
       4

onStateChange заменить элемент класса новым элементом YouTube без хрома

2 голосов
/ 27 ноября 2011

Вопрос в отношении : http://jsfiddle.net/yusaf/VVEY9/55/

Когда состояние видеопроигрывателя изменилось так, что onStateChange(0), т. Е. Видео закончилось, как мне скрыть элемент .pauseи добавьте кнопку воспроизведения, чтобы начать видео снова и после перезапуска показать элемент .pause 

<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/2Qj8PhxSnhg&amp;hl=en_US&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/2Qj8PhxSnhg&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>

<a class="play" href="#">play</a>
<a class="pause" href="#">pause</a>
<a class="replay" href="#">replay</a>



$(document).ready(function(){
 var obj = $('object')
     .wrap('<div id="test"></div>')
     .find('embed').attr('src', function(i,s){return s+'&enablejsapi=1&version=3'}).end()
     .find('param[name=movie]').attr('value', function(i,v){return v+'&enablejsapi=1&version=3'}).end()
     .detach()
     .appendTo($('#test'));
    $('.pause').hide();

 $('.play').click(function(){
  obj.find('embed')[0].playVideo();
  $(".pause").show();
  $(".play").hide();   
 });
 $('.pause').click(function(){
  obj.find('embed')[0].pauseVideo();
    $(".pause").hide();
  $(".play").show();
 })
});
$('.replay').click(function(){
  obj.find('embed')[0].playVideo();  
 });

1 Ответ

0 голосов
/ 03 октября 2012

Прежде всего, вам нужно будет использовать Youtube API либо iframe , либо flash .Зачем?просто потому, что ваш текущий код не является кроссбраузерным.А также есть множество методов и помощников, которые можно использовать.

Во-вторых, вы можете назначить функцию onPlayerStateChange, используя один из упомянутых API, который будет вызываться по окончании видео (в iframe api вы можете использоватьнекоторые предопределенные константы, такие как YT.PlayerState.ENDED

Проверьте демонстрацию на http://code.google.com/apis/ajax/playground/#polling_the_player

Код должен выглядеть примерно так: 

function onPlayerStateChange(evt) {
    if (evt.data == YT.PlayerState.ENDED) {
          // do your jQuery login to hide and blah blah here.
    }
}
...