我已经找到了解决方案，只是张贴在这里的情况下，如果有人需要在未来
在进一步阅读之前，请先看一下这里详细描述的问题，它帮助我了解了根本原因
https://github.com/video-dev/hls.js#embedding-hlsjs
如果您正在使用npm，则需要将Hls.js添加到angular. json中
您必须从videoPlayer组件中的hls.js导入Hls

import Hls from 'hls.js';

并且您需要更新ngAfterViewInit（）方法，如下所示

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

确保在ts文件中创建了HTMLVideoElement和元素引用

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

并且您的HTML视频标记需要使用如下引用进行更新

<video #videoPlayer autoplay controls playsinline>

祝你愉快!