如何解决嵌入的YouTube视频反复刷新的问题？

我尝试了多种方法阻止嵌入的YouTube视频反复刷新，但几乎所有方法都出现持续重复的错误，导致视频不断刷新。相关代码实现如下：

组件JavaScript代码 #

getVideoUrl(FileUrls) {
    if (this.loadApiDone == true) {
      var video = "";
      var videos = JSON.parse(FileUrls);
      console.log("videos", videos);
      if (videos && videos.length !== 0) {
        video = videos[0];
        let videoUrl = 'https://www.youtube.com/embed/' + video;
        console.log("videoUrl", videoUrl);
        return this.sanitizer.bypassSecurityTrustResourceUrl(videoUrl);
      }
      return this.appService.apiRoot + video;
    }
  }

模板HTML代码 #

<a class="img-figure">
   <ng-container *ngIf="item.FileUrls">
       <iframe *ngIf="item.Type == 0" class="video-container" controls
          [src]="getVideoUrl(item.FileUrls)" type="video/mp4">
       </iframe>
       <img *ngIf="item.Type == 1" class="img-figure" [src]="getImage(item.FileUrls)"
          alt="post-image-first" />
    </ng-container>
    <img *ngIf="item.FileUrls == this.LINK_DEFAULT_IMAGE || item.FileUrls == null || item.FileUrls == undefined"
       class="img-figure-first" src="../../assets/images/default.png" alt="post-image" />
 </a>

问题原因 #

在Angular模板中直接将getVideoUrl()方法绑定到[src]上，Angular的变更检测机制会在每次检测周期调用该方法。由于每次调用都会返回一个新的SafeResourceUrl实例，Angular会判定src值发生了变化，进而重新渲染iframe，导致视频反复加载刷新。

解决方案 #

提前计算并存储安全URL到数据对象的属性中，避免在模板中实时调用方法：

1. 修改组件逻辑，预处理视频URL #

在获取到列表数据后，为每个视频类型的item生成并存储安全URL：

// 示例：在获取items数据后执行预处理
processItems(items) {
  items.forEach(item => {
    // 仅处理视频类型且已加载API的情况
    if (item.Type === 0 && item.FileUrls && this.loadApiDone) {
      const videos = JSON.parse(item.FileUrls);
      if (videos?.length > 0) {
        const videoUrl = `https://www.youtube.com/embed/${videos[0]}`;
        // 将安全URL存入item的自定义属性
        item.safeVideoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(videoUrl);
      }
    }
  });
  // 将处理后的items赋值给模板绑定的变量（如this.items = items）
}

2. 修改模板，直接绑定预处理后的属性 #

<a class="img-figure">
   <ng-container *ngIf="item.FileUrls">
       <iframe *ngIf="item.Type == 0" class="video-container" controls
          [src]="item.safeVideoUrl" type="video/mp4">
       </iframe>
       <img *ngIf="item.Type == 1" class="img-figure" [src]="getImage(item.FileUrls)"
          alt="post-image-first" />
    </ng-container>
    <img *ngIf="item.FileUrls == this.LINK_DEFAULT_IMAGE || item.FileUrls == null || item.FileUrls == undefined"
       class="img-figure-first" src="../../assets/images/default.png" alt="post-image" />
 </a>

额外提示 #

如果getImage()方法也存在同样的频繁调用问题，建议用同样的方式提前处理图片URL，避免不必要的变更检测触发。

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