来自 blob 的 Angular 7 视频流问题（不稳定）答案

【问题标题】：Issue with Angular 7 video streaming from blob (flaky)来自 blob 的 Angular 7 视频流问题（不稳定）
【发布时间】：2019-04-03 03:03:46
【问题描述】：

我正在开发一个离线应用程序，该应用程序在 indexeddb 中存储了一个视频，并且我正在从存储的 blob 生成一个 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 上的网络选项卡不起作用时的快照：

这是工作时的快照：

【问题讨论】：

标签： angular html video video-streaming blob

【解决方案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();
  }

我的播放器将在 kiosk 中运行，此时这应该不是问题。我认为我的参与度很低，因为我一直在刷新页面。这个 chrome 页面确实有助于找到低参与度：chrome://media-engagement/

【讨论】：