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

Usage

First, import the YoutubePlayerModule to your module:

import { NgModule } from [email protected]/core'; import { BrowserModule } from [email protected]/platform-browser'; import { YoutubePlayerModule } from 'ng2-youtube-player'; import { platformBrowserDynamic } from [email protected]/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 [email protected]/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 Ng2 Version ( github repo for echoes player )

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

分页:12
转载请注明
本文标题:ng2-youtube-player - an easy to use youtube component wrapped with angular 2
本站链接:http://www.codesec.net/view/482791.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(29)