CODEWITHSUNDEEP
typescriptangularwebpackyoutube-iframe-api
Edan
Edan

Reputation: 603

Use YouTube iframe API with Angular2 and Typescript

How do I construct a YT.Player object and access its properties getCurrentTime() within an Angular2 Component using Typescript?

I have tried installing several YouTube wrappers via npm, (eg: youtube-player), and added Type definitions for YouTube, with a reference in app.ts:

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

but I still get an error when importing, eg: import YouTubePlayer from 'youtube-player'; returns Cannot find module 'youtube-player'.

I've forked the Angular2 preboot/Webpack starter, my source repo is here

Upvotes: 5

Views: 11919

Answers (4)

LeOn - Han Li
LeOn - Han Li

Reputation: 10194

You should not need any wrapper, including it yourself is not that much.

1.) include the youtube iFrame API via script tag. 

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.) register your callback inside onYouTubeIframeAPIReady() function which the Youtube API will call when the page has finished downloading the JavaScript for the player 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': () => {
          }
        }
      });
    };
  }

You can also set autoplay to 0 so it does not play on load.

Now we have the this.player on the component level, and you can do other manipulations like:

  • pause: this.player.pauseVideo();,
  • load other video this.player.loadVideoById('someOtherVideoId') etc...

Upvotes: 9

baskin
baskin

Reputation: 1653

Give https://github.com/orizens/ng2-youtube-player a try! Its written in ng2/ts and may support your needs.

Upvotes: 1

richardr
richardr

Reputation: 5182

I also had this problem. Like basarat says, the youtube.d.ts typings definitions are not for the youtube-player package.

I followed basarat's advise and created a vendor.d.ts in my typings folder and added the definition (typings/vendor.d.ts):

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

The above was not sufficient to get it working though, I needed one further step. I used a different import statement to finally get it to work (MyController.ts):

import * as YouTubePlayer from 'youtube-player';

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

Upvotes: 4

basarat
basarat

Reputation: 275819

import YouTubePlayer from 'youtube-player'; returns Cannot find module 'youtube-player'

The library you are trying to use youtube-player is not the same as the library whole type definitions you are importing : https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/youtube/youtube.d.ts (which is type type definition for the official youtube library)

Fix

You can create a declaration your self quite easily in a vendor.d.ts: 

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

And you would in no way be worse off than using pure JavaScript.

More

This is covered here : https://basarat.gitbooks.io/typescript/content/docs/types/migrating.html#

Upvotes: 5

Related Questions