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

Question

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

我尝试通过npm安装几个YouTube包装器(例如:youtube-player),并添加了YouTube的类型定义,并在app.ts中引用:

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

但导入时仍然出错,例如:import YouTubePlayer from 'youtube-player';returnCannot find module 'youtube-player'.

我已经分叉了Angular2 预启动/ Webpack启动器,我的源代码就在这里

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.)在youYouTubeIframeAPIReady()函数中注册你的回调,Youtube API当页面完成下载播放器API的JavaScript时,它将调用.

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

Answer 2

从'youtube-player'导入YouTubePlayer; 返回无法找到模块'youtube-player'

您尝试使用youtube-player的库与要导入的库完整类型定义不同:https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/youtube/youtube.d.ts(这是类型类型定义)对于官方youtube库)

固定

您可以在以下位置轻松创建自己的声明vendor.d.ts:

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

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

更多

这包括:https://basarat.gitbooks.io/typescript/content/docs/types/migrating.html#