Angular 2 Youtube Player Component

This is an angular 2 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 2 Support

Updated to support Angular 2 - Final - 2.0.0

Installation npm install ng2-youtube-player --save-dev 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 Plnkr


First, import the YoutubePlayerModule to your module:

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { YoutubePlayerModule } from 'ng2-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',; } } 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 Ng2 Version ( github repo for echoes player )

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: player,youtube,event,import,angular,Player,AppComponent,will,instance,id,ng2
本文标题:ng2-youtube-player - an easy to use youtube component wrapped with angular 2

技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(141)