Angular Youtube Player Component
This is an Angular component based on youtube player iframe api.
Angular Support
Compatible with Angular v14, versions follow Angular's version to easily reflect compatibility. Starting with Angular v14.2.6.
LICENSE
This fork project is free to use, released under MIT license.
Installation
npm install @hercilio/ngx-youtube-player
Supported API
Currently supported attributes:
Inputs
- height (number) – The width of the video player. The default value is 640.
- width (number) – The height of the video player. The default value is 390.
- videoId (string) – The YouTube video ID that identifies the video that the player will load.
- playerVars (object) – The object's properties identify player parameters that can be used to customize the player.
-
events (object) – The object's properties identify the events that the API fires and the functions (event listeners) that the API will call when those events occur. In the example, the constructor indicates that the
onPlayerReady
function will execute when theonReady
event fires and that theonPlayerStateChange
function will execute when theonStateChange
event fires.
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
Player object and functions
- videoTitle
- playerInfo
- addCueRange()
- clearVideo()
- cuePlaylist()
- cueVideoById()
- cueVideoByUrl()
- getApiInterface()
- getAvailablePlaybackRates()
- getAvailableQualityLevels()
- getCurrentTime()
- getDebugText()
- getDuration()
- getMediaReferenceTime()
- getPlaybackQuality()
- getPlaybackRate()
- getPlayerMode()
- getPlayerState()
- getPlaylist()
- getPlaylistId()
- getPlaylistIndex()
- getSize()
- getSphericalProperties()
- getVideoBytesLoaded()
- getVideoBytesTotal()
- getVideoData()
- getVideoLoadedFraction()
- getVideoStartBytes()
- getVideoUrl()
- getVolume()
- hideVideoInfo()
- isMuted()
- isVideoInfoVisible()
- loadModule()
- loadPlaylist()
- loadVideoById()
- loadVideoByUrl()
- logImaAdEvent()
- mute()
- nextVideo()
- pauseVideo()
- playVideo()
- playVideoAt()
- removeCueRange()
- removeEventListener()
- seekTo()
- setLoop()
- setOption()
- setPlaybackQuality()
- setPlaybackRate()
- setShuffle()
- setSphericalProperties()
- setVolume()
- showVideoInfo()
- stopVideo()
- unMute()
- unloadModule()
Usage
First, import the YoutubePlayerModule to your module:
import { NgxYoutubePlayerModule } from 'ngx-youtube-player';
...
@NgModule({
...
imports: [..., NgxYoutubePlayerModule.forRoot()],
...
})
export class 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
width="100%"
height="400"
[videoId]="id"
[playerVars]="{ modestbranding: 1, controls: 1, disablekb: 1, rel: 0, showinfo: 0 }"
(ready)="playerReady($event)"
(change)="onVideoChange($event)">
</youtube-player>
`,
})
export class AppComponent {
player: YT.Player;
private id: string = "L-odCf4MfJc";
playerReady(player) {
this.player = player;
console.log("player instance", player);
}
onVideoChange(event) {
console.log("player state", event.data);
}
}