Ionic3: how to display video with thumbnails in grid view

Hello there,

I want to display videos grid view with thumbnails,but it displays like below:

Please help me how to implement videos grid with thumbnails

note: I used HTML5 video element, and want to display videos thumnails in grid view with formats .mp4, .mov etc in both ios and android


To get thumbnails for your videos you will need to generate them using a canvas. Here is a link where you can find more information on how to do this:

You need to create for each video the thumbnail image you want to show as preview
and use the example code below.

  <video  poster="{{pathToPreviewImage}}"  preload="auto" crossorigin>
      <source [src]="videoSrc" type="{{videoType}}">
1 Like

Thanks for ur responses, I need thumbnail from video dynamically. I mean not images, I need to display list of videos in grid view with each one having thumbnail, as we can see in youtube, so when user clicks on it. It should play.