How to set the thumbnail image on HTML5 video?

Ivijan Stefan Stipić picture Ivijan Stefan Stipić · Nov 19, 2013 · Viewed 183.4k times · Source

Is there a way to set thumbnail image on HTML5 video? I want to see some pictures before play. My code looks like this:

<video width="470" height="255" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <source src="video.webm" type="video/webm">
    <object data="video.mp4" width="470" height="255">
    <embed src="video.swf" width="470" height="255">
    </object>
</video>

Thanks!

Answer

Jason Brooks picture Jason Brooks · Nov 19, 2013

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

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

Does that work?