在同一页面上打开停止事件的多个Youtube播放器?

时间:2011-08-20 09:04:45

标签: javascript javascript-events youtube youtube-api swfobject

我正在尝试为客户端构建一个YouTube API播放器,我尝试构建的内容要求YouTube播放器可以立即切换(以避免在转换之间加载动画)。

这有可能吗?

我试过这样的事情

<a name="ytplayer"></a>
<div id="ytplayer_div1">You need Flash player 8+ and JavaScript enabled to view this     video.</div>
<div id="ytplayer_div2"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2/swfobject.js"></script>
 <script type="text/javascript">
 var ytplayer_playlist = [ ];
 var ytplayer_playitem = 0;
 swfobject.addLoadEvent( ytplayer_render_player );
 swfobject.addLoadEvent( ytplayer_render_playlist );
 function ytplayer_render_player( )
 {
  swfobject.embedSWF
  (
  'http://www.youtube.com/v/' + ytplayer_playlist[ ytplayer_playitem ] +   '&enablejsapi=1&rel=0&fs=1',
  'ytplayer_div1',
  '425',
  '344',
  '8',
  null,
  null,
  {
    allowScriptAccess: 'always',
    allowFullScreen: 'true'
  },
  {
    id: 'ytplayer_object'
  }
);
}
function ytplayer_render_playlist( )
{
for ( var i = 0; i < ytplayer_playlist.length; i++ )
{
  var img = document.createElement( "img" );
  img.src = "http://img.youtube.com/vi/" + ytplayer_playlist[ i ] + "/default.jpg";
  var a = document.createElement( "a" );
  a.href = "#ytplayer";

  a.onclick = (
    function( j )
    {
      return function( )
      {
        ytplayer_playitem = j;
        ytplayer_playlazy( 1000 );
      };
    }
  )( i );
  a.appendChild( img );
  document.getElementById( "ytplayer_div2" ).appendChild( a );
}
}
function ytplayer_playlazy( delay )
{
//
// Thanks to the anonymous person posted this tip:
// http://www.tipstrs.com/tip/1084/Static-variables-in-Javascript
//
if ( typeof ytplayer_playlazy.timeoutid != 'undefined' )
{
  window.clearTimeout( ytplayer_playlazy.timeoutid );
}
ytplayer_playlazy.timeoutid = window.setTimeout( ytplayer_play, delay );
}
function ytplayer_play( )
{
var o = document.getElementById( 'ytplayer_object' );
if ( o )
{
  o.loadVideoById( ytplayer_playlist[ ytplayer_playitem ] );
}
}

function onYouTubePlayerReady( playerid )
{
var o = document.getElementById( 'ytplayer_object' );
if ( o )
  {
   o.addEventListener( "onStateChange", "ytplayer_statechange" );
   o.addEventListener( "onError", "ytplayer_error" );
  }
}

function ytplayer_statechange( state )
{
 if ( state == 0 )
 {
   ytplayer_playitem += 1;
   ytplayer_playitem %= ytplayer_playlist.length;
   ytplayer_playlazy( 5000 );

}

function ytplayer_error( error )
{
 if ( error )
 {
  ytplayer_playitem += 1;
  ytplayer_playitem %= ytplayer_playlist.length;
  ytplayer_playlazy( 5000 );
 }
}
//
// Add items to the playlist one-by-one
//
ytplayer_playlist.push( 'tGvHNNOLnCk' );
ytplayer_playlist.push( '_-8IufkbuD0' );
ytplayer_playlist.push( 'wvsboPUjrGc' );
ytplayer_playlist.push( '8To-6VIJZRE' );
ytplayer_playlist.push( '8pdkEJ0nFBg' );
</script>

是否可以立即在播放列表项之间进行转换? 我可以利用ajax在某一点触发新玩家吗?

欢迎任何想法,提前谢谢。

1 个答案:

答案 0 :(得分:0)

你可以使用iframe来做到这一点。把一个youtube播放器放在一个iframe中作为secound创建secound iframe。关于停止按钮为nex iframe提供id。