Angular应用如何访问本地系统路径下的视频文件

直接写本地绝对路径加载失败是浏览器的安全沙箱限制：网页运行时默认没有权限访问本地磁盘的任意文件路径，不管你写D:\Video\video01.mp4还是file:///D:/Video/video01.mp4都会被浏览器拦截。
放在src/app/assets目录能正常播放，是因为Angular会把assets目录下的资源作为HTTP静态资源托管，走HTTP协议访问不存在本地文件权限问题。

方案1：配置Angular外部资源映射（最推荐，开发/生产环境通用） #

不需要把视频拷贝到项目目录，直接通过Angular的构建配置把D盘的视频目录映射为站点可访问的静态路径：

1. 打开项目根目录的angular.json文件，找到projects.[你的项目名].architect.build.options.assets配置段
2. 在assets数组中新增外部目录映射规则：

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "D:/Video/",
    "output": "/assets/local-videos/"
  }
]

3. 重启本地ng serve服务，之后把v.videopath的值设为assets/local-videos/video01.mp4即可正常加载。打生产包时Angular会自动把D盘Video目录下的文件同步打包到产物的对应路径，上线后也能正常访问。
4. 注意把模板里的插值src绑定改成Angular属性绑定，避免被安全策略拦截，修正后的HTML代码：

<video id="my_video_1" autoplay preload="metadata" loop controls *ngFor="let v of VideoById">
  <source [src]="v.videopath" type="video/mp4">
</video>

方案2：本地启动静态服务托管视频（适合大文件不随项目打包的场景） #

如果视频体积太大不想随项目打包，可以单独启动一个带跨域支持的静态文件服务托管D盘的视频目录：

1. 已安装Node.js的话，全局安装静态服务工具：

npm i -g http-server

2. 进入D:\Video目录，执行命令启动服务：

http-server -p 8090 --cors

3. 服务启动后，把v.videopath的值设为http://localhost:8090/video01.mp4即可正常播放。生产环境建议把视频存到专门的文件存储服务/CDN，通过HTTP地址访问即可。

不要尝试修改前端代码绕过浏览器的本地文件访问限制，这个是浏览器内核层面的安全规则，除非你手动修改客户端浏览器的启动参数关闭安全策略（仅适合个人本地测试，无法面向普通用户生效）。

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