2011-08-20 60 views
2

我試圖建立一個客戶端的YouTube API播放器,即時嘗試構建要求YouTube播放器可以即時切換(以避免加載動畫之間的轉換)。多個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在某個點觸發新玩家嗎?

任何想法都非常受歡迎,請提前致謝。

+0

你能清理一些你的代碼,這樣回答的人可以理解你的問題嗎? – hitautodestruct

回答

0

U可以通過使用iframe來實現。把一個youtube播放器放在一個iframe中,就像secound一樣創建secound iframe。關於停止按鈕爲nex iframe提供id。

相關問題