Angular player hls video

Question

I want to find a video player that suport type .m3u8 and support subtitle (srt or vtt) for Angular. I found that vimejs have good support for .m3u8 type, but they not have support subtitle for .m3u8. So I have to find another solution. So is there any video player that fit my demand? It would be appreciated that you give me an example or live demo. Thanks a lots.

Answer 1

Actually using a JS library like a player has nothing to do with Angular. I have used plyr.io without any problem. Also there is an Angular binding of this lib here that I haven't used but worth a check. Here is a sample of how I use plyr

import {AfterViewInit, Component, Input} from '@angular/core';
import * as Plyr from 'plyr';
import {DomSanitizer} from '@angular/platform-browser';
import Hls from 'hls.js';

declare var window: any;

@Component({
  selector: 'video-player-component',
  templateUrl: './video-player.component.html',
  styleUrls: ['./video-player.component.scss'],
})
export class VideoPlayerComponent implements AfterViewInit {
  @Input() id;
  @Input() url;
  player;
  plyr;

  constructor(public sanitizer: DomSanitizer) {
  }

  ngAfterViewInit(): void {
    const video = document.getElementById('id');
    let addVideo = document.createElement('video');
    video.appendChild(addVideo);
    // For more options see: https://github.com/sampotts/plyr/#options
    const defaultOptions: any = {
      controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
      enabled: true,
      clickToPlay: true,
      ads: {
        enabled: true,
        tagUrl: 'YOUR_URL'
      },
    };

    if (Hls.isSupported()) {
      // For more Hls.js options, see https://github.com/dailymotion/hls.js
      const hls = new Hls();
      hls.attachMedia(addVideo);

      hls.on(Hls.Events.MEDIA_ATTACHED, () => {
        hls.loadSource(this.url);
        hls.on(Hls.Events.MANIFEST_PARSED, (event, data) => {
          window.hls = hls;
          // Transform available levels into an array of integers (height values).
          const availableQualities = hls.levels.map((l) => l.height);

          defaultOptions.quality = {
            default: availableQualities[availableQualities.length - 1],
            options: availableQualities,
            // this ensures Plyr to use Hls to update quality level
            // Ref: https://github.com/sampotts/plyr/blob/master/src/js/html5.js#L77
            forced: true,
            onChange: (e) => this.updateQuality(e),
          };

          // Initialize new Plyr player with quality options
          this.plyr = new Plyr(addVideo, defaultOptions);
        });
      });
    } else {
      // default options with no quality update in case Hls is not supported
      this.plyr = new Plyr(video, defaultOptions);
    }
  }

  updateQuality(newQuality): void {
    window.hls.levels.forEach((level, levelIndex) => {
      if (level.height === newQuality) {
        window.hls.currentLevel = levelIndex;
      }
    });
  }
}



    

Answer 2

You can use ngx-videogular it's open source and is a good choice for playing .m3u8 stream.

https://www.npmjs.com/package/@videogular/ngx-videogular?activeTab=readme