Video.js and Angular integration

Here’s a basic Angular player implementation.

It just instantiates the Video.js player on OnInit and destroys it on OnDestroy.

  1. // vjs-player.component.ts
  2. import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
  3. import videojs from 'video.js';
  5. @Component({
  6.   selector: 'app-vjs-player',
  7.   template: `
  8.     <video #target class="video-js" controls muted playsinline preload="none"></video>
  9.   `,
  10.   styleUrls: [
  11.     './vjs-player.component.css'
  12.   ],
  13.   encapsulation: ViewEncapsulation.None,
  14. })
  15. export class VjsPlayerComponent implements OnInit, OnDestroy {
  16.   @ViewChild('target', {static: true}) target: ElementRef;
  17.   // see options: https://github.com/videojs/video.js/blob/maintutorial-options.html
  18.   @Input() options: {
  19.       fluid: boolean,
  20.       aspectRatio: string,
  21.       autoplay: boolean,
  22.       sources: {
  23.           src: string,
  24.           type: string,
  25.       }[],
  26.   };
  27.   player: videojs.Player;
  29.   constructor(
  30.     private elementRef: ElementRef,
  31.   ) { }
  33.   ngOnInit() {
  34.     // instantiate Video.js
  35.     this.player = videojs(this.target.nativeElement, this.options, function onPlayerReady() {
  36.       console.log('onPlayerReady', this);
  37.     });
  38.   }
  40.   ngOnDestroy() {
  41.     // destroy player
  42.     if (this.player) {
  43.       this.player.dispose();
  44.     }
  45.   }
  46. }

Don’t forget to include the Video.js CSS, located at video.js/dist/video-js.css.

  1. /* vjs-player.component.css */
  2. @import '~video.js/dist/video-js.css';

You can then use it like this.

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