Angular Swiper-自动播放照片和视频

Question

我正在将ngx-swiper-wrapper用作Swiper的库包装。

我的目标是在拍子的轮播中同时显示照片和视频。如果当前项目是照片，则应在显示下一项之前将其延迟5秒钟。棘手的部分是，如果是视频，则自动播放它，等待它完成，然后转到下一个项目。

component.html

<swiper [config]="swiperConfig" (indexChange)="changeEvent($event)">
  <div class="slide" *ngFor="let file of files">
    <img *ngIf="file.type === 'photo'" [src]="file.path"/>
    <video *ngIf="file.type === 'video'" width="100%" height="100%" autoplay muted>
      <source [src]="file.path">
    </video>
  </div>
</swiper> 

component.ts

  public swiperConfig: SwiperConfigInterface = {
    autoplay: {
      delay: 5000,
    }
  };

我的想法是通过changeEvent（$ event）获取当前活动项目，并通过视频持续时间属性获取视频长度。之后，我可以在这段时间内触发睡眠。

  changeEvent(event) {
    const currentSlide = this.files[event];
    var x = document.getElementById(currentSlide.id).duration;
    // sleep?
  }

我发现这种方法不切实际，因此希望听到更好的解决方案。

  

我并不严格依赖于Swiper，如果可以使用另一个库   建议。