Я хочу захватывать кадр из видео каждые 5 секунд.

Это мой код 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 = thecanvas.getContext('2d');
    context.drawImage(video, 0, 0, 220, 150);
    var dataURL = thecanvas.toDataURL();

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

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

Проблема, которую я имею, состоит в том, что первые два сгенерированных изображения одинаковы, а изображение продолжительностью 5 секунд не генерируется. Я обнаружил, что миниатюра генерируется до того, как видеокадр определенного времени отображается в< video> тег.

Например, когдаvideo.currentTime = 5, изображение кадра 0s генерируется. Затем видеокадр переходит на время 5 с. Так когдаvideo.currentTime = 10, изображение кадра 5s генерируется.