單個頁面上的多個Youtube Chromeless播放器

Question

我試圖在無限制播放器的單個網頁中嵌入多個YouTube視頻。這不是同一個播放器中的多個視頻，而是單個頁面上的多個播放器。

這裏是一個例子。 （只顯示最後一個視頻）：

<div> 
    <div id="ytapiplayer"> 
    You need Flash player 9+ and JavaScript enabled to view this video. 
    </div> 

    <script type="text/javascript"> 
    var params = { allowScriptAccess: "always" }; 
    var atts = { id: "myytplayer" }; 
    swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid=1234","ytapiplayer", "499", "281", "9", null, null, params, atts); 
    function onYouTubePlayerReady(playerId) { 
     ytplayer = document.getElementById("myytplayer"); 
     ytplayer.cueVideoById("Zhawgd0REhA"); 
    } 

    </script> 
</div> 
<div> 
    <div id="ytapiplayer2"> 
    You need Flash player 9+ and JavaScript enabled to view this video. 
    </div> 

    <script type="text/javascript"> 
    var params = { allowScriptAccess: "always" }; 
    var atts = { id: "myytplayer2" }; 
    swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid=4321","ytapiplayer2", "499", "281", "9", null, null, params, atts); 
    function onYouTubePlayerReady(playerId) { 
     ytplayer2 = document.getElementById("myytplayer2"); 
     ytplayer2.cueVideoById("qkAn_qJdgBs"); 
    } 

    </script> 
</div> 

任何幫助將不勝感激。

Answer 1

固定：

<script type="text/javascript"> 
    var params = { allowScriptAccess: "always" }; 
    var atts = { id: "myytplayer" }; 
    swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid=player1","ytapiplayer", "499", "281", "9", null, null, params, atts); 
    function onYouTubePlayerReady(playerId) { 
     if(playerId == "player1"){ 
     ytplayer = document.getElementById("myytplayer"); 
     ytplayer.cueVideoById("H9v3eky91no"); 
     }else{ 
      if(playerId == "player2"){ 
      ytplayer2 = document.getElementById("myytplayer2"); 
      ytplayer2.cueVideoById("EGnwL0ganu0"); 
      } 
    } 
    } 

    </script> 
</div> 
<div> 
    <div id="ytapiplayer2"> 
    You need Flash player 9+ and JavaScript enabled to view this video. 
    </div> 

    <script type="text/javascript"> 
    var params = { allowScriptAccess: "always" }; 
    var atts = { id: "myytplayer2" }; 
    swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid=player2","ytapiplayer2", "499", "281", "9", null, null, params, atts); 
    </script> 
</div> 

Answer 2

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> 
<div> 
    <div id="ytapiplayer"> 
    You need Flash player 9+ and JavaScript enabled to view this video. 
    </div> 

    <script type="text/javascript"> 
    var params = { allowScriptAccess: "always" }; 
    var atts = { id: "myytplayer" }; 
    swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid=player1","ytapiplayer", "499", "281", "9", null, null, params, atts); 
    function onYouTubePlayerReady(playerId) { 
     if(playerId == "player1"){ 
     ytplayer = document.getElementById("myytplayer"); 
     ytplayer.cueVideoById("H9v3eky91no"); 
     }else{ 
      if(playerId == "player2"){ 
      ytplayer2 = document.getElementById("myytplayer2"); 
      ytplayer2.cueVideoById("EGnwL0ganu0"); 
      } 
    } 
    } 

    </script> 
</div> 
<div> 
    <div id="ytapiplayer2"> 
    You need Flash player 9+ and JavaScript enabled to view this video. 
    </div> 

    <script type="text/javascript"> 
    var params = { allowScriptAccess: "always" }; 
    var atts = { id: "myytplayer2" }; 
    swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid=player2","ytapiplayer2", "499", "281", "9", null, null, params, atts); 
    </script> 
</div> 

Answer 3

晚了一點，也許，但是我正在尋找的解決方案，我找到了這個網頁。 你的代碼現在不工作，也許它以前做過，但不是現在。 我很沮喪，現在我終於成功了。 下面是今天的YouTube無縫播放器JavaScript API的工作代碼。

我還添加了一些自定義錯誤處理 - 如果出現錯誤，則顯示div而不是alert。例。嵌入已禁用或錯誤的movieID。並且2個播放按鈕，因此如果您想在播放之前顯示預覽圖像，則可以使用相同的功能。 （尼斯幻燈片的）。

工作代碼7月31日，2011年

<script src="http://www.google.com/jsapi" type="text/javascript"></script> 
<script type="text/javascript"> 
    google.load("swfobject", "2.1"); 
</script>  
<script type="text/javascript"> 
    function updateHTML(elmId, value) { document.getElementById(elmId).innerHTML = value;} 
    function onPlayerError(errorCode) {if (errorCode == 150) { document.getElementById("embed_disabled").style.display = 'block'; }else { if (errorCode == 2) {document.getElementById("notfound").style.display = 'block';}}} 

    function onYouTubePlayerReady(playerId) { 

     if (playerId == "player1") { 
      ytplayer = document.getElementById("ytPlayer"); 
      ytplayer.addEventListener("onError", "onPlayerError"); 
     } 
     else if (playerId == "player2") { 
      ytplayer2 = document.getElementById("ytPlayer2"); 
      ytplayer2.addEventListener("onError", "onPlayerError"); 
     } 
    } 
    function playVideo16() { if (ytplayer) {ytplayer.playVideo();}} 
    function pauseVideo16() { if (ytplayer) { ytplayer.pauseVideo(); } } 
    function playVideo17() { if (ytplayer2) { ytplayer2.playVideo(); } } 
    function pauseVideo17() { if (ytplayer2) { ytplayer2.pauseVideo(); } } 

    function loadPlayer() { 
     var params = { allowScriptAccess: "always" }; 
     var atts = { id: "ytPlayer" }; 
     swfobject.embedSWF("http://www.youtube.com/apiplayer?video_id=4PspF_GA-9U&version=3&enablejsapi=1&playerapiid=player1&showinfo=0&controls=0&iv_load_policy=3&modestbranding=1&rel=0", "videoDiv", "480", "295", "10", null, null, params, atts); 

     var params = { allowScriptAccess: "always" }; 
     var atts = { id: "ytPlayer2" }; 
     swfobject.embedSWF("http://www.youtube.com/apiplayer?video_id=G68fHZig9nA&version=3&enablejsapi=1&playerapiid=player2&showinfo=0&controls=0&iv_load_policy=3&modestbranding=1&rel=0", "videoDiv2", "480", "295", "10", null, null, params, atts); 
    } 
    function _run() { loadPlayer();} 
    google.setOnLoadCallback(_run); 
</script> 

<div id="embed_disabled" style="color:#fff;position:absolute;background:#000;width:959px;height:5500px;z-index:100000;display:none">Embed disabled</div> 
<div id="notfound" style="color:#fff;position:absolute;background:#000;width:959px;height:5500px;z-index:100000;display:none">Movie not found</div> 



<div id="preview_videoDiv" onclick="this.style.display='none';playVideo16()" style="cursor:pointer;color:#fff;position:absolute;background:#000;width:480px;height:295px;z-index:100000;text-align:center;"><p style="padding-top:100px">Start movie</p></div> 
<div id="videoDiv">Loading...</div> 
<div style="clear:both;"><a href="javascript:void(0);" onclick="playVideo16();">Play</a> | <a href="javascript:void(0);" onclick="pauseVideo16();">Pause</a></div> 

<div id="preview_videoDiv2" onclick="this.style.display='none';playVideo17()" style="cursor:pointer;color:#fff;position:absolute;background:#000;width:480px;height:295px;z-index:100000;text-align:center;"><p style="padding-top:100px">Start movie</p></div> 
<div id="videoDiv2" style="clear:both;">Loading...</div> 
<div style="clear:both;"><a href="javascript:void(0);" onclick="playVideo17();">Play</a> | <a href="javascript:void(0);" onclick="pauseVideo17();">Pause</a></div>