Angular 19项目中assets文件夹视频无法加载问题求助

问题核心 #

你的angular.json仅配置了public文件夹作为资源目录，但视频文件存放在src/assets下，Angular构建时不会自动打包该目录的资源，导致视频路径无效。

修复步骤 #

1. 更新angular.json的assets配置
   把src/assets目录添加到assets数组，确保Angular将该目录下的文件打包到构建产物：

   "assets": [
     {
       "glob": "**/*",
       "input": "public"
     },
     {
       "glob": "**/*",
       "input": "src/assets",
       "output": "assets/"
     }
   ],
   

   output字段指定了打包后资源的输出路径，和你video标签里的/assets/DIA.mp4路径匹配。

2. 确认视频路径正确性
   保持video标签的路径和配置一致，也可以使用Angular的绑定语法确保路径解析正确：

   <video controls width="600" height="300" id="myVideo">
     <source src="/assets/DIA.mp4" type="video/mp4" />
   </video>
   

   组件模板中可选绑定写法：

   <video controls width="600" height="300" id="myVideo">
     <source [src]="'assets/DIA.mp4'" type="video/mp4" />
   </video>
   

3. 本地测试验证资源打包
   构建项目后检查dist目录下是否存在assets/DIA.mp4，使用VS2022时清理项目再重新构建，避免缓存干扰。

额外提示 #

• 确保MP4文件使用H.264编码，这是浏览器普遍支持的MP4编码格式，避免因格式不兼容导致播放失败。
• 若使用Angular路由，无需额外配置静态资源拦截规则（Angular默认不会拦截assets路径的请求）。

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