Yt-Player-Angular

This package is an Angular wrapper for YouTube Player API.

Lets you embed Youtube video and control it ( play/pause/seek and many more ) programatically.

Demo

Go there to see it working.

Installation

``
npm install yt-player-angular
`

Basic Usage

Add YtPlayerAngularModule to imports array in your app.module.ts:

`
import { YtPlayerAngularModule } from 'yt-player-angular';

@NgModule({
imports: [
//...
YtPlayerAngularModule
]
...
`

Then add selector yt-player to AppComponent's template (app.component.html):

`

`

At this point you should be able to see the video.

Controlling the player

YtPlayerService lets you control the player. Go to app.component.ts and add next import at the top of the file:

`
import { YtPlayerService, PlayerOptions } from 'yt-player-angular';
`

inject YtPlayerService in the constructor:

`
constructor( private ytPlayerService: YtPlayerService ) { }
`

Now you can start the video by calling

`
this.ytPlayerService.play();
`

API

$3

Selector yt-player accepts two input properties (first one is mandatory, second optional):

`
[videoId]
[options]
`

videoId accepts the id of the video you want to play. To specify options, PlayerOptions interface can be used. Options object might contain following properties (all of them are optional):

`
- width?: number;
- heiht?: number;
- autoplay?: boolean; // Default false
- captions?: boolean | string; // two-letter language code or false to disable it
- controls?: boolean; // video player controls visible. Default true
- keyboard?: boolean; // keyboard control. Default true
- fullscreen?: boolean; // fullscreen button visible. Default true
- annotations?: boolean; // video annotations. Default true
- modestBranding?: boolean; // YT player with no YT logo. Default false
- related?: boolean; // related videos at the end. Default false
- info?: boolean; // Video title and uploader visible. Default true
- timeupdateFrequency?: number; // time between video progress updates. Default 1000 ms
- playsInline?: boolean; // inline or fullscreen in an HTML5 player on iOS. Default true
`

Note that modern browsers might block autoplaying multimedia, explanation in MDN.

$3

Selector yt-player contains output property stateChange. In app.component.html add:

`

`

and then add handler method in app.component.ts

`
public onStateChange(stateChange: StateChange): void {
console.log( Type: ${StateChangeType[stateChange.type]} || Payload: ${stateChange.payload});
}
`

It emits the same values as stateChange$ stream described in Streams section of readme. To get data about changes either component's output or services stream can be used.

$3

YtPlayerService contains the following methods:

``
- play(): void
- pause(): void
- stop(): void
- getCurrentTime(): number
- seek(seconds: number): void // go to specific second in video. Does not stop playback
- setVolume(value: number): void // value between 0 - 100
- getVolume(): number
- mute(): void
- unMute(): void
- isMuted(): boolean
- setSize(width: number, height: number): void // width && heiht in px
- setPlaybackRate(rate: number): void // playback speed rate: 0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2
- getPlaybackRate(): number
- getAvailablePlaybackRates(): number[]
- setPlaybackQuality(sugestedQuality: PlaybackQuality): void
- getDuration(): number
- getBufferingProgress(): number
- ​getState(): PlayerState
`

$3

YtPlayerService exposes the following stream:

`
stateChange$: Observable
`

It broadcasts objects of type StateChange that contains following properties:

`
type: StateChangeType;
payload?: any;
`

StateChangeType is an enum that lists information about type of broadcasted change:

`
Error, // StateChange with payload containing error message: string
Unplayable, // StateChange with payload containing video id: string
Unstarted,
Ended,
Started,
PlaybackProgress,
Paused,
Buffering,
Cued,
QualityChanged, // StateChange with payload containing applied quality: PlaybackQuality
RateChanged // StateChange with payload containing applied rate: number
`

$3

If used in strict mode, you might need to install typings for 'Events'

`
npm install @types/events
``

$3

- removed yt-player and loadScript2 dependencies,
- fix of warning about optimization bailouts for CommonJS modules,
- fix of strict mode issue raised by RobotCherries