自动播放和播放列表在多个youtube API iframe播放器上不起作用

Question

问题不会出现在chrome /!\

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

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

一个例子是在这个地址上运行-> 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();
}

Answer 1

好了，我想我找到你的问题了。

首先用id="media-1"切换你的id="media-2"目录。这只是为了实用性。然后从id="media-2"目录中删除style="display: none;"。

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

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

iFrame player需要完全初始化才能隐藏它。

编辑：

好的，因为它看起来有点问题，所以我又看了一遍。

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