的YouTube API動態加載視頻

Question

- 我也想許多視頻加載到頁面上，沒有什麼花哨
- 視頻ID存儲在一個數據庫 - > $滑[「消息」]
-I可以得到它加載只一個視頻。其餘都是空白
- 它是一個循環，當那種== YouTube上，它試圖把視頻裏面。

if($slide['kind'] == 'youtube'){ 
?> 
<li> 
<div class="info<?php echo $count+1; ?>"> 
<h1><?php echo $slide['title']; ?></h1> 
<div id="ytplayer<?php echo $count+1; ?>" class="youTube-viewer"></div> 
<script> 
var video = '<?php echo $slide['message']; ?>'; 
var tag = document.createElement('script'); 
tag.src = "https://www.youtube.com/player_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
var player; 
function onYouTubePlayerAPIReady() { 
player = new YT.Player('ytplayer<?php echo $count+1; ?>', { 
height: '365', 
width: '648', 
videoId: video, 
playerVars: { 
'rel': 0, 
'enablejsapi': 1, 
} 
}); 
} 
</script> 
<h2><?php echo $slide['name']; ?></h2> 
</div> 
</li> 
<?php 
} 

Answer 1

使用什麼jlmcdonald給了我一個提示，我得到它的工作，見下文 http://jsfiddle.net/AaGvt/

<script> 
var tag = document.createElement('script'); 
tag.src = "//www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

var player; 

function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
    height: '250', 
    width: '500', 
    videoId: 'u1zgFlCw8Aw', 
    events: {} 
    }); 

    player = new YT.Player('player2', { 
    height: '250', 
    width: '500', 
    videoId: 'u1zgFlCw8Aw', 
    events: {} 
    }); 

    player = new YT.Player('player3', { 
    height: '250', 
    width: '500', 
    videoId: 'u1zgFlCw8Aw', 
    events: {} 
    }); 

} 

</script> 

<div id="player"></div> 
<div id="player2"></div> 
<div id="player3"></div> 

鏈接到小提琴通過SQL請求和循環，你可以建立的div

<div id="player"></div> 
etc... 

並創建所需的javascript

player = new YT.Player('player', { 
    height: '250', 
    width: '500', 
    videoId: 'u1zgFlCw8Aw', 
    events: {} 
    }); 
etc... 

Answer 2

如果這整個代碼塊是在一個循環中，那麼它失敗因爲循環本身。假設您有4個要插入的視頻...因爲用於加載YT API JavaScript庫的代碼位於循環內部，您最終將加載它4次。而且因爲你的回調函數在循環中，你最終將定義它4次，每次覆蓋前一個定義以及覆蓋引用視頻的對象。由於你的回調函數引用了視頻，所以只有你列表中的最後一個視頻有一個持續的回調函數，所以我的猜測是它插入的視頻。

tl; dr - 問題不在API中，而是在編程結構中。

也許你可以重新組織你的代碼是這樣的：

// DON'T START YOUR LOOP YET 
    <script> 
    var tag = document.createElement('script'); 
    tag.src = "https://www.youtube.com/player_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
    function onYouTubePlayerAPIReady() { 
    // START YOUR LOOP HERE 
<?php 
if($slide['kind'] == 'youtube'){ 
?> 
     var player<?php echo $count+1 ?>; 
    var video = '<?php echo $slide['message']; ?>'; 
    player<?php echo $count+1 ?> = new YT.Player('ytplayer<?php echo $count+1; ?>', { 
    height: '365', 
    width: '648', 
    videoId: video, 
    playerVars: { 
    'rel': 0, 
    'enablejsapi': 1, 
    } 
    }); // CODE CONTINUES ON FROM HERE, EVENTUALLY ENDING THE LOOP, PUTTING IN THE HTML 

等等，等等等等。注意，我承認，我的代碼是無效的;我只是指出你的循環應該在onYouTubePlayerAPIReady中，並且你需要爲每個視頻創建一個單獨的播放器對象。 （好吧，你不需要...你可以採用不同的策略來利用API的其他方面......但是根據你的具體情況，這是最簡單的方法。）正如上面的一位評論者指出的那樣，如果你創建一個在使用你的代碼的時候，人們可以更輕鬆地幫助你微調它，並將這種方法付諸實踐。