Video HTML5: How to Display Thumbnail from Video on a Specific Time

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

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

How to set the thumbnail image on HTML5 video?

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?

How to capture thumbnails (frame) from video with HTML5 and Jquery?

Check the following:
https://jsfiddle.net/psbqn9d0/1/

It won't create the view you shown in the picture, but will change the thumbnail every 5 second. I have also added few logging to help you understand the code.

Now, if you want to achieve what is shown in figure then this is possible:-

if you have loaded the video completely. Then create all the thumbnails and add them to the container.
you create the thumbnails on the server and send them to user (like done by most video sites (so we can see what is in the video without loading!))
OR you can create all the thumbnails without loading the whole video. I am not sure if this is the best way, but this will definitely work.

You should create another video tag with the same source link, and hide it using css. Then you will create a javascript function which will seek it to every 5th second programmatically and keep saving the thumbnails and adding them in your container. This way, your thumbnails will be generated for the whole video without loading the whole video.

I hope it clarifies your doubts!

How can I use javascript to get the thumbnail of an html5 video?

Yes, you can use video as image source for canvas. Just wrap the code as a function which takes video and size as arguments, and return a canvas element.

The video must be loaded and at the frame you want to snapshot.

Example methods

function createThumb(video, w, h) {
  var c = document.createElement("canvas"),    // create a canvas
      ctx = c.getContext("2d");                // get context
  c.width = w;                                 // set size = thumb
  c.height = h;
  ctx.drawImage(video, 0, 0, w, h);            // draw in frame
  return c;                                    // return canvas
}

The canvas can be inserted into DOM and used as the image holder. If you prefer an image element you would have to do a couple of more steps, as well as handle the asynchronous nature of image loading using a callback (or promise):

function createThumb(video, w, h, callback) {
  var c = document.createElement("canvas"),    // create a canvas
      ctx = c.getContext("2d"),                // get context
      img = new Image();                       // final image
  c.width = w;                                 // set size = thumb
  c.height = h;
  ctx.drawImage(video, 0, 0, w, h);            // draw in frame
  img.onload = function() {                    // handle async loading
    callback(this);                            // provide image to callback
  };
  img.src = c.toDataURL();                     // convert canvas to URL
}

If you get problems with the size of the video frame, you can replace the drawImage() arguments with this:

ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, w, h);

I want to get a thumbnail when hovering over the playing time bar

You have to need just follow the documentation!

<link href="https://vjs.zencdn.net/5-unsafe/video-js.css" rel="stylesheet" /><script src="https://vjs.zencdn.net/5-unsafe/video.js"></script>

<div id="instructions">
  <video id="my_video_1" class="video-js vjs-default-skin" width="640px" height="267px" controls preload="none" poster='http://video-js.zencoder.com/oceans-clip.jpg' data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>    <source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />    <source src="https://vjs.zencdn.net/v/oceans.webm" type='video/webm' />  </video>

</div>
<style>  #instructions {    max-width: 640px;    text-align: left;    margin: 30px auto;  }    #instructions textarea {    width: 100%;    height: 100px;  }  /* Show the controls (hidden at the start by default) */    .video-js .vjs-control-bar {    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;  }  /* Make the demo a little prettier */    body {    margin-top: 20px;    background: #222;    text-align: center;    color: #aaa;    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;    background: radial-gradient(#333, hsl(200, 30%, 6%));  }    a,  a:hover,  a:visited {    color: #76DAFF;  }</style>

HTML/JS) To display timestamp list of video (capture video image at specific timestamp)

I would rather carry out this from serverside because it cannot be done only by targeting in clientside (images's), as it will become heavylifting from the front end.

Client Side Method:

<video id="video" controls>
  <source src="your-video-file.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
<canvas id="canvas"></canvas>

<script>
const video = document.getElementById("video");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

video.addEventListener("loadedmetadata", function() {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
}

Example :
When a user sees a video on YouTube, the site's servers send these thumbnails, which are saved as JPEG files. The thumbnail of a video will grow and begin playing a preview when a user hovers over it in the search results or on the watch page, giving them a clearer understanding of what the video is about.

<img id="thumbnail" src="your-thumbnail-image.jpg">

<script>
const thumbnail = document.getElementById("thumbnail");

// Modify the thumbnail's properties, such as its width and height
thumbnail.width = 150;
thumbnail.height = 100;

// Add an event listener to handle user interactions
thumbnail.addEventListener("click", function() {
  // Perform some action, such as playing the video
});
</script>