YouTube JavaScript API，onStateChange 未触发，没有自动播放

Question

我有一个培训计划，我试图在 iFrame 中显示 YouTube 视频，自动播放它，并在视频播放完毕后前进到下一页。我可以触发 onYouTubeIframeAPIReady 函数，但 none 的其他事件会触发。其实我只对状态变化感兴趣

    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 ready"，但没有其他任何内容。 iFrame 看起来像：

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

什么阻止 onStateChange 工作而不是自动播放？控件不显示。

Answer 1

我无法像我发布的那样让它工作。我不得不更改代码以使用 div 而不是 iframe，在 playerVars 中添加视频 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>

YouTube JavaScript API，onStateChange 未触发，没有自动播放

YouTube JavaScript API, onStateChange not firing, no autoplay

javascript

youtube-api

dom-events