自動播放和播放列表不工作的多個YouTube API的iframe球員

問題不會出現在鍍鉻/！\自動播放和播放列表不工作的多個YouTube API的iframe球員

我使用的iframe玩家通過在YouTube API提供。如果沒有按下或保持按鈕，我創建了兩個玩家並隱藏其中的一個。此外，我爲每個人使用播放列表，並且啓用playerVars自動播放選項。

我的問題是，當播放列表中的第二個視頻到達播放器2時，它不會自動加載，並且該視頻不是播放列表中的下一個播放列表。

在此地址上運行示例 - >http://dev.alphas-projects.com 等待約1分鐘，以便顯示第二個視頻，然後按住空格鍵切換到第二個播放器。你會看到這個問題。

注意：我很確定問題在於YouTube播放器API代碼，因爲如果我們禁用第二個視頻播放器的「display：none」，問題就會出現。

這是我的代碼。

<div id=medias> 
    <div id=media-1 class=video-background> 
    <div class="video-foreground"> 
     <div id="player1" frameborder="0" allowfullscreen="1"></div> 
    </div> 
    </div> 
    <div id=media-2 class=video-background style="display: none"> 
    <div class="video-foreground"> 
     <div id="player2" frameborder="0" allowfullscreen="1"></div> 
    </div> 
    </div> 
</div>

的Javascript

var tag = document.createElement('script'); 

tag.src = "https://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('player1', { 
     videoId: 'Ja53GAN1lpA', 
     playerVars: { 
      'autoplay': 1, 
      'loop': 1, 
      'showinfo': 0, 
      'controls': 0, 
      'rel': 0, 
      'playlist': 'WCBDPLga_tI,8RYpwS1vxKk' 
     }, 
     events: { 
      'onReady': onPlayerReady1 
     } 
    }) 
    player2 = new YT.Player('player2', { 
     videoId: 'B7C1eiP8qVU', 
     playerVars: { 
      'autoplay': 1, 
      'loop': 1, 
      'showinfo': 0, 
      'controls': 0, 
      'rel': 0, 
      'playlist': 'ou0E2tJrU_Q,yD1eVgZrD6U' 
     }, 
     events: { 
      'onReady': onPlayerReady2 
     } 
    }) 
} 

function onPlayerReady1(event) { 
    event.target.playVideo(); 
    player1.setVolume(30); 
} 

function onPlayerReady2(event) { 
    event.target.playVideo(); 
    player2.setVolume(30); 
    player2.mute(); 
}

來源

2017-03-25 Alpha16

我用上面的代碼（但刪除了style =「display：none」）。它似乎工作正常。所以你的頁面中的js可能會被指責。此外，videoID「yD1eVgZrD6U」被阻止，無法觀看。 – Tempus

https://www.youtube.com/watch?v=yD1eVgZrD6U適用於我......您是否等待播放列表中的第二個視頻bc第一個視頻正確顯示。它只發生在第二個到來時。無論如何，我會嘗試用一個乾淨的項目來測試代碼，看看我的js是否是真正的問題。 – Alpha16

yD1eVgZrD6U被禁止在YouTube以外播放。在獨立的嵌入式播放器上進行測試以查看。 – Tempus

好吧，我想我找到了你的問題。
首先將您的id="media-2" div與您的id="media-1"切換。這只是爲了實用性。然後從id="media-2" div中刪除style="display: none;"。

然後，在當「狀態」等於「玩」的玩家代碼，設置

 $('#media-2').hide()

的iFrame玩家需要充分初始化之前，你可以將其隱藏。

編輯：
好吧，因爲它似乎有點bug，我又看了一遍。

這是我改變的所有（使用主頁，而不是演示腳本），它似乎在IE11和Chrome上可以正常工作。那對我來說很好。

<DIV class="video-background" id="media-2"> 
<DIV class="video-foreground"> 
<DIV id="player2" allowfullscreen="" frameborder="0"></DIV></DIV></DIV> 
<DIV class="video-background" id="media-1"> 
<DIV class="video-foreground"> 
<DIV id="player1" allowfullscreen="" frameborder="0"></DIV></DIV></DIV></DIV>

來源

2017-03-26 12:52:39 Tempus

編輯：只適用於Chrome：/問題仍然活着。 – Alpha16

@ AlphA-Fr。我又看了一眼。編輯是以上測試。 – Tempus

所有你改變的是allowfullscreen值設置爲0？不工作atm :-)只適用於chrome。測試IE和Firefox。 – Alpha16

自動播放和播放列表不工作的多個YouTube API的iframe球員

回答

相關問題