javascript - 永远不会触发 YouTube onPlayerReady

Question

知道为什么这个脚本不起作用吗？我只想跟踪 onStateChanged 事件，但从未调用过。

当我用下面的代码打开 html 文档时，我没有错误，youtube 脚本加载得很好，播放器对象不是 undefined，看起来也很好。

$(document).ready(function(){
    loadScript();
});

    function loadScript() {
        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;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
      });
      alert(player);
    }

    var done = false;
    function onPlayerStateChange(event) {
          alert('state changed');
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 3000);
          done = true;
        }
    }
    function stopVideo() {
        player.stopVideo();
    }
    function onPlayerReady(event) {
        event.target.playVideo();
    }

我的 iframe:

<iframe id="player width="400" height="300" src="https://www.youtube.com/embed/j0pJekWgeFE" frameborder="0" allowfullscreen></iframe>

参见 fiddle :https://jsfiddle.net/rg2uy1f8/

Answer 1

我在这里找到了答案:How do I get the reference to an existing YouTube player?

我的解决方案不起作用的原因是我的 iframe 缺少一个属性:enablejsapi="1" 而我也缺少:? enablejsapi=1 在 YouTube 视频 url 中。

您可以在这里找到有效的解决方案:http://jsfiddle.net/bf7zQ/2/