Dynamically using the first frame as poster in HTML5 video?

javascript html html5-video poster
Damon picture Damon · Sep 6, 2011 · Viewed 76.1k times · Source

I'm wondering if there's any straightforward way to achieve this effect, without needing backend code to extract a frame, save it as a jpg and database it somewhere.

An effect whereby the first frame of the video just shows up as the poster when the video loads would be so helpful (it would only work if the browser can play back the video obviously, which might be a little different from how poster traditionally works, but that is not a concern.

Answer

Juergen Fink picture Juergen Fink · May 17, 2018

Did you try the following?

just append time in seconds #t={seconds} to source URL:

<video width="300" height="150">
   <source src="testvideo.mp4#t=0.1" type="video/mp4" />
</video>

I have chosen a fraction of second (0.1) to keep number of frames small, because I have the suspect that if you put 1 second, it would "preload" the first 1 second of video (i.e. 24 frames or more ....). Just in case ...

Works fine on Chrome and Firefox on desktop :)
Works not on Android mobile, though :(
I did not test on iOS, iPhone, IE yet ??

Related questions

Prevent HTML5 video from being downloaded (right-click saved)?

How can I disable "Save Video As..." from a browser's right-click menu to prevent clients from downloading a video? Are there more complete solutions that prevent the client from accessing a file path directly?

Read More
Detect if HTML5 Video element is playing

I've looked through a couple of questions to find out if an HTML5 element is playing, but can't find the answer. I've looked at the W3 documentation and it has an event named "playing" but I can't seem to get …

Read More
How to change the playing speed of videos in HTML5?

How to change the video play speed in HTML5? I've checked video tag's attributes in w3school but couldn't approach that.Any help would be appreciated!

Read More