Implementing the Plyr js player in an Angular version 16 project
Step 1 - Begin by installing the plyr package using the command line
npm i plyr
Step 2 - Include the plyr css and js files in your angular.json configuration under styles and scripts respectively
...
"styles": [
"src/styles.scss",
"node_modules/plyr/dist/plyr.css"
],
"scripts": [
"node_modules/plyr/dist/plyr.js"
]
...
Step 3 - Declare the Plyr package in your component's Typescript file.
import { Component } from '@angular/core';
declare var Plyr: any;
@Component({
....
})
export class AppComponent {
player: any;
ngAfterViewInit() {
this.player = new Plyr('#video_player', {
youtube: {
rel: 0,
showinfo: 0,
iv_load_policy: 3,
modestbranding: 1,
customControls: true,
noCookie: true
}
});
this.player.source = {
type: 'video',
sources: [
{
src: 'https://www.youtube.com/watch?v=slAbFqZonT0',
provider: 'youtube'
},
]
};
this.player.on('ended', () => {
this.player.stop()
});
}
Step 4 - Insert the Html player content into the html component file
<div class="container">
<video id="video_player"></video>
</div>