videojs example angular

1// vjs-player.component.ts
2import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
3import videojs from 'video.js';
4
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})
15export 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;
28
29  constructor(
30    private elementRef: ElementRef,
31  ) { }
32
33  ngOnInit() {
34    // instantiate Video.js
35    this.player = videojs(this.target.nativeElement, this.options, function onPlayerReady() {
36      console.log('onPlayerReady', this);
37    });
38  }
39
40  ngOnDestroy() {
41    // destroy player
42    if (this.player) {
43      this.player.dispose();
44    }
45  }
46}