video html5: Is it possible to display thumbnail from video on a specific time?

Question

I use this to have a video player on browser

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

Before clicking play, it display an image from the very beginning of the video, but in most of my video, first several seconds is black screen. Is it possible to make it get image at a specific time of the video, like "0:00:15", without creating thumbnail for the video?

Answer 1

I just want to add one more thing in this I guess you forgot to add preload="metadata" attribute in video tag like the below

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

and one more thing I want to add that this will not starts video after 15 seconds, this will only take an screenshot from video and make it as a first view of the video

Answer 2

Maybe this helps: (I have not tested it. Also you might be able to set the "poster" attribute of the video to the src of the image object. Just try it. =) )

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

$(document).ready(function() {


            var time = 15;
            var scale = 1;

            var video_obj = null;

            document.getElementById('video').addEventListener('loadedmetadata', function() {
                 this.currentTime = time;
                 video_obj = this;

            }, false);

            document.getElementById('video').addEventListener('loadeddata', function() {
                 var video = document.getElementById('video');

                 var canvas = document.createElement("canvas");
                 canvas.width = video.videoWidth * scale;
                 canvas.height = video.videoHeight * scale;
                 canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

                 var img = document.createElement("img");
                img.src = canvas.toDataURL();
                $('#thumbnail').append(img);

                video_obj.currentTime = 0;

            }, false);

        });

Source 1 Source 2