Ionic3: HTML5 video element thumbnail issue in android

Ionic Framework ionic-v3
1

Hello there,
I’m using html5 video element in my ionic3 application. In that application, I need to show thumbnail of video. I was able to show thumbnail in ios. But not able to show in android side. Can u please tell me the reason.

The following is the code that I’m using to show thumbnail of video

<video controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline">
     <source src="videourl#t=0.1" type="video/mp4" />
</video>

Thanks

2

No one having this issue?:thinking:

3

Hi,

That is not a good approach, the HTML5 video tag not work fine in android with big files and not show thumbnails. I solved it generating a image thumbnail in the backend and opening the native video player when the user tap the thumbnail.

4

Hello @TheTourist, Thanks for u response. Can u please share code, how you implement ?

5

Sorry, but i don’t have the code. I wrote it long time ago.

You can use this video player only for android, and for IOS you can use html5 tag.

For the thumbnail, I used the ffmpeg app in linux https://superuser.com/questions/538112/meaningful-thumbnails-for-a-video-using-ffmpeg

6

Thanks, But how to display list of videos in grid view. Is it possible with native video player?

7

can we use https://ionicframework.com/docs/native/streaming-media/ ?

8

No, is not posible, the native cordova plugin shows the video in the native player of the device only. You need to show an thumbnail image in the grid view, the image need to be generated by an API/backend.

9

You can try to use some cordova plugin for create thumbnails too.

https://www.google.com/search?client=firefox-b-ab&ei=gXrXW6THMMmzwATg16voAw&q=cordova+video+thumbnail&oq=cordova+video+thumbnail&gs_l=psy-ab.12...0.0.0.3840.0.0.0.0.0.0.0.0..0.0…0…1…64.psy-ab…0.0.0…0.x08dcdpOHvM

10

Ok, you mean instead of getting list of video urls, we need to get thumbanil of videos. When user click on particular thumbnail, we need to get video url depending upon thumbnail Id. Then we need to call https://ionicframework.com/docs/native/streaming-media/ . So that it can support both android and ios platforms…

11

Yes, is correct. The streming media plugin is good too.

12

Ok, one last question I’m using php for backend. User can upload videos, Is it possible to get thumbnail from uploaded videos from backend side?. If yes, pls suggest me a way…

13

Yes, i mentioned to you in other mensaje, that you can use the ffmpeg app in linux, and with php call this app and create a thumbnail.

some examples:

14

This is better tutorial:

https://techjoomla.com/blog/jgive/video-thumbnail-generation-in-jgive-crowdfunding-donations-joomla.html

15

Thanks for u r help, I will do same and let you know. Once again thank you so much :grinning:

1 Like