Question

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

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

我是如何实现这一目标的？

Answer 1

有一种方法使用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 2

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

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

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

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

Answer 3

当用户上传视频时，请以<Video/>标签显示该视频。我显示了一个图像，通知用户他的视频已准备就绪，他现在可以按“上传”按钮将其上传到服务器。

此MVC代码只需复制并粘贴并测试其是否可以完全正常工作

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

<video id="ShowImage" />

这里仅使用输入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 属性中。目标：是视频的标签，我在其中添加了视频的src = 64base 放置图像：是一种简单功能，可检查文件视频是否为“是” make src = HTML文件标记，用户可以在其中选择文件 target = HTML视频标签，用户将在其中看到视频图像

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

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

3 个答案: