即使在全局对象上定义，Angular2 上的 onYouTubeIframeAPIReady 也找不到名称 'YT'

Question

为了捕捉用户暂停 YouTube 视频的时间 ()，我发现自己使用了 Angular2 中的 onYouTubeIframeAPIReady 回调方法。

我遇到了与 and here 所述类似的困难。

我听从了建议并最终使用了 (window as any).onYouTubeIframeAPIReady = function () {}。

不过，在我的 onYouTubeIframeAPIReady 方法中，我有以下代码：

function onYouTubeIframeAPIReady() {
  player = new YT.Player('video', {
    events: {
     'onReady': onPlayerReady,
     'onStateChange': onPlayerStateChange
    }
  });
}

我的 typescript linter 出现以下错误：

Argument of type '{events: {'onReady':(event:any) => void; 'onStateChange': (event:any)=>void;};}' is not assignable to parameter of type 'PlayerOptions

我的最小示例存储库可以在这里找到：

git clone https://github.com/Atticus29/dataJitsu.git
cd dataJitsu
git checkout Whosebug
npm install
ng serve

Answer 1

使用 window['YT'] 而不是 YT 似乎可以解决这个问题：

ngOnInit() {
  var player;

  window['onYouTubeIframeAPIReady'] = function() {
    player = new window['YT'].Player('video', {
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerStateChange(event){
    if (event.data == window['YT'].PlayerState.PAUSED) {
      console.log(player.getCurrentTime());
    }
  }

  function onPlayerReady(event) {
    document.getElementById("pause").addEventListener("click", function() {
      player.pauseVideo();
    });
    document.getElementById("play").addEventListener("click", function() {
      player.playVideo();
    });
  }

  if (!window['YT']){
    var tag = document.createElement('script');
    tag.src = "//www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }
}

即使在全局对象上定义，Angular2 上的 onYouTubeIframeAPIReady 也找不到名称 'YT'

onYouTubeIframeAPIReady on Angular2 can't find name 'YT' even when defined on global object

youtube-api

typescript

youtube-iframe-api

angular