Install

npm i ngx-youtube-player

Angular Youtube Player Component

This is an Angular (5, 6) component based on youtube player iframe api. This component came out as a result of the open source project Echoes Player - an alternative player for watching and listening to media from youtube.

Angular Support

versions now follow Angular's version to easily reflect compatibility. Meaning, for Angular 6, use ngx-youtube-player @ ^6.0.0

For Angular 5 - please use [email protected] For Angular 4 version only - please use [email protected]

LICENSE

Angular Youtube Component includes 2 optional licenses:

1. Free - for open source projects - includes standard play features, released under MIT license.
2. Commercial (Enterprize) - you must purchase a license, includes the following features:

• standard play features
• playlist support (without ads)
• auto play next track in playlist
• upgrades for 1 year
• online support for 1 year
• License types:
  • app developer ($200) - a license for each developer working with this component for one product only
  • platform developer ($550) - a license for each developer developer working with component for all products in one company

To purchase a license, please contact at http://orizens.com/contact

Installation

npm install ngx-youtube-player

Supported API

Currently supported attributes:

Inputs

• height (number) - optional height for the player
• width (number) - optional width for the player
• videoId (string) - will load the specified video by id

outputs

• ready (YT.Player) - implements youtube's player onReady event -> sends a the new created yt player instance
• change - a state change event channeling the youtube's player instance state event object

DEMO

A Live Demo In StackBlitz

Usage

First, import the YoutubePlayerModule to your module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { YoutubePlayerModule } from 'ngx-youtube-player';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app';

@NgModule({
  imports: [BrowserModule, YoutubePlayerModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

Next, use the youtube-player component. A Unique Id will be created for this player's instance:

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: `
		<youtube-player
      [videoId]="id"
      (ready)="savePlayer($event)"
      (change)="onStateChange($event)"
    ></youtube-player>
	`
})
export class AppComponent {
  player: YT.Player;
  private id: string = 'qDuKsiwS5xw';

  savePlayer(player) {
    this.player = player;
    console.log('player instance', player);
  }
  onStateChange(event) {
    console.log('player state', event.data);
  }
}

Testing

To start developing tdd/bdd style: npm run dev This will: compile ts files, watch for changes and start the test task. Whenever a ts file is changed, it will rerun the tests.

Travis-ci is integrated

Showcase Examples

• Echoes Player (github repo for echoes player)