Чтение видео с angular, blob и createObjectURL

Question

Я пытаюсь прочитать видео. Я передаю свое видео с помощью приложения весенней загрузки, используя этот код:

@GetMapping("users/{idUser}/medias/{filename:.+}")
@ResponseBody
@PreAuthorize("hasRole('ROLE_USER') and #idUser == principal.user.id")
public ResponseEntity<Resource> serveFile(@PathVariable String filename, @PathVariable Long idUser) throws IOException {

    MimetypesFileTypeMap mimeTypesMap = new MimetypesFileTypeMap();
    Resource file = storageService.loadAsResource(filename, idUser);
    return ResponseEntity.ok()
            .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + file.getFilename() + "\"")
            .header("Access-Control-Expose-Headers", HttpHeaders.CONTENT_DISPOSITION)
            .header(HttpHeaders.CONTENT_TYPE, mimeTypesMap.getContentType(file.getFile()))
            .body(file);
}

, а функция loadAsResource из службы хранения:

 public Resource loadAsResource(String filename, Long idUser) {
     try {
         Path file = load(filename, idUser);
         Resource resource = new UrlResource(file.toUri());
         if (resource.exists() || resource.isReadable()) {
                return resource;
         }
         else {
                throw new StorageFileNotFoundException(
                        "Could not read file: " + filename);
            }
    }
    catch (MalformedURLException e) {
            throw new StorageFileNotFoundException("Could not read file: " + filename, e);
    }
}

Поскольку мое приложение весенней загрузки запрашивает токен для аутентификации, напрямую использующий путь на сервере к атрибуту sr c моего видео, не будет работать, поскольку токен носителя не будет указан в запросе. Поэтому я использую следующий метод:

Мой html выглядит следующим образом <sh-secured-video [src]="library.media.path"></sh-secured-video>

Sh -secured-video - это пользовательский компонент со следующими ts:

@Component({
  // tslint:disable-next-line: component-selector
  selector: 'sh-secured-video',
  templateUrl: './secured-video.component.html',
  styleUrls: ['./secured-video.component.scss']
})
export class SecuredVideoComponent implements OnInit, OnChanges, OnDestroy  {

  @Input() src: string;
  src$ = new BehaviorSubject(this.src);

  dataUrl$ = this.src$.pipe(
    switchMap(url => this.loadVideo(url))
  );

  constructor(private mediaService: MediaService) { }

  ngOnInit() { }

  ngOnChanges() {
    this.src$.next(this.src);
  }

  private loadVideo(url: string): Observable<any> {
    return this.mediaService.loadMedia(url);
  }
}

Функция loadMedia MediaService выглядит следующим образом:

@Injectable({
  providedIn: 'root'
})
export class MediaService {

  constructor(private http: HttpClient,
              private authService: AuthenticateService,
              private domSanitizer: DomSanitizer) { }

  loadMedia(url: string) {
    return this.http.get(url, { responseType: 'blob'}).pipe(map(e => this.domSanitizer.bypassSecurityTrustUrl(URL.createObjectURL(e))));
  }
}

А шаблон для sh -secured-video выглядит следующим образом:

<div class="video-container">
  <video width="320" height="240" controls>
      <source [attr.src]="dataUrl$ | async" 
              type="video/mp4">
      Your browser does not support the video tag.
  </video>
</div>

Но видео не воспроизводится при использовании этого метода. Когда я использую этот метод для отображения изображения, он прекрасно работает, но для видео он не воспроизводится. Может кто-нибудь сказать мне, что я делаю не так? Также я заметил, что если я выполняю video = document.querySelector ('video') в консоли, а затем выполняю video.play (), я могу слышать звук видео.

Заранее спасибо за любой ответ .