I have created an application with JHipster (Spring Boot + Angular) and I would like to play some mp4 videos in a browser.
However, it always ends in downloading the full file before playing it, even though I would like that the video starts as soon as possible and then continue to download in the background.
My code in the back-end:
@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);
}
Front-end:
<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']);
});
}
Do you see the issue?
There are different questions about how to stream a video, and I have tried all the various options (e.g. with and without autoplay, with and without preload, I have checked the headers, etc.)
blob:http://localhost:9000/1fdb4297-738e-412c-b070-bc53fd5dd343
, is it bad?