如何在Angular12中显示视频错误

Question

我的目标是在视频文件损坏时显示用户可读的错误。我发现这段代码非常适合我的用例，但是我似乎不能让它工作……我甚至尝试将它直接放在模板中的纯JS中，但它仍然不起作用。

我的html：

<nb-card>

<video src="tgif.vid"
  autoplay
  controls
  onerror="errorMessageVideo(event)">
</video>

</nb-card>

我的Ts：

import { Component, ViewChild, ElementRef, 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() {
  this.errorMessageVideo(Event);
}
  errorMessageVideo(e) {
    // video playback failed - show a message saying why
    switch (e.target.error.code) {
      case e.target.error.MEDIA_ERR_ABORTED:
        alert('You aborted the video playback.');
        break;
      case e.target.error.MEDIA_ERR_NETWORK:
        alert('A network error caused the video download to fail part-way.');
        break;
      case e.target.error.MEDIA_ERR_DECODE:
        alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
        break;
      case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
        alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
        break;
      default:
        alert('An unknown error occurred.');
        break;
    }
  }
}

有没有人能帮帮我

Answer 1

您的模板有两个问题。

您需要使用括号绑定事件，并在模板中更改错误事件的名称。此外，您还需要使用$event而不是event来传递事件，如下所示：

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