I'm creating a video player with HTML5 and Javascript and I'm wondering if anyone has solved the challenge of creating dynamic thumbnails.

Mimicking youtube video player where you hover over progress bar and a popup shows with a thumbnail. I know that youtube saves out an image and repositions the sprite in the thumbnail viewer frame based on position hovered over.

Is this viable to do with JS and canvas?

What I'm doing now is... hovering over my progress bar creates a copy of the video element. I then set the currentTime on the copied element. I then grab a snapshot using canvas. I'm not sure why, but the images seem to be blank.

Maybe someone has run into this problem?

I'm creating a video player with HTML5 and Javascript and I'm wondering if anyone has solved the challenge of creating dynamic thumbnails.

Mimicking youtube video player where you hover over progress bar and a popup shows with a thumbnail. I know that youtube saves out an image and repositions the sprite in the thumbnail viewer frame based on position hovered over.

Is this viable to do with JS and canvas?

What I'm doing now is... hovering over my progress bar creates a copy of the video element. I then set the currentTime on the copied element. I then grab a snapshot using canvas. I'm not sure why, but the images seem to be blank.

Maybe someone has run into this problem?

• javascript
• video
• canvas

• You can also write a function that listens to playback/buffer event and creates snapshots onto a canvas. So at any given time we will have screenshots upto the current buffer. These canvases are tagged to each keyframes and by default hidden. When user hovers over the timeline, we show the associated canvas. – Vijay Dev Commented Nov 18, 2015 at 3:28
• I can create a jsfiddle and share a sample with you. – Vijay Dev Commented Nov 18, 2015 at 3:29
• Yeah @VijayDev i would love to see this implemented simply. I had thought about this, but seemed like it could start using a lot of memory? Not sure though... – ZiggidyCreative Commented Nov 19, 2015 at 1:09
• You've probably moved on and/or fixed this by now, and I see you already accepted an answer. Just in case, I wonder if the blank image problem in the canvas is CORS-related. Canvas needs special headers in the response, if the image is from a different domain, even though <img> and CSS background images don't. – trysis Commented Aug 17, 2018 at 13:37
• @trysis Yeah i have moved on and I have no idea what i ever did with this. Thanks for ment though! – ZiggidyCreative Commented Aug 17, 2018 at 17:35

2 Answers 2

YouTube have pre rendered thumbs that are stored in a single image in a grid with ten columns and how ever many rows are needed. The thum images I have seen are low quality jpg 800 pixels across giving thumbs 80 pixels by ?? (depending on aspect) When the user hovers the thumb closest to the that time is displayed.

Creating the thumbs at the client side will be problematic because video are not entirely random access. Seeking to a random location involves the video moving to the nearest previous keyframe and then decoding all frames till it gets to the frame you have requested. Depending on the format, encoding options, the spacing of key frames (if any rolling eyes), and if the seek location has been loaded, seeking to some location can be very slow. Getting a set of thumbs for a video can take a long time. The additional problem with the HTML5 video API is that it has only one playback channel, so while you are seeking for thumbs you can not watch the video.

You problem with blanks may be due to not waiting for the seek event.

Try

video.addEventListener("seeked",function(e){
    // snap shot code here
});

But this does not always work I have found. So it pays to listen to all the appropriate events, and only seek when the video is ready. Here is a list of media events that will help.

As videos don't change your best bet is to create the thumbs on your server after the video has been uploaded. Low quality jpgs seem to be the go and will be loaded by the client much sooner than even a fraction of the video has been.

However, this can be achieved by using a bination of HTML5 canvas. You will have to do the following.

1. add an timeupdate event listener to the HTML5 video
2. at each 1 sec, grab the current time and create an element (span is this case) and bind the value of the current time in a special attribute of the newly created span
3. Append each created span element to your HTML5 progress element (I suppose you're using 'div' and not 'progress' element.
4. Add an mouseenter event listener to the created span.
5. Whenever the user hovers the progress bar, the mouse would eventually touches one of the span. Then, dynamically create a video element and set the src attribute with the main HTML5 video source. Then, set the currentTime to the value of the hovered span and snapshot it to an already canvas element.
6. There, you show the user the current frameRate.

Scripting is all about manipulations and gradually processes of putting pieces of codes to work.