2 个视频同一页面使用 iframe Youtube API 仅加载一个答案

【问题标题】：2 Videos same page using iframe Youtube API only loading one2 个视频同一页面使用 iframe Youtube API 仅加载一个
【发布时间】：2017-11-28 12:10:19
【问题描述】：

我在尝试使用 Youtube iframe API 加载 2 个 iframe 视频时遇到问题。

请看下面的代码：

<body>
       <div id="bookingVideo"></div>
       <div id="testing"></div>

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

          //First video 
          var bookingVideo;      
          function onYouTubeIframeAPIReady() {
            player = new YT.Player('bookingVideo', {
              height: '400',
              width: '100%',
              videoId: 'W3VoMbg6hXA'
            });
          }

          //Second Video        
          var testing;      
          function onYouTubeIframeAPIReady() {
            player = new YT.Player('testing', {
              height: '400',
              width: '100%',
              videoId: 'W3VoMbg6hXA'
            });
          }    

          function onPlayerReady(event) {
            event.target.playVideo();
          }

          function pauseVideo() {
            player.pauseVideo();
          }                      
       </script>
</body>

它可以工作，但只向 div id="testing" 添加一个视频，如下面的屏幕截图所示。

有什么想法吗？我被困了几个小时:(。谢谢

【问题讨论】：

你覆盖了 YouTubeIframeAPIReady() 上的函数

标签： javascript iframe youtube

【解决方案1】：

这是处理 N 个 youtube 视频的脚本

        var ytIframeIdList = [];//Creating Array to store youtube IDs
        var ytPlayerId = [];//Creating Array to store player IDs
        ytIframeIdList =["youtubeID1","youtubeID1","youtubeID1"];//youtube Video IDs

        /*Creating Youtube Player IDs for handling events*/

        for (i = 0; i < ytIframeIdList .length; i++) {
             ytPlayerId.push("player" + i);
        }

        /*Appending youtube API script to body*/

        var youTubeVideoTag = document.createElement('script');
        youTubeVideoTag.src = "//www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        document.body.appendChild(youTubeVideoTag, firstScriptTag);

        window.onYouTubeIframeAPIReady = function () {
            for (i = 0; i < ytIframeIdList.length; i++) {
                ytPlayerId[i] = new YT.Player(ytIframeIdList[i], {
                    events: {
                        "onStateChange": onPlayerStateChange
                    }
                });
            }
        };
        function onPlayerStateChange(event) {
           for (i = 0; i < ytIframeIdList .length; i++) {
               if (ytPlayerId[i].getPlayerState() === 2) {
                     ytPlayerId[i].pauseVideo();//For pause
                }
             }
          }

谢谢！

【讨论】：

【解决方案2】：

你定义了同一个函数两次，所以 Javascript 不知道调用哪一个。您应该执行以下操作：

<body>

    <div id="bookingVideo"></div>

   <div id="testing"></div>

    <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 bookingVideo;
      var testing;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('bookingVideo', {
          height: '400',
          width: '100%',
          videoId: 'W3VoMbg6hXA'
        });
        player = new YT.Player('testing', {
          height: '400',
          width: '100%',
          videoId: 'W3VoMbg6hXA'
        });
      }


      function onPlayerReady(event) {
        event.target.playVideo();
      }



            function pauseVideo() {
                player.pauseVideo();
            }


    </script>

希望对你有帮助！

【讨论】：

难道“玩家”也必须有不同的名称吗？
我认为不需要。如果你想单独跟踪它们，你可以。试用代码，如果它有效，请告诉我
"Javascript 不知道调用哪一个" - 不正确，JS 确切地知道调用哪一个并且它是始终使用的最后一个函数定义。
嘿小伙子们，我被覆盖了 YouTubeIframeAPIReady() 上的函数。它现在工作得很好。谢谢一百万:)