将 YouTube iframe API 与 Angular2 和 Typescript 一起使用答案

【问题标题】：Use YouTube iframe API with Angular2 and Typescript将 YouTube iframe API 与 Angular2 和 Typescript 一起使用
【发布时间】：2016-07-27 19:47:01
【问题描述】：

如何使用 Typescript 在 Angular2 组件中构造 YT.Player 对象并访问其属性 getCurrentTime()？

我尝试通过 npm 安装几个 YouTube 包装器（例如：youtube-player），并添加了Type definitions for YouTube，并在 app.ts 中提供了参考：

/// <reference path="../../typings/main/ambient/youtube/index.d.ts" />

但是导入的时候还是报错，例如：import YouTubePlayer from 'youtube-player';返回Cannot find module 'youtube-player'.

我已经分叉了 Angular2 preboot/Webpack 启动器，我的源代码库是 here

【问题讨论】：

你找到解决方案了吗？

标签： typescript angular webpack youtube-iframe-api

【解决方案1】：

你不应该需要任何包装器，包括它自己并不多。

1.) 通过脚本标签包含 youtube iFrame API。

ngAfterViewInit() {
  const doc = (<any>window).document;
  let playerApiScript = doc.createElement('script');
  playerApiScript.type = 'text/javascript';
  playerApiScript.src = 'https://www.youtube.com/iframe_api';
  doc.body.appendChild(playerApiScript);
}

2.) 在onYouTubeIframeAPIReady() 函数中注册您的回调，当页面完成播放器 API 的 JavaScript 下载后，Youtube API 将调用该函数。

  ngOnInit() {
    (<any>window).onYouTubeIframeAPIReady = () => {
      this.player = new (<any>window).YT.Player('ytplayer', {
        height: '100%',
        width: '100%',
        videoId: 'YourVideoId',
        playerVars: {'autoplay': 1, 'rel': 0, 'controls': 2},
        events: {
          'onReady': () => {
          },
          'onStateChange': () => {
          }
        }
      });
    };
  }

您还可以将autoplay 设置为0，这样它就不会在加载时播放。

现在我们在组件级别有了this.player，您可以进行其他操作，例如：

暂停：this.player.pauseVideo();，
加载其他视频 this.player.loadVideoById('someOtherVideoId') etc...

【讨论】：

【解决方案2】：

从 'youtube-player' 导入 YouTubePlayer；返回找不到模块“youtube-player”

您尝试使用的库 youtube-player 与您正在导入的库整体类型定义不同：https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/youtube/youtube.d.ts（这是 official youtube library 的类型类型定义）

修复

您可以在vendor.d.ts 中轻松创建自己的声明：

declare module 'youtube-player' {
 var foo:any;
 export = foo;
}

而且你不会比使用纯 JavaScript 更糟糕。

这里有介绍：https://basarat.gitbooks.io/typescript/content/docs/types/migrating.html#

【讨论】：

感谢@basarat，我是 Typescript 的新手，为复杂的 npm 模块编写自己的 typescript 定义似乎相当困难。你能提供一个真实的例子吗？还是参考现有定义？

【解决方案3】：

我也有这个问题。就像 basarat 所说，youtube.d.ts 类型定义不适用于 youtube-player 包。

我听从了 basarat 的建议，在我的 typings 文件夹中创建了一个 vendor.d.ts 并添加了定义（typings/vendor.d.ts）：

declare module 'youtube-player' {
    var YouTubePlayer: any;
    export = YouTubePlayer;
}

以上内容还不足以让它正常工作，我还需要更进一步。我使用了不同的导入语句最终让它工作（MyController.ts）：

import * as YouTubePlayer from 'youtube-player';

export class MyController {
    constructor() {
        let player = YouTubePlayer('playerid');
        player.loadVideoById('M7lc1UVf-VE');
        player.playVideo();
    }
}

【讨论】：

我试过这个，但收到类似于“TS2304 name 'YouTubePlayer' cannot be found”的错误。你有什么想法为什么它不起作用？我遵循了完全相同的步骤。

【解决方案4】：

试试https://github.com/orizens/ng2-youtube-player！它是用 ng2/ts 编写的，可能支持您的需求。

【讨论】：

重要提示：它不能免费用于商业用途！

修复

更多