If you want to do this without storing the images on the server side, this is possible, albeit a bit awkward ... using the canvas to record the first frame of the video and then overlay it on top of the video element. You can probably use the Canvas URL as the source for Poster (for example, video.poster = c.toDataURL(); ), but this requires the correct CORS setting (not sure if the video was on your own server, and if you have control over this, took the safest option). This will work best if the video is correctly encoded for streaming (so that the MOOV atom is in front of the video, otherwise it will slowly draw an overlay - see this answer for more details)
HEAD contains a style for video and overlay (you will need to adjust the size and position to suit your application)
<head> <style> video_box{ float:left; } #video_overlays { position:absolute; float:left; width:640px; min-height:264px; background-color: #000000; z-index:300000; } </style> </head>
In BODY you'll need a div for overlay and video. The overlay div has an onclick handler to hide the overlay and start playing the video.
<div id="video_box"> <div id="video_overlays" onclick="this.style.display='none';document.getElementById('video').play()"></div> <video id="video" controls width="640" height="264"> <source src="BigBuck.mp4" type='video/mp4'> </video> </div> </div>
Finally, you need a code that will load the video, look for the first frame and load the image into the canvas, which you then paste into the overlay
<script> function generateOverlay() { video.removeEventListener('seeked',generateOverlay); / tidy up the event handler so it doesn't redraw the overlay every time the user manually seeks the video var c = document.createElement("canvas"); var ctx = c.getContext("2d"); c.width = 640; c.height = 264; ctx.drawImage(video, 0, 0, 640, 264); // take the content of the video frame and place in canvas overlay.appendChild(c); // insert canvas into the overlay div } // identify the video and the overlay var video = document.getElementById("video"); var overlay = document.getElementById("video_overlays"); // add a handler that when the metadata for the video is loaded it then seeks to the first frame video.addEventListener('loadeddata', function() { this.currentTime = 0; }, false); // add a handler that when correctly seeked, it generated the overlay video.addEventListener('seeked', function() { // now video has seeked and current frames will show // at the time as we expect generateOverlay(); }, false); // load the video, which will trigger the event handlers in turn video.load(); </script>