Angular12中如何实现视频损坏或加载失败时展示用户可读的错误提示

核心问题点 #

• 事件绑定方式错误：Angular 不支持原生 onxxx 属性直接绑定组件类方法，原生属性绑定的方法会默认在全局 window 作用域查找，找不到你组件内部定义的 errorMessageVideo 方法，所以触发错误时根本不会执行你的逻辑。
• 无效调用逻辑错误：你在 ngOnInit 中主动传入 Event 类型对象调用方法，而非实际的视频错误事件实例，执行时会因为 e.target.error 不存在直接抛出JS异常，这段代码没有实际作用，直接删除即可。

修正后代码 #

HTML 模板 #

<nb-card>
  <video src="tgif.vid"
    autoplay
    controls
    (error)="errorMessageVideo($event)">
  </video>
</nb-card>

TS 组件代码 #

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'ngx-video-card',
  templateUrl: './video-card.component.html',
  styleUrls: ['./video-card.component.scss']
})
export class VideoCardComponent implements OnInit  {

  ngOnInit() {
    // 删除原有无效调用即可
  }

  errorMessageVideo(e: Event) {
    const target = e.target as HTMLVideoElement;
    // 前置判空避免异常
    if (!target?.error) {
      alert('发生未知错误。');
      return;
    }
    switch (target.error.code) {
      case target.error.MEDIA_ERR_ABORTED:
        alert('您已中止视频播放。');
        break;
      case target.error.MEDIA_ERR_NETWORK:
        alert('网络错误导致视频下载中途失败。');
        break;
      case target.error.MEDIA_ERR_DECODE:
        alert('视频播放已中止，原因可能是文件损坏，或视频使用了您的浏览器不支持的特性。');
        break;
      case target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
        alert('视频无法加载，可能是服务器/网络故障，或格式不被支持。');
        break;
      default:
        alert('发生未知错误。');
        break;
    }
  }
}

如果需要更友好的交互，可以把alert替换为项目内的全局提示组件，错误判断逻辑不需要调整。

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