从视频中提取缩略图 - jQuery 插件？

Question

我正在使用jwplayer在网站上显示视频。

我正在寻找一个可以从这些视频中提取缩略图的 jQuery 插件，因为上传者只上传视频，没有缩略图。我的目标是将视频显示为表格中的缩略图（如 Youtube）。

我有什么想法可以实现这一目标吗？

Answer 1

它不适用于 jQuery。您无法让 jQuery 从视频文件中提取缩略图，因为它是一个客户端 Javascript 库，甚至不知道“视频文件”是什么。

该怎么做：为了获得视频缩略图，您需要一种可以访问上传的视频文件的服务器端编程语言。只要您的服务器上有可以提取图像的可执行程序，您就可以使用任何编程语言执行此操作。

一个简单的工作流程是（例如）：用户上传文件后，您的网站调用服务器上的脚本来提取缩略图，完成后，您可以将用户重定向到最终页面。

因此，例如，在您的服务器上，您需要ffmpeg然后查看其他人使用什么从视频文件中获取缩略图。

Answer 2

有一种使用 HTML5 的方法，原始链接 http://jsfiddle.net/vphyr/ `

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

<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();     
                })
            }); 
        });
    
    });