Javascript 在AfterViewChecked上播放视频

在Angular 9中，我想在AfterViewChecked生命周期内自动播放多个视频

这是我的组件代码：

import {
  AfterViewChecked,
  Component,
  ElementRef,
  ViewChild,
} from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent implements AfterViewChecked {
  @ViewChild("videoPlayer") videoPlayer: ElementRef;

  private index = 0;
  private videoList = [
    "../assets/Background_Videos/FoodPack1_01_Videvo.webm",
    "../assets/Background_Videos/FoodPack1_03_Videvo.webm",
    "../assets/Background_Videos/FoodPack1_12_Videvo.webm",
  ];

  ngAfterViewChecked(): void {
    this.playVideo();
  }

  videoEnded() {
    if (this.index == this.videoList.length - 1) {
      this.index = 0;
    } else {
      this.index++;
    }
    this.playVideo();
  }

  playVideo() {
    this.videoPlayer.nativeElement.src = this.videoList[this.index];
    this.videoPlayer.nativeElement.load();
    this.videoPlayer.nativeElement.muted = true;
    this.videoPlayer.nativeElement.play();
  }
}

和html：

<video #videoPlayer (ended)="videoEnded()" width="400px"></video>   

此视频自动播放，但在控制台中接收错误：

我不明白，我的代码哪一部分出错了？

（结束）

可能一开始就被触发了。可能需要清理url吗？