onStateChange用新元素youtube chromeless替换class元素

onStateChange replace class element with new element youtube chromeless

本文关键字：元素 youtube chromeless 替换 class onStateChange 新元素      更新时间：2023-09-26

关于的问题: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();  
 });

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

其次，您可以使用上述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.
    }
}
相关文章：