Question

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

到目前为止我的工作是：我已将actual api包含在我的资源文件夹中。我已将位置添加为Optional文件中的脚本。

这就是我的AppComponent的样子：

.angular-cli.json

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

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();
}

我猜问题是使用this.YT.Player is not a constructor at AppComponent.webpackJsonp.328.AppComponent.onYouTubeIframeAPIReady。任何人都可以为我提供一步一步的指导吗？

Answer 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();
          }
        }
    });
}

如何在Angular2中包含Youtube Iframe API？

1 个答案: