import { Component , ViewChild } from '@angular/core' ; import { PlyrComponent } from 'ngx-plyr' ; import * as Plyr from 'plyr' ; @ Component ( { selector : 'app-root' , templateUrl : './app.component.html' , styleUrls : [ './app.component.scss' ] } ) export class AppComponent { @ ViewChild ( PlyrComponent , { static : true } ) plyr : PlyrComponent ; player : Plyr ; audioSources = [ { src : 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3' , type : 'audio/mp3' , } , { src : 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg' , type : 'audio/ogg' , } , ] ; youtubeSources = [ { src : 'https://youtube.com/watch?v=bTqVqk7FSmY' , provider : 'youtube' , } , ] ; vimeoSources = [ { src : 'https://vimeo.com/76979871' , provider : 'vimeo' , } , ] ; videoSources : Plyr . Source [ ] = [ { src : 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4' , type : 'video/mp4' , size : 576 , } , { src : 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4' , type : 'video/mp4' , size : 720 , } , { src : 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4' , type : 'video/mp4' , size : 1080 , } , { src : 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4' , type : 'video/mp4' , size : 1440 , } , ] ; poster = 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg' ; tracks = [ { kind : 'captions' , label : 'English' , srclang : 'en' , src : 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt' , default : true , } , { kind : 'captions' , label : 'French' , srclang : 'fr' , src : 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt' , } ] ; played ( event ) { console . log ( 'played' , event ) ; } play ( ) { this . player . play ( ) ; } pause ( ) { this . player . pause ( ) ; } stop ( ) { this . player . stop ( ) ; } }