Блог

Я использую jwplayer для отображения видео на веб-сайте.

Я ищу плагин jQuery, который может извлекать уменьшенные изображения из этих видео, потому что загрузчики загружают только видео, без миниатюр. Моя цель — показать видео в виде миниатюр в таблице (например, Youtube).

Есть идеи, как я могу этого добиться?

Это не работает с jQuery.Вы не можете заставить jQuery извлекать миниатюры из видеофайла, потому что это библиотека Javascript на стороне клиента, которая даже не знает, что такое «видеофайл».

Что делать вместо этого: Чтобы получить миниатюру видео, вам нужен язык программирования на стороне сервера, который имеет доступ к загруженному видеофайлу. Вероятно, вы можете сделать это с помощью любого языка программирования, если на вашем сервере есть исполняемая программа, которая может извлекать изображения.

Простой рабочий процесс был бы (например): после того, как пользователь загружает файл, ваш веб-сайт вызывает скрипт на сервере, который извлекает миниатюру, и после его завершения вы можете перенаправить пользователя на последнюю страницу.

Итак, например, на вашем сервере вам нужно, ffmpeg а затем посмотрите , что другие используют для получения миниатюр из видеофайлов.

есть способ с использованием 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 amp;amp; !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>  

Когда пользователь загружает видео, показывайте это видео в <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);
    }
}
  

Когда пользователь изменяет или выбирает файл, который является видео, вы должны добавить проверку с использованием файла.введите, если хотите. Функция Show image: она просто использует программу чтения файлов javascript для создания файла base64, чтобы поместить его в атрибут src видео или изображения.
цель: является ли тег видео, который я в него вставил, src = 64base видео
поместить изображение: простая функция проверяет, есть ли в файле видео, если да, то оно переходит в else
сделайте src = HTML-тег файла, в котором пользователь выбирает файл, используя его
target= HTML-тег video, в котором пользователь увидит изображение видео

В заключение, когда пользователь загружает видео со своего устройства, я просто показываю видео в теге video без кнопки воспроизведения, чтобы он мог знать, что его видео готово.