typescript - 将 YouTube iframe API 与 Angular2 和 Typescript 一起使用

Question

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

我尝试通过 npm 安装几个 YouTube 包装器(例如:youtube-player)，并添加了 Type definitions for YouTube ，并在 app.ts 中引用:

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

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

我已经 fork 了 Angular2 preboot/Webpack初学者，我的源代码库是 here

Answer 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') 等等...