Ionic中ngFor渲染的视频调用play方法时元素被重建问题求助

问题根因 #

你遇到的视频元素重建问题由两个原因共同导致：

1. HTMLVideoElement.play() 是异步方法，返回 Promise 对象，你没有捕获异步执行过程中抛出的错误，未处理的错误触发了 Angular 全局错误处理逻辑，进而触发组件级变更检测
2. 你的 video 元素是在 *ngFor 循环中渲染的（从 id 绑定的 +i 可以判断），默认情况下 *ngFor 未配置 trackBy 函数时，变更检测触发后会对比列表项的引用，引用变化就会销毁重建对应 DOM 元素，进而导致视频元素被重建。

解决方案 #

• 补全 play 方法的错误捕获
  修改你的 TS 代码：

public async playPause(video: HTMLVideoElement): Promise<void> {
    try {
        if (video.paused) {
            await video.play();
            this.isPlay = true;
        } else {
            video.pause();
            this.isPlay = false;
        }
    } catch (err) {
        // 可自行打印错误排查播放失败原因，比如用户未交互就触发播放、视频资源加载失败等
        console.error('视频播放出错: ', err);
    }
}

• 给 *ngFor 增加 trackBy 配置
  在组件 TS 中新增 trackBy 方法：

// 假设你的 asset 列表每个项有唯一id字段，没有的话替换为其他唯一标识字段即可
public trackByAssetId(index: number, asset: any): string {
    return asset.id;
}

修改 HTML 中 *ngFor 的写法：

<!-- 原写法类似 *ngFor="let asset of assetList; let i = index" -->
<!-- 修改为 -->
*ngFor="let asset of assetList; let i = index; trackBy: trackByAssetId"

• 可选优化：如果 class.blur 绑定的条件变化频繁，可以把条件计算逻辑提前放到TS中赋值，避免变更检测时频繁计算触发不必要的样式更新。

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