HTML嵌入视频不在项目目录中答案

【问题标题】：HTML Embedding videos not in project directoryHTML嵌入视频不在项目目录中
【发布时间】：2018-09-28 00:16:57
【问题描述】：

我有一个需要嵌入视频（mp4、HTML5）的应用程序。问题是这些视频可以位于托管我的应用程序的服务器上的任何位置，而不仅仅是在应用程序的目录中。如果是这样的话，我的代码应该是这样的：

<video preload="auto" controls>
  <source src="assets/media/video.mp4" type="video/mp4">
</video>

在我的情况下，我的视频可以位于任何位置，例如 C:/Users/media/video.mp4，这会让我做这样的事情：

<video preload="auto" controls>
  <source src="C:/Users/media/video.mp4" type="video/mp4">
</video>

我遇到的问题是 Chrome（和其他浏览器最有可能）显然阻止了这种外部访问。我的解决方法是在服务器级别（Tomcat 服务器）获取视频，将它们转换为字节数组，并将其提供给我的 HTML。我的 Angular 代码会清理字节数组，然后将其提供给我的 HTML。

角度：

this.http.get(url).subscribe(data => {
  this.mediaSrc = this.sanitizer.bypassSecurityTrustResourceUrl(data);
});

HTML：

<video preload="auto" controls width="75%" height="50%">
  <source [src]="mediaSrc" type="video/mp4">
</video>

这种策略有时会奏效。但是，我的视频每隔一段时间就会完全停止工作，并且在 Chrome 中 doesn't display。这只会在某些时候发生，而且似乎是完全随机的。几乎就像 chrome 内存不足，或者如果它不喜欢它会阻止视频。然而，在新标签页中加载页面可以完全解决问题。

我的问题：有没有更好的方法从服务器级别传送视频，或者我可以用我当前的实现解决什么问题，这样我就不会遇到上述问题？我很想深入探讨我的问题，但我真的无法确定导致此问题随机发生的原因，并且只能在给定浏览器的给定选项卡上。

【问题讨论】：

【解决方案1】：

通过在 Chrome 上使用 .webm 视频而不是 mp4 修复了视频不工作的问题。

【讨论】：