How to set the thumbnail image on HTML5 video?

by

Add poster="placeholder.png" to the video tag.

<video width="470" height="255" poster="placeholder.png" controls>
    <source src="https://stackoverflow.com/questions/20075875/video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <source src="video.webm" type="video/webm">
    <object data="https://stackoverflow.com/questions/20075875/video.mp4" width="470" height="255">
    <embed src="video.swf" width="470" height="255">
    </object>
</video>

Does that work?

More Related Contents:

  1. Detect when an HTML5 video finishes
  2. Play local (hard-drive) video file with HTML5 video tag?
  3. Is there a way to make HTML5 video fullscreen?
  4. Wait until an HTML5 video loads
  5. HTML5 live streaming
  6. Playing m3u8 Files with HTML Video Tag
  7. Html Video player plays sound but not video
  8. HTML5 video element request stay pending forever (on chrome)
  9. html5 video not working on ipad
  10. Play infinitely looping video on-load in HTML5
  11. Overlay on HTML5 Fullscreen Video
  12. Streaming a video from Google Drive using HTML5 video tag
  13. Add text above HTML5 Video
  14. HTML5 – mp4 video does not play in IE9
  15. chrome could play html5 mp4 video but html5test said chrome did not support mp4 video codec
  16. Safari – Videos load far too slowly
  17. html5 video issue with chrome
  18. Image placeholder fallback for HTML5 Video
  19. How to hide full screen button of the video tag in HTML5
  20. Making youtube.com/embed URLs work on iOS
  21. Set width on div
  22. How to Make columns in row [closed]
  23. Is it wrong to change a block element to inline with CSS if it contains another block element?
  24. HTML5 best practices; section/header/aside/article elements [closed]
  25. What character represents a new line in a text area
  26. Horizontal list items
  27. play pause html5 video javascript
  28. How to see an HTML page on Github as a normal rendered HTML page to see preview in browser, without downloading?
  29. How to display alt text for an image in chrome
  30. What are all the differences between src and data-src attributes?

Leave a Comment