多個iframe嵌入youtube API

我的編碼知識大多是自學成才和有限的。多個iframe嵌入youtube API

我有一個論壇，我已經設置爲替換視頻嵌入iframe的帖子中的youtube網址。其中一個獨特的方面是，即使播放器小於YouTube建議，它也會強制嵌入播放720p質量（如果可用）。「爲什麼」是一個漫長的故事，但我想繼續這樣做。我試圖用新的API來處理相同的事情。

在下面的示例代碼中，我可以讓它在頁面上的一個視頻上工作，但不能在同一頁上。我想這與重複函數或某些事情有關。

<html><body> 
 

 
<script> 
 

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

 
\t var xyzplayer; 
 
\t function onYouTubeIframeAPIReady() { 
 
\t xyzplayer = new YT.Player('xyzplayer', { 
 
\t \t events: { 
 
\t \t \t 'onStateChange': onPlayerStateChange 
 
\t \t \t } 
 
\t \t }); 
 
\t } 
 

 
\t function onPlayerStateChange(event) { 
 
\t if (event.data == YT.PlayerState.PLAYING) { 
 
\t event.target.setPlaybackQuality('hd720'); 
 
\t \t } 
 
\t } 
 

 
    </script> 
 

 
<iframe id="xyzplayer" type="text/html" width="832" height="468" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&html5=1" frameborder="0"></iframe> 
 

 
<br><br><br> 
 

 
<script> 
 

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

 
\t var abcplayer; 
 
\t function onYouTubeIframeAPIReady() { 
 
\t abcplayer = new YT.Player('abcplayer', { 
 
\t \t events: { 
 
\t \t \t 'onStateChange': onPlayerStateChange 
 
\t \t \t } 
 
\t \t }); 
 
\t } 
 

 
\t function onPlayerStateChange(event) { 
 
\t if (event.data == YT.PlayerState.PLAYING) { 
 
\t event.target.setPlaybackQuality('hd720'); 
 
\t \t } 
 
\t } 
 

 
    </script> 
 

 
<iframe id="abcplayer" type="text/html" width="832" height="468" src="http://www.youtube.com/embed/IwfUnkBfdZ4?enablejsapi=1&html5=1" frameborder="0"></iframe> 
 

 
</body></html>

來源

2015-05-11 krrrrak

這是什麼都與Java呢？ –

你說得對。 JavaScript Player API已棄用。刪除了該標籤。 – krrrrak

因爲你的代碼加載庫兩次，第二次負荷將覆蓋你在第一，因此從事件的第一個定義將永遠不會被處理的功能。嘗試創建球員組合成一個單一的方法......這樣的事情（讓玩家兩個嵌入得到他們的活動聽了）：

<html><body> 
 
<iframe id="xyzplayer" type="text/html" width="832" height="468" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&html5=1" frameborder="0"></iframe> 
 
<br/><br/><br/> 
 
<iframe id="abcplayer" type="text/html" width="832" height="468" src="http://www.youtube.com/embed/IwfUnkBfdZ4?enablejsapi=1&html5=1" frameborder="0"></iframe> 
 
<script> 
 

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

 
\t var abcplayer,xyzplayer; 
 
\t function onYouTubeIframeAPIReady() { 
 
\t abcplayer = new YT.Player('abcplayer', { 
 
\t \t events: { 
 
\t \t 'onStateChange': onPlayerStateChange 
 
\t \t } 
 
\t });  
 
\t xyzplayer = new YT.Player('xyzplayer', { 
 
\t \t events: { 
 
\t \t \t 'onStateChange': onPlayerStateChange 
 
\t \t } 
 
\t }); 
 
\t } 
 

 
\t function onPlayerStateChange(event) { 
 
\t if (event.data == YT.PlayerState.PLAYING) { 
 
\t  event.target.setPlaybackQuality('hd720'); 
 
\t } 
 
\t } 
 
    </script> 
 
</body></html>

來源

2015-05-12 04:49:17 jlmcdonald

好的。這是有效的，兩個視頻都以我提出的任何解決方案播放（只要提供它），但是我怎麼能在我的論壇中實現這一點？它目前查找「http://www.youtube.com/watch?v=vIDEOid」或其中的一些變體，使用regex語句來獲取視頻ID，然後直接替換內聯。編輯：這有一個有趣的格式：http://mesdomaines.nu/multiple_embeds_demo/multiple_embeds_demo.html我想看看我是否可以複製一些。 – krrrrak

多個iframe嵌入youtube API

回答

相關問題