看起来你遇到的问题很典型——虽然URL已经正确渲染到元素属性上，但视频就是无法加载播放。结合你的场景（S3托管视频+Angular 9），主要有几个核心原因，我们逐一排查解决：

1. S3桶的CORS配置缺失或不正确 #

这是最常见的诱因！HTML5 <video> 加载跨域资源时，浏览器会自动发起预检OPTIONS请求，如果你的S3桶没有配置允许Angular应用域名的CORS规则，浏览器会直接拦截视频资源的加载——哪怕src属性显示正确，实际请求也会被阻断。

解决步骤： #

• 登录AWS S3控制台，找到视频所在的存储桶
• 进入「权限」标签，找到「跨域资源共享（CORS）」模块
• 添加以下配置（替换成你的Angular应用域名，本地开发可暂时用*测试）：

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>https://your-angular-app-domain.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
  </CORSRule>
  <!-- 本地开发环境专用规则 -->
  <CORSRule>
    <AllowedOrigin>http://localhost:4200</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

• 保存配置后刷新Angular应用测试。

2. S3视频文件的Content-Type设置错误 #

如果S3上的视频文件元数据中Content-Type不是video/mp4，浏览器可能无法正确识别视频格式，导致播放失败（比如上传时默认类型可能是binary/octet-stream）。

解决步骤： #

• 在S3控制台找到目标视频文件，点击「属性」
• 下拉到「元数据」区域，检查Content-Type是否为video/mp4
• 如果不符，点击「编辑元数据」，添加或修改该字段为video/mp4，保存后重新测试。

3. S3文件/桶的权限配置问题 #

如果视频文件或存储桶没有设置公开可读权限，即使URL正确，请求也会返回403 Forbidden，导致视频无法加载。

解决步骤： #

• 检查视频文件的ACL：在文件详情页的「权限」标签，确认对象所有者拥有读权限；测试阶段可临时开启「Everyone」的读权限（生产环境建议用预签名URL替代公开权限）
• 检查桶的访问政策：确保政策没有阻止该文件的GET请求。

4. 快速验证：查看浏览器控制台错误 #

打开浏览器开发者工具（F12），切换到对应标签页：

• Network标签：找到视频请求，查看状态码——403指向权限/CORS问题；200但无法播放则检查Response Headers里的Content-Type是否正确
• Console标签：如果看到No 'Access-Control-Allow-Origin' header is present类提示，直接指向CORS配置错误。

另外补充：你的Angular代码中使用DomSanitizer.bypassSecurityTrustUrl的方式是完全正确的，这部分无需调整。

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