Angular 16中使用组件属性设置video的src无效求助

在Angular 16项目中，使用插值表达式{{}}绑定动态视频URL时无法正常加载，仅静态URL能正常工作。

无效写法（动态URL不生效） #

<video autoplay="false" width="640" height="360" controls>
    <source src="{{video}}" type="video/mp4"> <!-- 此处动态绑定失效 -->
    <source src="{{model.profileVerification.video}}" type="video/mp4">
    Seu navegador não suporta o elemento de vídeo.
</video>

有效写法（静态URL正常运行） #

<video autoplay="false" width="640" height="360" controls>
    <source src="https://staticurlworksblahblah.com/video.mp4" type="video/mp4">
    <source src="{{model.profileVerification.video}}" type="video/mp4">
    Seu navegador não suporta o elemento de vídeo.
</video>

解决方案 #

• 使用Angular属性绑定语法：<source>是HTML原生元素，Angular推荐用[src]属性绑定替代插值表达式，这是解决动态URL失效的核心方法。修改后代码：

<video autoplay="false" width="640" height="360" controls>
    <source [src]="video" type="video/mp4">
    <source [src]="model.profileVerification.video" type="video/mp4">
    Seu navegador não suporta o elemento de vídeo.
</video>

• 验证动态URL的有效性：在组件类中确认video和model.profileVerification.video变量已正确赋值，URL需为完整的HTTP/HTTPS地址或正确的相对路径。可通过console.log(video)打印变量值，排查URL是否存在拼写错误或未初始化的问题。
• 本地视频路径配置：若加载项目内本地视频，需将视频文件放置在assets目录下，并确保angular.json的assets配置包含该路径，绑定路径示例：[src]="'assets/videos/demo.mp4'"。

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