How to get HTML5 video thumbnail without using poster on safari or iOS?

ios html video safari mp4
vedankita kumbhar picture vedankita kumbhar · Dec 21, 2016 · Viewed 8.2k times · Source

I have embedded HTML5 video with mp4 format. How to get thumbnail image like poster without using "poster" attribute. This problem coming on Safari and iOS. I have added video like below mentioned code.

<video height=350 id='TestVideo' webkit-playsinline><source src='test.mp4' type=video/mp4></video>

On Chrome, IE, Firefox first frame of video coming as thumbnail image, but not coming on Safari and iOS.

Answer

Ken picture Ken · Apr 1, 2020

simply add preload="metadata" in video tag and set #t=0.1 at url src, it will get the frame of 0.1s of your video as thumbnail

however, the disadvantage of this solution is when you click to play the video, it always start at 0.1s

<video preload="metadata" controls>
    <source src="video.mp4#t=0.1" type="video/mp4">
</video>

Related questions

HTML5 Video autoplay on iPhone

I have some kind of a strange problem. I try to create a website with a looped background video. The code looks like this one: This works perfectly fine on most browsers (IE struggles with this object-fit thing but I …

Read More
Implementation of HTTP Live Streaming in iOS

I want to write a little iOS video client and have to use HTTP Live Streaming. The videos come from a Wowza Media Server which supports HTTP Live Streaming, so the server-side implementation is not my problem. I have already …

Read More
autoplay=1 not working for <iframe> in playing video in mobile devices

I'm working with video. When i click on Video Thumbnail a pop appears and Video plays in that,I need to start play the video (without clicking the play button) when popup opened.I tried with code below. It was …

Read More