Javascript hls视频格式在angular 7中不起作用

我最近一直在播放hls格式的视频。我必须使用angular在前端显示hls视频，我做了一些研究，找到了hls.js来显示视频

我尝试了下面的代码，但仍然得到视频标签上的空白响应

我从过去4小时开始搜索。仍然没有找到合适的解决方案

html文件

<video id="active_video"></video>

index.html

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

打字脚本文件

var video = <HTMLVideoElement>document.getElementById('active_video');
    if (Hls.isSupported()) {
      var hls = new Hls();
      hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED, function () {
        video.play(); 
      });
    }
    else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
      video.addEventListener('loadedmetadata', function () {
        video.play();
      });
    }

var video=document.getElementById（'active_video'）；
如果（Hls.isSupported（））{
var hls=新的hls（）；
hls.loadSource（'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
附件媒体（视频）；
on（已解析hls.Events.MANIFEST，函数（）{
video.play（）；
});
}
else if（video.canPlayType（'application/vnd.apple.mpegur'））{
video.src=https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
video.addEventListener（'loadedmetadata'，函数（）{
video.play（）；
});
}

请让我知道我哪里出了问题，任何帮助都将不胜感激

---

提前谢谢

你试过了吗？@siddharthshah我试过了，但没用。你能试着在stackblitz上创建一个演示吗？你试过了吗？@siddharthshah我试过了，但没用。你能试着在stackblitz上创建一个演示吗