onStateChange與新元素的YouTube無控件替換類元素參考

Question

問題：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(); 
}); 

Answer 1

首先，您需要使用YouTube API要麼iframe或flash。爲什麼？只是因爲你當前的代碼不符合交叉瀏覽器。還有很多方法和幫助者可以在那裏使用。

其次，您可以指定使用上述的API之一onPlayerStateChange功能，這將被稱爲當影片結束（iframe廣告API，您可以在http://code.google.com/apis/ajax/playground/#polling_the_player

使用這樣一些預定義的常量， YT.PlayerState.ENDED

檢查演示出來

的代碼應類似於：

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