onStateChange 用新元素 youtube chromeless 替换类元素答案

【问题标题】：onStateChange replace class element with new element youtube chromelessonStateChange 用新元素 youtube chromeless 替换类元素
【发布时间】：2011-11-26 22:41:37
【问题描述】：

参考问题：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 用于提琴并具有真正的描述性

标签： javascript jquery youtube-api

【解决方案1】：

首先，您需要使用iframe 或flash 的Youtube API。为什么？仅仅因为您当前的代码不兼容跨浏览器。还有很多方法和助手可以在那里使用。

其次，您可以使用上述 API 之一分配 onPlayerStateChange 函数，该函数将在视频结束时调用（在 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.
    }
}

【讨论】：