0.0.2 • Published 5 years ago
ng-youtube-iframe v0.0.2
Angular Tippy.JS Directive & Service
This is a wrapper around the Tippy.js. Easily create tooltips using a directive or utilize the service
Installation
Install Using NPM
npm install --save angular-tippy
Adding Module
import { AppComponent } from './app.component';
import { AngularYoutubePlayerModule } from 'angular-youtube-player';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AngularYoutubePlayerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Usage
*.component.html
<ng-youtube-player
(stateChange)="handleStateChange($event)"
[config]="config">
</ng-youtube-player>
*.component.ts
export class AppComponent {
config: PlayerConfig;
constructor() {
this.config = {
videoId: 'eP4j6GF6iM8',
autoPlay: false
};
}
handleStateChange(event) {
// Do Something when state changes i.e pause / play
}
}
API
interface PlayerConfig {
videoId?: string;
width?: string;
height?: string;
startSeconds?: number;
autoPlay?: boolean;
mediaContentUrl?: string;
endSeconds?: number;
suggestedQuality?: 'large' | 'medium' | 'small';
}
interface AngularYoutubePlayerComponent {
@ViewChild('player') private player: ElementRef;
@Input() config: PlayerConfig;
@Input() videosList: string[];
@Output() ready: EventEmitter;
@Output() error: EventEmitter;
@Output() stateChange: EventEmitter;
@Output() playbackRateChange: EventEmitter;;
@Output() playbackQualityChange: EventEmitter;
}
PlayerConfig API
Property Name,Property Type,Description | |||||
VideoId,String,The id of the video that you would like to embed | |||||
Width,String,"The width of the video player, i.e '300px'" | |||||
Height,String,"The height of the video player, i.e '300px'" | |||||
startSeconds,Number,The start time in seconds | |||||
endSeconds,Number,The end time in seconds | |||||
autoPlayer,Boolean,If the video should auto play the video | |||||
mediaContentUrl,String,The url of the video you would like to embed | |||||
suggestQuality,'large' | 'small' | 'medium' | 'hd720' | 'highres' | default,Specfiy the quality of the video |
AngularYoutubePlayerComponent API
Property,Type,Description |
config,PlayerConfig,Configuration of the video player |
videoList,string[],Array of video urls or ids |
ready,EventEmitter,Notify when the video is ready |
error,EventEmitter,Notify when an error has occured |
stateChange,EventEmitter,Notify when the state of the player has changed |
playbackRateChange,EventEmitter,Notify when the playback rate has changed |
playbackQualityChange,EventEmitter,Notify when the playback quality has changed |
License
Apache License Version 2.0, January 2004
0.0.2
5 years ago