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

Question

问题没有出现在 chrome /!\

我正在使用 youtube API 提供的 iframe 播放器。如果没有按下或按住按钮，我创建了两个播放器并隐藏其中一个。 此外，我为它们中的每一个都使用了一个播放列表，并且启用了 autoplay off playerVars 选项。

我的问题是，当播放列表中的第二个视频到达 player2 时，它不会自动加载，并且该视频不是播放列表中希望播放的下一个视频。

一个例子正在这个地址运行 -> 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>

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

Answer 1

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

然后在播放器代码中当“state”等于“playing”时，设置

        $('#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>