Angular 15：Video-source标签硬编码URL可用，属性绑定失效问题

以下是针对该问题的几种排查和解决方法：

1. 处理Angular的安全策略限制 #

Angular默认会对绑定的资源URL做安全校验，即便URL在开发者工具中显示正确，也可能因未被标记为可信资源而无法加载。需用DomSanitizer将URL转换为安全资源：

在组件中导入相关模块：

import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

注入DomSanitizer并处理URL属性：

export class YourVideoComponent {
  property: SafeResourceUrl;

  constructor(private sanitizer: DomSanitizer) {
    // 假设原始URL来自数据库
    const rawUrl = 'urlFromDB.mov';
    this.property = this.sanitizer.bypassSecurityTrustResourceUrl(rawUrl);
  }
}

模板保持原绑定方式：

<video controls autoplay>
  <source [src]="property" type="video/mp4" />
</video>

2. 强制视频元素重新加载 #

属性绑定更新source的src后，视频元素可能未自动触发重新加载，可通过模板引用变量手动调用load()方法：

模板添加引用变量：

<video #videoPlayer controls autoplay>
  <source [src]="property" type="video/mp4" />
</video>

组件中监听property变化并触发加载：

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

export class YourVideoComponent implements OnChanges {
  property: string; // 或SafeResourceUrl
  @ViewChild('videoPlayer') videoPlayer: ElementRef<HTMLVideoElement>;

  ngOnChanges(changes: SimpleChanges) {
    if (changes['property'] && this.videoPlayer) {
      this.videoPlayer.nativeElement.load();
      // 若需自动播放，调用play()（注意浏览器自动播放策略限制）
      this.videoPlayer.nativeElement.play().catch(err => console.log('自动播放失败:', err));
    }
  }
}

3. 确认属性值的加载时机 #

确保property变量在模板渲染前已获取到值。如果是异步加载（比如从API获取），用*ngIf避免模板提前渲染：

<video *ngIf="property" controls autoplay>
  <source [src]="property" type="video/mp4" />
</video>

额外提示 #

• 浏览器自动播放策略：多数现代浏览器要求视频静音或用户交互后才能自动播放，可添加muted属性尝试：<video controls autoplay muted>
• 视频MIME类型：.mov文件的正确MIME类型通常是video/quicktime，而非video/mp4，可修改type属性测试：type="video/quicktime"

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