Dynamically Using the First Frame as Poster in HTML5 Video

Dynamically using the first frame as poster in HTML5 video?

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>

How can I use dynamically the first frame as poster in mobile HTML5 video?

On mobile devices the device will not start to download the video automatically, as you may be aware. This is to avoid the user running up large data bills.

Because the bowser has not downloaded the video it can't extract the first frame to display it, so you need to use the poster mechanism in HTML5 to display an image as the thumbnail.

One common approach is to generate the thumbnail on the server side when you 'ingest' or add the video to the server and save it where it can be served as the video poster.

js: show first frame of video when the page loads

This could help:

document.getElementById('THE VIDEO').addEventListener('loadedmetadata', function() {
    this.currentTime = 0;
}, false);

Generating a random preview image on a HTML5 video tag

I don't think that this is possible in pure HTML5. Principally because the stream is not loaded when you see the 'object' in the webpage so the client can't get the desired frame.

However, the best option for you is to save / cache the 'random frame' before loading the page and then use it as the poster of the video. This will allow you to reduce the client work and save the bandwith.

check THIS, which is the first thing that I've found (if you're using PHP and you want a 'quick and dirty' way to get the frame)

Update

Apparently HERE there is a solution with popcorn.js BUT it seems that you can't do it in the way that (I suppose) you need.

This because it would be possible to do this only inside the same domain due to browser security issues.

---

Related Topics