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!

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?

Display Your Video First Frame as Thumbnail:

Add preload="metadata" to your video tag and the second of the first frame #t=0.5 to your video source:

<video width="400" controls="controls" preload="metadata">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4#t=0.5" type="video/mp4">
</video>

If you want a video first frame as a thumbnail, than you can use

Add #t=0.1 to your video source, like below

<video width="320" height="240" controls>
  <source src="video.mp4#t=0.1" type="video/mp4">
</video>

NOTE: make sure about your video type(ex: mp4, ogg, webm etc)

I found the solution that I got from your example and other examples and made ​​this:

<video id="video1" width="470" height="264"  poster="video_poster.jpg" onclick="playPause()">
                  <source src="video.mp4" width="470" height="264" type="video/mp4" >
                  <source src="video.webm" type="video/webm" >
                  <source src="video.ogv" type="video/ogg" >                      
                  <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="470" height="264" >
                  <param name="movie" value="video.swf" >
                  <param name="quality" value="high">
                  <param name="wmode" value="opaque">
                  <param name="swfversion" value="11.0.0.0">
                  <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
                  <param name="expressinstall" value="../../Scripts/expressInstall.swf">
                  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
                  <!--[if !IE]>-->
                  <object type="application/x-shockwave-flash" data="video.swf" width="500" height="500">
                    <!--<![endif]-->
                    <param name="quality" value="high">
                    <param name="wmode" value="opaque">
                    <param name="swfversion" value="11.0.0.0">
                    <param name="expressinstall" value="../../Scripts/expressInstall.swf">
                    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
                    <div>
                      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
                      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
                    </div>
                    <!--[if !IE]>-->
                  </object>
                  <!--<![endif]-->
                    Unfortunately Your browser is old and does not support full video experience.
                </object>


                </video> 
                <script> 
                var myVideo=document.getElementById("video1"); 
                var att=document.createAttribute("poster");
                if (myVideo.error) {
                     switch (myVideo.error.code) {
                       case MEDIA_ERR_NETWORK:alert("Network error - please try again later.");break;
                       case MEDIA_ERR_DECODE:alert("Video is broken.."); break;
                       case MEDIA_ERR_SRC_NOT_SUPPORTED:alert("Sorry, your browser can't play this video."); break;
                     }
                }
                else
                {
                    function playPause()
                    { 
                        if (myVideo.paused) 
                        {
                          myVideo.play();
                          att.value="";
                          myVideo.setAttributeNode(att);
                        }
                        else myVideo.pause();
                    }
                }                       
                </script>

Fantastic work. Thanks!