Question

问题不会出现在chrome /！\

上

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

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

一个例子是在这个地址运行 - ＆gt; http://dev.alphas-projects.com 等待~1分钟，以便显示第二个视频并按住或按住空格键切换到第二个播放器。你会看到这个问题。

注意：我非常确定问题出在youtube播放器API代码上，因为如果我们停用了显示屏，则无法使用＆＃39;该问题出现在第二个视频播放器中。

这是我的代码。

 <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-2"切换id="media-1" div。这只是为了实用。然后从style="display: none;" div中删除id="media-2"。

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

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

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

1 个答案: