angular - 在页面播放视频的正确方法（从数据库上传视频数据 blob）

Question

我有 Angular 应用程序，它从服务器（从数据库）接收视频 blob 数据。用户将在页面上加载许多此类视频，这就是为什么我无法一次加载视频的所有数据（页面将按小时加载）。所有视频都在 <video src=""> 标签中。只有当用户想要播放它时，我才需要以某种方式上传每个视频的数据。

问题是每个 <video> 标签的 [src]="" 属性都是空的，因此没有视频数据（没有海报和控件被禁用）。用户无法按播放按钮上传视频数据。（preload 属性不起作用，因为视频没有 src）。我也无法点击 <video> 标签，因为它隐藏在控件下并且控件被禁用。

这是我如何从服务器获取 Angular 中的视频流（AppFile 是一个自定义应用程序类）：

public getVideoData(video: HTMLMediaElement, videoAppFile: AppFile): void {
  if (this.mode === 'message' && !video.src.length && video.paused) {
    let httpParams: HttpParams = new HttpParams();
    httpParams = httpParams.set('fileId', videoAppFile.id.toString());
    httpParams = httpParams.set('fileType', 'video');
    httpParams = httpParams.set('contentType', videoAppFile.type);

    this._httpClient.get('api/files/fileData', {
      params: httpParams,
      responseType: 'blob'
    }).subscribe(data => {
      let reader = new FileReader();
      reader.readAsDataURL(data);
      reader.onload = function (e) {
        video.src = e.target.result.toString();
      };
  });
}

后端是用 ASP.NET Core 编写的，它是 MVC，所以我不能直接在 [src] 属性中放置控制器的链接（如果我没记错的话）。Angular 尝试访问它不存在的路由，但不向服务器 MVC 控制器发出请求。

如何仅上传选定视频的 Blob 数据？用户应该点击哪里开始数据上传？

标签： angular