如何在 Angular2 中包含 Youtube Iframe API？答案

【问题标题】：How do I include the Youtube Iframe API in Angular2?如何在 Angular2 中包含 Youtube Iframe API？
【发布时间】：2017-11-01 16:37:41
【问题描述】：

我正在使用 Angular-cli。我想在 Angular2 模块中使用 youtube iframe api。我无法让youtube-iframe node package 工作。而且更多 Angular2 特定的包似乎不支持完整的 api 功能。

到目前为止，这是我的工作：我已将actual api 包含在我的资产文件夹中。我已将该位置作为脚本添加到我的.angular-cli.json 文件中。

这就是我的 AppComponent 的样子：

export class AppComponent {
YT;
constructor(){
    this.YT = window["YT"];
}

onYouTubeIframeAPIReady() {
    console.log(this.YT);
    var player;
    player = new this.YT.Player('muteYouTubeVideoPlayer', {
        videoId: 'KKYYAbGpw6A', // YouTube Video ID
        width: 560,               // Player width (in px)
        height: 316,              // Player height (in px)
        playerVars: {
          autoplay: 1,        // Auto-play the video on load
          controls: 0,        // Show pause/play buttons in player
          showinfo: 0,        // Hide the video title
          modestbranding: 0,  // Hide the Youtube Logo
          loop: 1,            // Run the video in a loop
          fs: 0,              // Hide the full screen button
          cc_load_policy: 0, // Hide closed captions
          iv_load_policy: 0,  // Hide the Video Annotations
          autohide: 1         // Hide video controls when playing
        },
        events: {
          onReady: function(e) {
            e.target.mute();
          }
        }
    });
}

ngAfterViewInit(){
    this.onYouTubeIframeAPIReady();
}

当我在 Chrome 中打开 devTools 时，它可以工作。但不是当我关闭它们时。这是我得到的错误：

this.YT.Player is not a constructor
at AppComponent.webpackJsonp.328.AppComponent.onYouTubeIframeAPIReady

我猜问题出在使用window["YT"]。任何人都可以为我提供正确执行此操作的分步指南吗？

【问题讨论】：

标签： javascript angular typescript iframe youtube

【解决方案1】：

这应该是timing 问题。对于onYouTubeIframeAPIReady，这是一个 youtube 提供的回调。所以在ngOninit() or ngAfterViewInit() 内部，我建议您在window 级别注册它，以便在一切准备就绪时让youtube API 调用它。

类似：

(<any>window).onYouTubeIframeAPIReady = ()=>{
    console.log((<any>window).YT);
    this.player = new (<any>window).YT.Player('muteYouTubeVideoPlayer', {
        videoId: 'KKYYAbGpw6A', // YouTube Video ID
        width: 560,               // Player width (in px)
        height: 316,              // Player height (in px)
        playerVars: {
          autoplay: 1,        // Auto-play the video on load
          controls: 0,        // Show pause/play buttons in player
          showinfo: 0,        // Hide the video title
          modestbranding: 0,  // Hide the Youtube Logo
          loop: 1,            // Run the video in a loop
          fs: 0,              // Hide the full screen button
          cc_load_policy: 0, // Hide closed captions
          iv_load_policy: 0,  // Hide the Video Annotations
          autohide: 1         // Hide video controls when playing
        },
        events: {
          onReady: function(e) {
            e.target.mute();
          }
        }
    });
}

【讨论】：