从视频中提取缩略图 - 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>`

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

当用户上传视频时，在 标记中显示该视频。我显示一张图像来通知用户他的视频已准备好，他现在可以按上传按钮将其上传到服务器。

此 MVC 代码只需复制并粘贴并测试它完全可以在其自身上工作

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

<video id="ShowImage" />

这里只需使用输入类型=文件，您可以使用 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);
    }
}

当用户更改或选择视频文件时，您应该使用该文件添加验证。如果您愿意，请输入。显示图像功能：它只是利用javascript文件读取器创建base64文件并将其放入视频或图像的src属性中。
target：是视频的标签，我将视频的src=64base放入其中
放置图像：是简单的功能，检查文件视频是否存在，如果是，则转到其他位置
make src= 用户使用它选择文件的 HTML 文件标记
target=用户将在其中看到视频图像的 HTML 视频标签

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