自动播放和播放列表不适用于多个 youtube API iframe 播放器

Question

问题没有出现在铬上/！\

我正在使用youtube API提供的iframe播放器。我创建了两个玩家，如果没有按下或按住按钮，我会隐藏其中一个。此外，我为每个播放器使用一个播放列表，并且启用了自动播放播放器Vars的选项。

我的问题是，当播放列表中的第二个视频进入播放器2时，它不会自动加载，并且该视频不是播放列表中的下一个视频。

一个示例正在此地址运行 -> http://dev.alphas-projects.com等待 ~1 分钟，以便出现第二个视频，然后按住空格键切换到第二个播放器。您将看到问题。

注意：我很确定问题出在YouTube播放器API代码上，因为如果我们禁用第二个视频播放器的"显示：无"，则会出现问题。

这是我的代码。

 <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>

爪哇语

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();
}

Answer 1

好的，我想我发现了你的问题。
首先用id="media-1"切换您的id="media-2"div。这只是为了实用性。 然后从id="media-2"div 中删除style="display: none;"。

然后在播放器代码中当"状态"等于"播放"时，设置

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

iFrame 播放器需要完全初始化，然后才能隐藏它。

编辑：
好吧，好像有点麻烦，我又看了一遍。

这就是我更改的全部内容(使用主页，而不是演示脚本(，它似乎在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>