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

Question

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

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

有什么想法可以实现这一点吗？

Answer 1

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

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

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

因此，例如，在您的服务器上，您需要ffmpeg，然后查看what others use to get thumbnails from video files。

Answer 2

有一种使用 HTML5 的方法， 原始链接 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

当用户上传视频时，在<Video/> 标签中显示此视频。我显示一张图片通知用户他的视频已经准备好，他现在可以按下上传按钮将其上传到服务器。

这个 MVC 代码只是复制粘贴并测试它自己完全可以工作

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

<video id="ShowImage" />

这里只要使用input type=file，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);
    }
}

当用户更改或选择视频文件时，如果您愿意，您应该使用 file.type 添加验证。显示图像功能：它只是利用javascript文件阅读器创建base64文件并将其放入视频或图像的src属性中。 target：是视频的标签，我把视频的src=64base放在里面 put image：是一个简单的函数，检查文件是否是视频，如果是，则转到 else make src= 用户使用它选择文件的 HTML 文件标签 target=用户将在其中看到视频图像的 HTML 视频标签

总而言之，当用户从他的设备上传视频时，我所做的只是在没有播放按钮的视频标签中显示视频，这样他就可以知道他的视频准备好了。