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

Answer 1

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

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

This will starts video after 15 seconds.

Answer 2

Using the poster attribute is the easiest way to go. Getting a preview image of the video from a time other than the start is exactly what its designed for.

http://www.w3schools.com/tags/att_video_poster.asp

Trying to create a function to dynamically grab another segment of the video to use as the poster will undoubtedly create more latency and overhead for the client, negatively affecting the UX.

Answer 3

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

Answer 4

I did it this way:

It jumps to 0 if the currentTime is 15, but will go over the 15s mark when played

html:

<video id="video1" src="path/to/video#t=15" onplay="goToStart()"  controls ></video>

javascript:

function goToStart(){
    if (document.getElementById('video1').currentTime == 15){
    document.getElementById('video1').currentTime = 0;
    }
}

Answer 5

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