YouTube API：多個嵌入在同一頁面上？

如何使用YouTube API在頁面的不同位置嵌入不同的YouTube視頻？（這意味着他們可以而不是分享相同的<div>「玩家」。）他們也可以根據不同的onclick事件在不同的時間開始。我的代碼工作正常，只有一個視頻在網頁上，但對於我的生活，我無法弄清楚代碼，讓這一切工作與2個或更多！YouTube API：多個嵌入在同一頁面上？

起初，我試圖簡單地添加代碼的多個實例，我希望每個代碼都可以，但那不起作用。我讀了所有的球員需要被添加到一個<script>，所以我想這：

（另外，它的問題在網頁上的<script>是並且其中<div> s爲能否<script>寫的？？<div>無論身在何處，他們都在頁面上）

無論如何，這裏是我正在使用的代碼：

// inside other containers with with relative and absolute positioning 
// that fadeIn and fadeOut using jQuery 
<div id="video1"></div> 

// inside other containers with with relative and absolute positioning 
// that fadeIn and fadeOut using jQuery 
<div id="video2"></div> 


<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 player1; 
var player2; 

function onYouTubeIframeAPIReady() { 
    player1 = new YT.Player('video1',{ 
       width: '320', 
       height: '216', 
       videoId: 'VIDEO_ID_1', 
       playerVars: {rel: 0, controls: 0, autohide: 1, disablekb: 1, enablejsapi: 1, modestbranding: 1, showinfo: 0 }, 
       events: { 'onStateChange': onPlayerStateChange1 } });; 
    player2 = new YT.Player('video2',{ 
       width: '320', 
       height: '216', 
       videoId: 'VIDEO_ID_2', 
       playerVars: {rel: 0, controls: 0, autohide: 1, disablekb: 1, enablejsapi: 1, modestbranding: 1, showinfo: 0 }, 
       events: { 'onStateChange': onPlayerStateChange2 } });; } 

function startVideo1() { 
      player1.playVideo(); 
      $('#video_box_B1').delay(1000).fadeIn(); 
      $("#video_box_B1").delay(20000).hide(); 
     }; 
function onPlayerStateChange1(event) {   
      if(event.data === 2) { 
       $("#video_box_B1").hide(); 
      } 
     } 
function startVideo2() { 
      player2.playVideo(); 
      $('#video_box_E5').delay(1000).fadeIn(); 
      $("#video_box_E5").delay(20000).hide(); 
     }; 
function onPlayerStateChange2(event) {   
      if(event.data === 2) { 
       $("#video_box_E5").hide(); 
      } 
     } 
</script> 

// onclick triggers at various places on the page 
<img src="image_1.jpg" onclick="startVideo1()" /> 
<img src="image_2.jpg" onclick="startVideo2()" />

是否有任何人誰可以告訴我在做什麼錯？順便說一下，如果我在頁面上使用靜止圖像，純文本或只有一個視頻，那麼這些容器淡入淡出的效果非常好，所以不是那些容易造成這種情況的容器。它必須是YouTube腳本。誰能幫忙？

來源

2014-06-21 Jragyn

函數startVideo1（）和startVideo2（）如何調用？ – Als

我將它們添加到當前代碼下供您參考。我在頁面上的不同位置使用''和''。當只有一個YouTube API嵌入時，這非常適用，所以我知道這種觸發方法不是問題。問題是我試圖在頁面上放置多個視頻的方式。 – Jragyn

閱讀你的其他評論，它似乎已經按照你想要的方式工作。 – Als

似乎在這個jsbin奏效：

http://jsbin.com/catuhimo/3/edit

是什麼瀏覽器，你想出來的？如果你在Yosemite上使用Safari的最新版本8.0（10538.39.41），jsfiddle和jsBin在渲染時遇到了一些麻煩。我最近在Chrome上試用了你的代碼，並用實際的視頻ID替換了佔位符，它工作。

這有幫助嗎？我錯過了你的問題的重點？根據你的要求，它對我來說似乎很好。

來源

2014-06-24 21:52:04 markthethomas

我在小牛隊上使用Chrome。顯然，我不知道我在做什麼，因爲YES在jsbin中有效。也許我在我的代碼中有一些小錯字，我碰巧在這裏修復。我將不得不在我的頁面中檢查我的代碼，或者從頭開始編寫代碼。我不敢相信我一直在回答我自己的問題！ :-(感謝您向我展示我顯然已經知道的內容！ – Jragyn

不要爲自己而煩惱！現在很高興:)此外，還有一些方法可以重構代碼，因此您不必手動構建每個代碼視頻播放器實例;這會對你的應用/頁面有幫助嗎？我可以稍後發佈一些代碼，如果它與您的工作相關 – markthethomas

我有一個用於編輯代碼的「系統」，但每次創建一個頁面時都需要複製多個YouTube嵌入。我不確定我需要多少，但如果其他人在Google搜索中找到他們正在嘗試解決的問題，則可能是您的代碼會有幫助。 :-) – Jragyn

YouTube API：多個嵌入在同一頁面上？

回答

相關問題