Video Streaming, Angular: HLS on IOS

Question

I'm trying to implement a feature to achieve video streaming on IOS, using HLS.js. I've checked the documentation that the library doesn't support HLS, but could fall back to the native <video> tag to play the m3u8 video. I have no idea how this is supposed to work. Any help is highly appreciated.

The application deployed on netlify: https://angular-hls-player.netlify.app/

This is what I've done so far in Angular:

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import Hls from 'hls.js';

@Component({
  selector: 'app-video-player',
  templateUrl: './video-player.component.html',
  styleUrls: ['./video-player.component.scss']
})
export class VideoPlayerComponent implements AfterViewInit {
  @ViewChild('videoPlayer') videoElementRef!: ElementRef;
  @ViewChild('play') buttonElementRef!: ElementRef;

  videoElement!: HTMLVideoElement;
  buttonElement!: HTMLButtonElement;

  constructor() { }

  ngAfterViewInit(): void {
    if (Hls.isSupported()) {
      console.log("Video streaming supported by HLSjs")
      this.videoElement = this.videoElementRef?.nativeElement;

      var hls = new Hls();
      hls.loadSource('https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8');
      hls.attachMedia(this.videoElement);
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        this.videoElement.play();
      });
    }
    // the video is supposed to be playing on IOS devices
    else if (this.videoElement.canPlayType('application/vnd.apple.mpegurl')) {
      alert("The video is on the iPhone or iPad environment!")
      this.videoElement.src = 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8';
      this.videoElement.addEventListener('canplay', () => {
        alert("Fire the canplay event");
        this.startPlaying();
      })
    }
  }

  startPlaying() {
    this.videoElement.play();
  }
}

The html part:

<div #videoContainer id="videoContainer">
    <h1>HLS JS Player</h1>
    <video #videoPlayer id="videoPlayer" width="352" height="198" controls autoplay loop muted playsinline></video>
    <button #play id="play" hidden>Loading</button>
</div>

Answer 1

I've figured it out as the videoElement needs to be assigned either an ElementRef or a nativeElement to access the DOM element. Therefore:

else if (this.videoElement.canPlayType('application/vnd.apple.mpegurl')) {
   this.videoElement = this.videoElementRef?.nativeElement;
   this.videoElement.src = 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8';
}