-2

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.)

8
  • Very good suggestion @SotiriosDelimanolis , I missed that question. However, I have my metadata at the beginning of the file and the audio is interleaved with the video (I checked the first one with AtomicParsley and the second with ffprobe). So, it should be ok Commented Aug 2 at 17:52
  • not sure what your angular code is doing there, but make sure the src isn't processed through angular... (just a URL to the resource/endpoint) Commented Aug 2 at 19:07
  • @browsermator It returns something like: blob:http://localhost:9000/1fdb4297-738e-412c-b070-bc53fd5dd343, is it bad? Commented Aug 3 at 17:50
  • probably... seems like you should be returning a file. Avoid any JS processing here... the src should be to an endpoint that returns a file. You could also make the SRC go directly to a file, but it depends on whether you want to allow deep-links or want to authenticate the user before serving the file. Commented Aug 5 at 16:48

1 Answer 1

0

Does this simplified code show any playback (without needing a full download first)?

//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);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.