Spring boot + Angular 应用程序无法流式传输视频

Question

我已经使用 JHipster（Spring Boot + Angular）创建了一个应用程序，我想在浏览器中播放一些 mp4 视频。

但是，它总是在播放之前下载完整文件，即使我希望视频尽快开始，然后继续在后台下载。

我在后端的代码：

@GetMapping("/{id}")
    public ResponseEntity<FileSystemResource> getVideo(@PathVariable("id") Long id, @RequestHeader HttpHeaders headers,
                                                       Principal principal) throws IOException {
        Optional<Video> video = videoService.findOne(id, user);

        if (video.isEmpty()) {
            log.debug("Video not found");
            return new ResponseEntity<>(HttpStatus.NOT_FOUND);
        }

        FileSystemResource fileSystemResource = new FileSystemResource(video.orElseThrow().getFileLocation());

        List<HttpRange> httpRanges = headers.getRange();
        if (httpRanges.isEmpty()) {
            return ResponseEntity.ok()
                .header(HttpHeaders.CONTENT_TYPE, "video/mp4")
                .body(fileSystemResource);
        }

        HttpRange httpRange = httpRanges.get(0);
        long fileLength = fileSystemResource.contentLength();
        long start = httpRange.getRangeStart(fileLength);
        long end = httpRange.getRangeEnd(fileLength);

        HttpHeaders responseHeaders = new HttpHeaders();
        responseHeaders.set(HttpHeaders.ACCEPT_RANGES, "bytes");
        responseHeaders.set(HttpHeaders.CONTENT_LENGTH, String.valueOf((end - start) + 1));
        responseHeaders.set(HttpHeaders.CONTENT_RANGE, "bytes " + start + "-" + end + "/" + fileLength);

        return ResponseEntity.status(HttpStatus.PARTIAL_CONTENT)
            .headers(responseHeaders)
            .body(fileSystemResource);
    }

前端：

<video #videoPlayer controls controlslist="nodownload noplaybackrate" width="800" height="800" preload="metadata" volume>
    <source [src]="videoUrl()" type="video/mp4" />
    Your browser does not support this video file.
  </video>

videoUrl = signal('');

  constructor() {
    this.activatedRoute.data.pipe(takeUntilDestroyed()).subscribe(data => {
      this.videoUrl.set(data['video']);
    });

}

你看到问题了吗？

关于如何流式传输视频存在不同的问题，我已经尝试了所有各种选项（例如，带或不带自动播放、带或不带预加载、我检查了标题等）

Answer 1

这个简化的代码是否显示任何播放（无需先完整下载）？

//HttpRange httpRange = httpRanges.get(0);
long fileLength = fileSystemResource.contentLength();
long start = 0;
long end = (fileLength - 1);

HttpHeaders responseHeaders = new HttpHeaders();
responseHeaders.set(HttpHeaders.ACCEPT_RANGES, "bytes");
responseHeaders.set(HttpHeaders.CONTENT_LENGTH, String.valueOf((end - start) + 1));
responseHeaders.set(HttpHeaders.CONTENT_RANGE, "bytes " + start + "-" + end + "/" + fileLength);