Как показать видео постер после его остановки в angular?

Question

У меня есть массив видео, каждое видео имеет идентификатор, и я использую его в своем файле 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>

, а вот мой файл ts:

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

После воспроизведения нескольких видео они застряли после первого кадра видео. Но я хочу снова показать изображение плаката. что мне делать?

Answer 1

То, что вы должны сделать, довольно просто, вы добавляете функцию .load() после приостановки видео. Примерно так:

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();
}

После показа видео будет отображаться изображение плаката.