Extract thumbnail images from a video - jQuery plugin?

Question

I'm using jwplayer to display videos on a website.

I'm looking for a jQuery plugin that can extract thumbnail images from these videos because uploaders upload only the videos, no thumbnails. My aim is to show the videos as thumbnails in a table (like Youtube).

Any ideas how I can achieve this?

Answer 1

It doesn't work with jQuery. You can't get jQuery to extract a thumbnail from a video file because it's a client side Javascript library that doesn't even know what a "video file" is.

What to do instead: In order to get a video thumbnail you need a server side programming language that has access to the uploaded video file. You can probably do this with any programming language as long as you have an executable program on your server that can extract images.

A simple workflow would be (for example): After the user uploads the file, your website calls a script on the server that extracts the thumbnail and after it has finished, you can redirect the user to the final page.

So, for example, on your server you need ffmpeg and then see what others use to get thumbnails from video files.

Answer 2

there a way using HTML5, Original link http://jsfiddle.net/vphyr/`

<input type="button" id="capture" value="Capture" /> Press play, and then start capturing
<div id="screen"></div>`

var VideoSnapper = {
    
        /**
         * Capture screen as canvas
         * @param {HTMLElement} video element 
         * @param {Object} options = width of screen, height of screen, time to seek
         * @param {Function} handle function with canvas element in param
         */
        captureAsCanvas: function(video, options, handle) {
        
            // Create canvas and call handle function
            var callback = function() {
                // Create canvas
                var canvas = $('<canvas />').attr({
                    width: options.width,
                    height: options.height
                })[0];
                // Get context and draw screen on it
                canvas.getContext('2d').drawImage(video, 0, 0, options.width, options.height);
                // Seek video back if we have previous position 
                if (prevPos) {
                    // Unbind seeked event - against loop
                    $(video).unbind('seeked');
                    // Seek video to previous position
                    video.currentTime = prevPos;
                }
                // Call handle function (because of event)
                handle.call(this, canvas);    
            }

            // If we have time in options 
            if (options.time && !isNaN(parseInt(options.time))) {
                // Save previous (current) video position
                var prevPos = video.currentTime;
                // Seek to any other time
                video.currentTime = options.time;
                // Wait for seeked event
                $(video).bind('seeked', callback);              
                return;
            }
            
            // Otherwise callback with video context - just for compatibility with calling in the seeked event
            return callback.apply(video);
        }
};

$(function() {
    
        $('video').bind('video_really_ready', function() {
            var video = this;
            $('input').click(function() {
                var canvases = $('canvas');
                VideoSnapper.captureAsCanvas(video, { width: 160, height: 68, time: 40 }, function(canvas) {
                    $('#screen').append(canvas);                         
                    if (canvases.length == 4) 
                        canvases.eq(0).remove();     
                })
            }); 
        });
    
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<video id="video" controls preload="none" width="640" poster="http://media.w3.org/2010/05/sintel/poster.png" onloadedmetadata="$(this).trigger('video_really_ready')">
        <source id='mp4' src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4' />
        <source id='webm' src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm'/>
        <source id='ogv' src="http://media.w3.org/2010/05/sintel/trailer.ogv" type='video/ogg' />
    </video>
    <br />
    
    <input type="button" id="capture" value="Capture" /> Press play, and then start capturing
    <div id="screen"></div>

Answer 3

When the user upload video, show this video in a <Video/> tag. I show an image to inform the user that his video is ready and he could press upload button now to upload it to server.

This MVC code just copy and paste and test it work completely on itself

@Html.TextBox("VideoPath", "", new { type = "file", id = "VideoPath", title = "select Only Video Path here" })<br />

<video id="ShowImage" />

Here just use input type=file, you can do it normally with HTML:

document.getElementById('VideoPath').addEventListener('change', putImage, false);
function showImage(src, target) {
    var fr = new FileReader();
    fr.onload = function () {
        target.src = fr.result; //<img src="H://file1.jpg" />
    }
    fr.readAsDataURL(src.files[0]);
}
function putImage() {
    if (!document.getElementById("VideoPath").files[0].type.match('video.*')) {
        document.getElementById("ShowImage").style["display"] = "none";
        document.getElementById("Error").innerHTML = "Please Select video File Only (Recommended Mp4) Size LowerThan 100mb";
        document.getElementById("VideoPath").value = "";
    }
    else {
        document.getElementById("Error").innerHTML = "";
        var src = document.getElementById("VideoPath");
        var target = document.getElementById("ShowImage");
        target.style["display"] = "block";
        showImage(src, target);
    }
}

When the user change or select file which is a video, you should add validation using the file.type if you wish. Show image function: it just makes use of javascript file reader to create base64 file to put it in src attribute of video or image. target: is the tag of video which I put in it the src=64base of the video put image: is simple function check the if the file video if yes it goes to else make src= the HTML file tag where the user select the file using it target=the HTML video tag where the user will see an image of the video

For conclusion, as the user upload video from his device what I did is just show the video in video tag without play button so he could know that his video ready.