为什么我的第二个 YouTube 嵌入没有显示？

Question

我的问题很简单。我可以很好地显示单个视频。但是通过创建 YT.Player 的新实例来嵌入第二个没有效果。它甚至不会崩溃或记录任何错误。

我的代码试图通过几乎只是复制和粘贴原始嵌入代码并将 B 附加到与第二个视频关联的所有变量来创建第二个嵌入。

我花了很长时间仔细检查是否有任何拼写错误，但经过几次检查后仍未发现任何拼写错误，所以我认为这不是问题所在。

<!DOCTYPE html>
<html>
  <body>
    <center><div id="player"></div></center>

    <script>
      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 player;
      var int;
      var int2;
      var int3;
      var tim;

      var playerB;
      var intB;
      var int2B;
      var int3B;
      var timB;

      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          origin: window.location.href,
          height: '400',
          width: '400',
          videoId: 'pRmChG3Jf_Q',
          events: {
            'onReady': seekRandom,
            'onStateChange': onStateChange
          }
        });
        playerB = new YT.Player('playerB', {
          origin: window.location.href,
          height: '400',
          width: '400',
          videoId: 'bsgXjiFM_Sc',
          events: {
            'onReady': seekRandomB,
            'onStateChange': onStateChangeB
          }
        });
      }
      function onStateChange(event) {
        switch (event.data) {
          case -1:
            player.playVideo();
            player.setVolume(0);
            break;
          case YT.PlayerState.BUFFERING:
            player.setVolume(0);
            clearTimeout(tim);
            break;
          case YT.PlayerState.PLAYING:
            int3 = setInterval(function(){
              if (player.getPlayerState() != YT.PlayerState.BUFFERING) {
                player.setVolume(player.getVolume() + 2.5);
              }
            }, 50)

            tim = setTimeout(function(){
              int2 = setInterval(function(){
                if (player.getPlayerState() != YT.PlayerState.BUFFERING) {
                  player.setVolume(player.getVolume() - 2.5);
                }
              }, 50)
            }, 2500);
            break;
        }
      }

      function seekRandom(event) {
        int = setInterval(function(){
          seconds_buffered = player.getVideoLoadedFraction() *     player.getDuration();
          player.seekTo(Math.max(Math.random()*seconds_buffered - 5, 0), true);
          clearInterval(int2);
          clearInterval(int3);
        }, 5000);
      }

      function onStateChangeB(event) {
        switch (event.data) {
          case -1:
            playerB.playVideo();
            playerB.setVolume(0);
            break;
          case YT.PlayerState.BUFFERING:
            playerB.setVolume(0);
            clearTimeout(timB);
            break;
          case YT.PlayerState.PLAYING:
            int3B = setInterval(function(){
              if (playerB.getPlayerState() != YT.PlayerState.BUFFERING) {
                playerB.setVolume(playerB.getVolume() + 2);
              }
            }, 50)

            timB = setTimeout(function(){
              int2B = setInterval(function(){
                if (playerB.getPlayerState() != YT.PlayerState.BUFFERING) {
                  playerB.setVolume(playerB.getVolume() - 2);
                }
              }, 50)
            }, 2500);
            break;
        }
      }

      function seekRandomB(event) {
        intB = setInterval(function(){
          seconds_buffered = playerB.getVideoLoadedFraction() * playerB.getDuration();
          playerB.seekTo(Math.max(Math.random()*seconds_buffered - 5, 0), true);
          clearInterval(int2B);
          clearInterval(int3B);
        }, 5000);
      }
    </script>
  </body>
</html>

Answer 1

我没有意识到我必须创建第二个 <div>，id 为 playerB。

为什么我的第二个 YouTube 嵌入没有显示？

Why doesn't my second YouTube embed display?

youtube-iframe-api