稍后添加播放器时未触发 Youtube iframe API 事件

Question

我有一个应用程序，当用户请求特定视频时，我会在其中注入一个 youtube iframe 播放器（完整的 iframe html sn-p）。这可能发生，例如加载应用程序后 30 秒或任何时间点，而不是在加载应用程序之后。

这似乎是 youtube API 的问题。在下面的代码示例中，您可以看到该示例不起作用，因为我在 1 秒后添加了 iframe 播放器。当您将超时时间从 1000 降低到仅 1 毫秒时，代码可以正常工作。

由于该测试，我发现 YT 事件没有触发，因为我的播放器是在稍后应用已经加载一段时间后注入的。

有没有办法在玩家没有立即添加到 dom 时触发事件？或者有人可以解释为什么这些事件只有在播放器立即添加到页面时才起作用（即使元素本身是在脚本之后添加的）

https://jsbin.com/vuhibelabi/1/edit?html,output

<div id="test" style="display:none;"></div>
    
    
    
    <script type="text/javascript">
      
      var tag = document.createElement('script');
      tag.id = 'iframe-demo';
      tag.src = 'https://www.youtube.com/iframe_api';
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('existing-iframe-example', {
            events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange
            }
        });
      }
      function onPlayerReady(event) {
        document.getElementById('existing-iframe-example').style.borderColor = '#FF6D00';
      }
      function changeBorderColor(playerStatus) {
        var color;
        if (playerStatus == -1) {
          color = "#37474F"; // unstarted = gray
        } else if (playerStatus == 0) {
          color = "#FFFF00"; // ended = yellow
        } else if (playerStatus == 1) {
          color = "#33691E"; // playing = green
        } else if (playerStatus == 2) {
          color = "#DD2C00"; // paused = red
        } else if (playerStatus == 3) {
          color = "#AA00FF"; // buffering = purple
        } else if (playerStatus == 5) {
          color = "#FF6DOO"; // video cued = orange
        }
        if (color) {
          document.getElementById('existing-iframe-example').style.borderColor = color;
        }
      }
      function onPlayerStateChange(event) {
        changeBorderColor(event.data);
      }
      
      function go(){
        var player = `<iframe id="existing-iframe-example"
            width="640" height="360"
            src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
            frameborder="0"
            style="border: solid 4px #37474F"
    ></iframe>`;
      document.querySelector("#test").innerHTML = player;
      document.querySelector("#test").style.display = "block";
      }
      
      setTimeout(function(){
        go();
      }, 1000)
      
    </script>

Answer 1

对于处于相同情况的任何人，我已改用 JS-based solution 而不是注入完整的 iframe，这似乎工作正常。