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

Question

我正在尝试为客户端构建一个 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在某个时刻触发新玩家吗？

任何想法都是非常受欢迎的。

Answer 1

你可以通过使用 iframe 来做到这一点。将一名 YouTube 播放器放入一个 iframe 中，第二个则创建第二个 iframe。关于停止按钮，请提供下一个 iframe 的 id。