更多

Question

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

我已尝试通过npm安装多个YouTube包装器（例如：youtube-player），并在app.ts中添加了Type definitions for YouTube和一个引用：

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

但导入时仍然出错，例如：import YouTubePlayer from 'youtube-player';返回Cannot find module 'youtube-player'.

我已经分叉了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()函数中注册您的回调，Youtube API将在页面下载完播放器的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')等...

Answer 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#

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

以上不足以让它工作，我还需要一步。我使用了一个不同的import语句来最终使它工作（MyController.ts）：

import * as YouTubePlayer from 'youtube-player';

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

Answer 4

试试https://github.com/orizens/ng2-youtube-player！它以ng2 / ts编写，可能会满足您的需求。

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

4 个答案:

修复

更多