Javascript 使用HTML5播放器在angular 8中显示流视频

我需要在用户单击预览按钮时打开播放器模式，以便用户可以通过下载和流媒体观看选定的电影或歌曲

现在的问题是，我是否必须先下载文件，然后将其转换为安全地址，并将其置于

[src]

上，以便用户可以观看电影流，或者我将文件的直接地址从服务器传递到播放器以供下载和流式播放

我写了这段代码，但它没有显示任何东西

HTML:

<audio controls>
   <source [src]="fileSource" type="audio/mp3">
</audio>

TS:

fileSource:any；
ngOnInit（）：void{
if（typeof this.data.src=='number'）{
这是.getImageFromService（）；
}
}
createImageFromBlob（图像：Blob）：无效{
const reader=new FileReader（）；
reader.addEventListener（'load'，（）=>{
this.fileSource=reader.result；
}，假）；
如果（图像）{
reader.readAsDataURL（图像）；
}
}
getImageFromService（）：void{
this.isLoading=true；
this.postFileService.downloadFile（this.data.src）.subscribe（data=>{
此.createImageFromBlob（数据）；
this.isLoading=false；
}，错误=>{
this.isLoading=false；
console.log（错误）；
});
}
下载文件（id:编号）：可观察{
常量URL=`${this.appConfig.apidentpoint+'/PostFileContent/DownloadFile/'+id}`；
返回这个.http.get（URL，{responseType:'blob'}）；
}

您可以从源代码中的服务器传递直接地址。

我需要发送带有url的令牌。我如何解决这个问题？@kianousjdortaj在URL/cookies中使用令牌。这允许浏览器加载所需文件的部分，而不必在向用户显示文件之前下载整个文件（确保支持后面的

accept ranges

标题）end@Ferrybig请引导我more@Ferrybig我怎么能这样做呢？从“@angular/Http”导入{Http，Headers，Response}；getLoggedInUser（auth_-token）：可观察的{const-headers=new-headers（{'Content-Type'：'application/json'，'Authorization'：auth_-token}）返回这个。http.get（apirl，{headers:headers}）}您可以这样做，不要忘记在组件中调用和订阅。

 fileSource: any;

ngOnInit(): void {
if (typeof this.data.src === 'number') {
  this.getImageFromService();
  }
}

     createImageFromBlob(image: Blob): void {
    const reader = new FileReader();
    reader.addEventListener('load', () => {
      this.fileSource = reader.result;
    }, false);

    if (image) {
      reader.readAsDataURL(image);
    }
  }

  getImageFromService(): void {

    this.isLoading = true;
    this.postFileService.downloadFile(this.data.src).subscribe(data => {
      this.createImageFromBlob(data);
      this.isLoading = false;
    }, error => {
      this.isLoading = false;
      console.log(error);
    });
  }



downloadFile(id: number): Observable<Blob> {
    const URL = `${this.appConfig.apiEndpoint + '/PostFileContent/DownloadFile/' + id}`;

    return this.http.get(URL, { responseType: 'blob' });
}