CODEWITHSUNDEEP
angularvideo.js
Nevermind23
Nevermind23

Reputation: 395

Video.js with Angular 6

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 ?

Upvotes: 5

Views: 14602

Answers (4)

Nour
Nour

Reputation: 1497

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 !

Upvotes: 7

Darrow Hartman
Darrow Hartman

Reputation: 4383

This is an actually working answer

I tried a few of the other solutions, they all seem to be wrong. Video.js has an example on their website for angular.

First initialize a component (this command works if you have angular cli installed):ng g c videojs

And then this npm command: npm install --save-dev video.js

Then inside the videojs ts file add this code:

// videojs.ts component
import { Component, ElementRef, Input, OnDestroy, 
OnInit, ViewChild, ViewEncapsulation } from 
'@angular/core';
import videojs from 'video.js';

@Component({
  selector: 'app-videojs',
  templateUrl: './videojs.component.html',
  styleUrls: ['./videojs.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class VjsPlayerComponent implements OnInit, 
OnDestroy {
  @ViewChild('target', {static: true}) target: 
ElementRef;
  // see options: 
https://github.com/videojs/video.js/blob/maintutorial- 
 options.html
  @Input() options: {
      fluid: boolean,
      aspectRatio: string,
      autoplay: boolean,
      sources: {
          src: string,
          type: string,
      }[],
  };
  player: videojs.Player;

  constructor(
    private elementRef: ElementRef,
  ) { }

  ngOnInit() {
    // instantiate Video.js
    this.player = videojs(this.target.nativeElement, 
this.options, function onPlayerReady() {
      console.log('onPlayerReady', this);
    });
  }

  ngOnDestroy() {
    // destroy player
    if (this.player) {
      this.player.dispose();
    }
  }
}

In your HTML file add this:

    <video #target class="video-js" controls muted playsinline preload="none"></video>

Then add this to the css:

@import '~video.js/dist/video-js.css';

Finally you can inject this component into anywhere you want:

  <app-videojs [options]="{ autoplay: true, controls:true, sources: [{ src: 'path to video', type: 'video/mp4' }]}"></app-videojs>

Remember to change "path to video" into whatever the path is to your video.

Also, in your app.module.ts file make sure you have the component imported as a declaration and entryComponent so it can be injected into other components.

I want to be clear that this is not my original code, this tutorial comes from videojs's website. Link here: https://docs.videojs.com/tutorial-angular.html

Upvotes: 0

Paul Cheriyan
Paul Cheriyan

Reputation: 658

implementation code link

code for current time 

 myPlayer.on('timeupdate', function() {
var currentTime = this.currentTime();
checkPopup(currentTime)});

Upvotes: 0

Chellappan வ
Chellappan வ

Reputation: 27293

The template code

<video *ngIf="url" id="video_{{idx}}"
     class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"
     controls preload="auto"  width="640" height="264">

    <source [src]="url" type="video/mp4" />

  </video>

For More Info Check This: https://www.arroyolabs.com/2017/03/angular-2-videojs-component/

Upvotes: 0

Related Questions