Как захватить миниатюры (фреймы) из видео с HTML5 и Jquery?

Question

У меня есть простой блок, в котором я хотел бы захватывать кадр из видео каждые 5 секунд и отображать их примерно так, как показано ниже.

Вот решение, которое я попробовал.

<video id="video" controls="controls">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4">
    </source>
</video>

<div id="time-ruler"></div>
<canvas id="canvas" width="300" height="300"></canvas>

<div id="thumbnailContainer"></div>

Вот JavaScript

video.addEventListener('loadeddata', function() {
    var duration = video.duration;
    var i = 0;

    var interval = setInterval(function() {
        video.currentTime = i;
        generateThumbnail(i);
        i = i+5;
        if (i > duration) clearInterval(interval);
    }, 300);
});

function generateThumbnail(i) {
    //generate thumbnail URL data
    var context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, 220, 150);
    var dataURL = canvas.toDataURL();

    //create img
    var img = document.createElement('img');
    img.setAttribute('src', dataURL);

    //append img in container div
    document.getElementById('thumbnailContainer').appendChild(img);
}

Вот jsfiddle: демоверсия

К сожалению, это не работает, как ожидалось.

Что мне нужно сделать, чтобы получить то, что я хочу?

Answer 1

Проверьте следующее: https://jsfiddle.net/psbqn9d0/1/

Это не создаст вид, показанный на картинке, но будет изменять эскиз каждые 5 секунд.Я также добавил несколько журналов, чтобы помочь вам понять код.

Теперь, если вы хотите добиться того, что показано на рисунке, это возможно: -

1. , если вы загрузили видео полностью.Затем создайте все миниатюры и добавьте их в контейнер.
2. Вы создаете миниатюры на сервере и отправляете их пользователю (как это делается на большинстве видео-сайтов), чтобы мы могли видеть, что в видео без загрузки!))
3. ИЛИ вы можете создавать все эскизы без загрузки всего видео.Я не уверен, что это лучший способ, но это точно сработает.

Вам следует создать еще один тег video с той же исходной ссылкой и скрыть его с помощью css.Затем вы создадите функцию javascript, которая будет искать ее каждую 5-ю секунду программным путем, сохраняя миниатюры и добавляя их в свой контейнер.Таким образом, ваши эскизы будут сгенерированы для всего видео без загрузки всего видео.

Надеюсь, это прояснит ваши сомнения!