Dynamically using the first frame as poster in HTML5 video?

by

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 🙂

More Related Contents:

  1. Prevent HTML5 video from being downloaded (right-click saved)?
  2. Stop/Close webcam stream which is opened by navigator.mediaDevices.getUserMedia [closed]
  3. Retrieving HTML5 video duration separately from the file
  4. Programmatically play video with sound on Safari and Mobile Chrome
  5. Detect if HTML5 Video element is playing [duplicate]
  6. Is it possible to play HTML5 video in reverse?
  7. How to take a snapshot of HTML5-JavaScript-based video player?
  8. play pause html5 video javascript
  9. How to change the playing speed of videos in HTML5?
  10. HTML5 callbacks?
  11. how to make getUserMedia() work on all browsers
  12. How can I set preview of video file, selecting from input type=’file’
  13. How to detect supported video formats for the HTML5 video tag?
  14. HTML5 Video buffered attribute features
  15. Checking if a html5 video is ready
  16. HTML5 and Javascript to play videos only when visible
  17. Play HTML5 Video when scrolled to
  18. Redirect html5 video after play
  19. HTML5 Video: Streaming Video with Blob URLs
  20. How to reduce the length of a video using JavaScript? [closed]
  21. .val() don't edit input
  22. Dynamically set value of a file input [duplicate]
  23. AngularJS – Value attribute on an input text box is ignored when there is a ng-model used?
  24. Replace words in the body text
  25. Start HTML5 video at a particular position when loading?
  26. Bootstrap 4 navbar not collapsing on large screen
  27. How do I escape a string inside JavaScript code inside an onClick handler?
  28. Insert external page html into a page html
  29. Get All Elements in an HTML document with a specific CSS Class
  30. How to pass parameters through iframe from parent html?

Leave a Comment