视频流，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';
}

视频流，Angular：IOS 上的 HLS

Video Streaming, Angular: HLS on IOS

http-live-streaming

ios

angular