Video.js with Angular 6

Question

I want to implement Video.js in my angular 6 application, catch current play time and video duration, found @types/video.js library but not sure how to use it properly, any suggestions ?

Answer 1

First, install videojs through npm

npm --install video.js --save

Add videojs styles, js to angular.json

Under styles :

"node_modules/video.js/dist/video-js.min.css"

Under scripts :

"node_modules/video.js/dist/video.min.js"

Add the html tag

<video id="video-player" preload="metadata" class="video-js vjs-default-skin"></video>

then init the videojs player in your component like so

first declare videojs in the desired component

declare var videojs : any ;

And within component itself declare a variable for the player and the link to be dynamic

player: any ;

videoLink : string : 'Your-video-Link' ;

Inside ngAfterViewInit add this code

**** Not in OnInit !

this.player = videojs(document.getElementById('video-player'), {
      sources: {
        src: videoLink,
        type: "video/mp4"
      },
 }, function onPlayerReady() {

// Here where the magic happens :D 

this.on('loadedmetadata', () => {
   
      });
this.on('timeupdate', () => {
   
      });
this.on('loadeddata', () => {
   
      });
})

Check API official documents for more about the events you may want to monitor/use

https://docs.videojs.com/docs/api/player.html

Good luck !