时间戳

首页 > 解决方案 > 使用 HTML5 播放器以角度 8 显示流视频

javascript - 使用 HTML5 播放器以角度 8 显示流视频

问题描述

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

现在的问题是，我是否必须先下载文件，然后将其转换为安全地址并放在上面，[src]以便用户可以观看电影流，或者我将文件从服务器直接传递到播放器以进行下载和流式传输？？？

我写了这段代码，但它没有告诉我任何东西。

HTML：

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

TS：

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

标签： javascriptangulartypescript

解决方案

您可以从源内部的服务器传递直接地址。

推荐阅读