YouTube JavaScript API， on状态更改未触发，无自动播放

Question

我有一个训练计划，我尝试在 iFrame 中显示 YouTube 视频，自动播放它，并在视频完成后前进到下一页。我可以让YouTube上IPFI就绪函数触发，但其他事件都不会。实际上，我只对状态变化感兴趣。    var tag = document.createElement('script');    tag.src = 'https://www.youtube.com/iframe_api';    tag.id = 'apiScript';    var firstScriptTag = document.getElementsByTagName('script')[0];    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);...    //function onYouTubeIframeAPIReady() {  //tried this too but no change    window.onYouTubeIframeAPIReady = function() {        player = new YT.Player('externalComponent', {        events: {            'onReady': onPlayerReady,            'onError': onPlayerError,            'onStateChange': onPlayerStateChange            }        });        console.log('api ready');    }    function onPlayerStateChange(event) {        console.log('onStateChange');        console.log(YT.PlayerState);    }当它运行时，您可以在控制台中看到“api就绪”，但没有其他内容。内联框架如下所示：    <iframe id="externalComponent" src="https://youtube.com/embed/_S_Bg9qfa8o?enablejsapi=1&controls=0&autoplay=1" width="1024" height="576" allow="autoplay" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>是什么阻止了 onState更改了工作状态，而不是自动播放？控件不显示。

Answer 1

我无法让它像我发布的那样工作。我不得不更改代码以使用div而不是iframe，在播放器Vars中添加视频ID和其他参数。完成此操作后，视频会自动播放，不显示任何控件，并触发状态更改事件。

  function onYouTubeIframeAPIReady() {

    player = new YT.Player('player', {

      playerVars: {

                autoplay: 1,

                controls: 0,

                showinfo: 0,

                autohide: 1

                },

      videoId: '_S_Bg9qfa8o',

      events: {

        'onReady': onPlayerReady,

        'onStateChange': onPlayerStateChange

      }

    });

  }

...

<div id="player"></div>