javascript - onStateChange 用新元素替换类元素 youtube chromeless

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 上，您可以使用一些预定义的常量，例如 YT.PlayerState .结束

在 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.
    }
}