Angular 5 项目在iOS Safari中HTML5 Video无法正常加载的问题

我之前在Angular项目里也踩过类似的路由下视频加载失败的坑，给你几个实际可行的排查和解决方向：

1. 修正视频资源的路径（最常见原因） #

Angular作为单页应用，路由切换时相对路径的解析是基于当前路由的。比如你在/route1路由下，src="test.mp4"会被浏览器解析成/route1/test.mp4，而不是服务器根目录的/test.mp4，这就直接导致资源找不到。

你只需要把src改成绝对路径即可：

<video width="400" controls>
  <source src="/test.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

注意开头的斜杠/，它会直接指向服务器的根目录，不管当前路由是什么。

2. 确保视频被Angular CLI正确打包 #

如果你的test.mp4放在项目根目录，需要确认它被配置为静态资源，否则Angular打包时不会把它复制到dist目录里，部署后自然找不到。

打开angular.json文件，找到assets数组，把test.mp4添加进去：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "test.mp4" // 加上这一行
]

修改后重启dev server，确保资源被正确复制到打包目录。

3. 手动触发视频加载（解决首次加载时机问题） #

有时候首次进入路由时，视频元素可能还没完成初始化，导致加载失败。你可以通过组件代码手动触发加载：

首先在HTML里给视频元素加个模板引用：

<video #videoPlayer width="400" controls preload="auto">
  <source src="/test.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

然后在组件类里获取这个元素并调用load()方法：

import { ElementRef, ViewChild, OnInit } from '@angular/core';

@Component({
  selector: 'app-route1', // 对应你的路由组件选择器
  templateUrl: './route1.component.html'
})
export class Route1Component implements OnInit {
  @ViewChild('videoPlayer') videoPlayer: ElementRef;

  ngOnInit() {
    // 初始化时手动触发视频加载
    this.videoPlayer.nativeElement.load();
  }
}

preload="auto"属性也能让浏览器提前预加载视频资源，提升首次加载的成功率。

4. 检查服务器的MIME类型配置 #

如果是部署到生产环境的服务器（比如Nginx、Apache），要确保服务器正确返回video/mp4的MIME类型，否则浏览器无法识别视频文件。

以Nginx为例，在你的server配置块里添加：

types {
  video/mp4 mp4;
}

这样服务器会给mp4文件返回正确的Content-Type头，浏览器才能正常解析。

内容的提问来源于stack exchange，提问作者fabienbranchel