How can I create a video preview thumbnail?

Question

I want to create the effect when a user hovers over a thumbnail of a video it will preview the video by showing a certain number of frames from that video.

Is there a jquery plugin or other type of tutorial that teaches this effect?

Answer 1

You won't find a specific plugin that will capture all of this behaviour as creating this will involve the use of a few different technologies.

Capturing the Frames

The first step will be capturing frames from the video for use later. If the website is allowing users to upload videos then you will need some way of processing them, the command line tool ffmpeg ( http://ffmpeg.org/ ) will allow you to do this, a similar question of how to extract the individual frames has been answered here: http://ubuntuforums.org/showthread.php?t=1141293

If you're using Rails as your framework then you a file upload tool like Paperclip or CarrierWave provide some nice hooks into the shell for you to use after the upload has finished and you need to process it. You may also want to convert the video to a format that's compatible for serving up and displaying in the browser, possibly through a flash player or HTML5 video element.

Displaying the Frames

Once the frames have been captured you will need to store them on your server and associate them with the video file, again Paperclip or CarrierWave will make this easier to do. The front end logic will follow these steps:

• Render the video files out to the page, display the first captured frame as the default.
• The user moves there mouse over the element triggering a mouseenter event.
• You capture the mouseenter event and start a setInterval timer.
• Each step of the interval, you replace the displayed thumbnail with the next one in the list. Perhaps you could name the files on the server in such a way that it will be easy to construct the name of the next file. When you reach the end of the list, simply display the first thumbnail again.
• When the user moves the mouse out of the element, clear the interval with a clearInterval command.

Answer 2

Convert n frames to an animated gif. Use a single frame of the video as the default state image and swap on hover.

Stop a gif animation onload, on mouseover start the activation