Angular 如何显示视频海报后，暂停它的角度？

我有一个视频数组，每个视频都有一个id，我在HTML文件中使用它，如下所示：

<div class="p-3" *ngFor="let video of videoList; let i = index">
  <video #videoPlayer (ended)="onPlayVideoEnded(video.id)" poster="assets/video/screenshot/{{video.id}}.PNG">
    <source src="assets/video/{{video.id}}.mp4" type="video/mp4" *ngIf="selectedPlayVideoIndex === i" />
  </video>
  <img class="hc-play_video" src="assets/img/play.png" *ngIf="selectedPlayVideoIndex !== i" (click)="onPlayVideoClick(i)">
</div>

onPlayVideoClick(index: number) {
    const videoplayer = this.videoplayer.toArray();
    if (this.selectedPlayVideoIndex > -1) {
        videoplayer[this.selectedPlayVideoIndex].nativeElement.pause();
        videoplayer[this.selectedPlayVideoIndex].nativeElement.currentTime = 0;
        videoplayer[this.selectedPlayVideoIndex].nativeElement.load(); // here
    }
    this.selectedPlayVideoIndex = index;
    videoplayer[index].nativeElement.play();
}

---

在播放多个视频后，它们在第一帧视频后卡住。但我想再次展示海报的图像。我该怎么办？

您应该做的事情很简单，在暂停视频后添加

.load（）

函数。 大概是这样的：

<div class="p-3" *ngFor="let video of videoList; let i = index">
  <video #videoPlayer (ended)="onPlayVideoEnded(video.id)" poster="assets/video/screenshot/{{video.id}}.PNG">
    <source src="assets/video/{{video.id}}.mp4" type="video/mp4" *ngIf="selectedPlayVideoIndex === i" />
  </video>
  <img class="hc-play_video" src="assets/img/play.png" *ngIf="selectedPlayVideoIndex !== i" (click)="onPlayVideoClick(i)">
</div>

onPlayVideoClick(index: number) {
    const videoplayer = this.videoplayer.toArray();
    if (this.selectedPlayVideoIndex > -1) {
        videoplayer[this.selectedPlayVideoIndex].nativeElement.pause();
        videoplayer[this.selectedPlayVideoIndex].nativeElement.currentTime = 0;
        videoplayer[this.selectedPlayVideoIndex].nativeElement.load(); // here
    }
    this.selectedPlayVideoIndex = index;
    videoplayer[index].nativeElement.play();
}

然后它会在暂停视频后显示海报图像