htmlhtml5-videopreloading

How to set the thumbnail image on HTML5 video?


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!


Solution

  • 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?