Problem to set video poster and source with *ngFor


#1

Hi, I want to display a list of videos in my app, but I was looking and the preview of the video doesn’t work in mobile (just display the play arrow) then I was looking a way to display the poster and the video inside the *ngFor loop,

I was using something like this:

<ion-col col-12 *ngFor="let video of videos" >
        <ion-list *ngFor="let poster of posters">
          <video poster="{{poster}}" style="width: 100%; height: auto;" controls="controls" preload="metadata" controlsList="nodownload" webkit-playsinline="webkit-playsinline" class="videoPlayer" fullscreen="fullscreen">
           <source src="{{video}}" type="video/mp4" />
          </video>
       </ion-list>
</ion-col>

But in this way it repeat the loop for each poster. I doesn’t work.

Anyone have an idea or another way to do this?

Thanks for the help.