Ionic3: how to display video with thumbnails in grid view

Ionic Framework ionic-v3
1

Hello there,

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

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

Thanks

2

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: https://ionicacademy.com/create-thumbnail-image-ionic/

3

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}}">
  </video>
1 Like
4

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.