Проблема с потоковым видео Angular 7 из блоба

Question

Я разрабатываю автономное приложение, в котором хранится видео в indexeddb, и я генерирую URL-адрес из сохраненного большого двоичного объекта:

const videoBlob = await this.storage.get<Blob>('some-video');
const url = URL.createObjectURL(videoBlob);

Затем я показываю видео в моем компоненте:

this.videoUrl = this.sanitizer.bypassSecurityTrustUrl(url);

Вот мой HTML:

<div id="container" *ngIf="videoUrl">
    <video [src]="videoUrl" autoplay="autoplay" loop="loop"></video>
</div>

Проблема

Иногда, когда видео загружается, видео показывает первый кадр, а затем останавливает потоковую передачу. Глядя на сетевой запрос, я вижу 206 запросов диапазона для файла, но видео не "загружается". Если я нажимаю F5, иногда он начинает нормально воспроизводиться, и я вижу, как загружаются запросы диапазона.

Это снимок моей вкладки сети в Chrome, когда она не работает:

И это снимок, когда он работает:

Answer 1

Что ж, оказалось, что причиной, по которой видео не воспроизводилось автоматически, была политика автозапуска видео в chrome: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Я исправил свой код следующим образом:

  let videoPlayer = document.querySelector('video');
  try {
    await videoPlayer.play();
  } catch (err) {
    this.logger.warn(`Couldn't play video with sound. Muting video and starting it.`, err);
    videoPlayer.muted = true;
    await videoPlayer.play();
  }

Мой игрок будет бегать в киоске, и это не должно быть проблемой в этот момент. Я думаю, что я получил низкую заинтересованность, потому что я продолжал обновлять страницу. Эта страница Chrome помогла найти низкий рейтинг вовлеченности: chrome: // media-engagement /