視頻流，Angular：IOS 上的 HLS

Question

我正在嘗試使用 HLS.js 實現一個功能以在 IOS 上實現視頻流。 我檢查了該庫不支持 HLS 的文檔，但可以回退到本機<video>標記來播放m3u8視頻。 我不知道這應該如何工作。 非常感謝任何幫助。

部署在netlify上的應用： https://angular-hls-player.netlify.app/

這是我迄今為止在 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();
  }
}

html 部分：

<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

我已經弄清楚了，因為videoElement需要分配一個ElementRef或一個nativeElement才能訪問 DOM 元素。 所以：

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';
}