Question

11

Dynamically using the first frame as poster in HTML5 video?

rated 0 times [ 16] [ 5] / answers: 1 / hits: 118867 / 13 Years ago, tue, september 6, 2011, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ramiro

Add To Favorites

Follow

Total Points: 431

Total Questions: 96

Total Answers: 105

Location: Northern Ireland

Member since Mon, Nov 14, 2022

2 Years ago

answered 13 Years ago devonw · Accepted Answer

Did you try the following?

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

  <video controls width=360>

    <source src=https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.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 ??

Edit May 2021:

I realized that many modern browsers now show automatically a poster of first frame.

Seems like they heard us :-)