ngx videogular not playing vgHls stream on iOs browsers

Question

I am using ngx-videogular in one of my application to stream live media. It works perfect everywhere except the browsers in iPhone/iPad. I am using Hls.js along with ngx-videogular for streaming.

Is there anything else I need to consider to make it working on browsers (chrome/safari/firefox) in iOS (iPhone or iPad).

Thanks in advance

Answer 1

I have found the solution just posting it here in case if someone needs in the future

Before reading further please take a look about the issue described in detail here which helped me to understand the root cause

https://github.com/video-dev/hls.js#embedding-hlsjs

If you are using npm you need to add the Hls.js in angular.json

You have to import Hls from hls.js in you videoPlayer component

import Hls from 'hls.js';

and you need to update your ngAfterViewInit() method like below

ngAfterViewInit(): void {
    this.videoElement = this.videoElementRef?.nativeElement;
    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource('your media url');
      hls.attachMedia(this.videoElement);
      hls.on(Hls.Events.MANIFEST_PARSED, function () {
        this.videoElement.play();
      });
    }
    else if (this.videoElement.canPlayType('application/vnd.apple.mpegurl')) {
      this.videoElement.src = 'your media url';
    }
  }

Make sure you have the HTMLVideoElement and the element reference created in ts file

@ViewChild('videoPlayer') private videoElementRef: ElementRef;
videoElement!: HTMLVideoElement;

And your HTML video tag need to be updated with the reference like this

<video #videoPlayer autoplay controls playsinline>

Have a good day!