未收到Chrome中的Youtube播放器API状态更改

Question

我正在加载视频的网站上工作，并且当它滚动到屏幕上时可以播放。

代码如下。我在Firefox，Safari和Edge中查看了它，它工作正常，但在Chrome中，onPlayerStateChange函数没有收到（event.data == YT.PlayerState.PLAYING）。

它接收BUFFERING状态，但不接受PLAYING。任何想法为什么它在Chrome中不起作用？

<script>
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // Replace the 'ytplayer' element with an <iframe> and
      // YouTube player after the API code downloads.
      var player;
      function onYouTubePlayerAPIReady() {
        player = new YT.Player('ytplayer', {
          height: '366',
          width: '650',
          playerVars : {
                autoplay : 1
            },
          videoId: '_Vmn5PDKJLQ',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
      function onPlayerReady(event) {
            event.target.playVideo();
      }
      var done = false;
      function onPlayerStateChange(event) {
            if (event.data == YT.PlayerState.PLAYING && !done) {
                player.pauseVideo();
                done = true;
            }           
      }

      jQuery(window).scroll(function() {
         jQuery("#ytplayer").each( function() {
            if(done) {
                if(( jQuery(window).scrollTop() > jQuery(this).offset().top - 300 ) && ( jQuery(window).scrollTop() < parseInt(jQuery(this).offset().top + jQuery(this).height()) )) {
                    jQuery(this).css('opacity',1);
                    player.playVideo();
                } else {
                    //jQuery(this).css('opacity',0);
                    player.pauseVideo();               
                }
            }
        }); 
    });

    </script>