Eu tenho 3 telas em uma linha e, em cada uma, quero colocar uma imagem (captura de tela de um vídeo, em horário diferente). O problema é que todas as três capturas de tela são ao mesmo tempo (a última vez especificada). Abaixo está o meu código JavaScript.

function getVideoScreenShot(videoFile, currentIncidentTime, idx) {
    var images = [];

    for(var canvas=1; canvas<=3; canvas++) {
        var canvasId = "#canvas"+ idx + canvas;

        var milisec = parseInt(currentIncidentTime)%1000;
        var secFromMilisec = milisec/1000;

        var sec = (parseInt(currentIncidentTime)/1000)%60;
        sec = "" + sec + "";
        sec = parseInt(sec.substring(0,2));

        var min = ((parseInt(currentIncidentTime)/1000)/60)%60;
        min = "" + min + "";
        min = parseInt(min.substring(0,2));
        var secFromMin = min * 60;

        var seconds = secFromMilisec+sec+secFromMin;

        if (canvas == 1) {
            seconds = seconds - 1;
        } else if (canvas == 3) {
            seconds = seconds + 1;
        } else {
            seconds = seconds;
        }

        images.push({canvas: canvasId, time: seconds});
    }

    console.log(images);
    var video = document.createElement('video');
    video.addEventListener('loadedmetadata', function ()
    {
        var ratio = video.videoWidth / video.videoHeight;
        var w = video.videoWidth;
        var h = w / ratio;

        for (var i = 0; i < images.length; i++) {
            images[i].canvas = document.querySelector(images[i].canvas);

            images[i].canvas.width = w;
            images[i].canvas.height = h;
        }
        draw(video, images);
    });

    video.src = videoFile;
}

function drawFrame(video, time, canvas) {
    var context = canvas.getContext("2d");
    video.addEventListener("seeked", function (e) {
        e.target.removeEventListener(e.type, arguments.callee);
        context.fillRect(0, 0, canvas.width, canvas.height);
        context.drawImage(video, 0, 0, canvas.width, canvas.height);
    });
    console.log(time, "time to draw frame");

    video.currentTime = time;
}

function draw(video, images) {
    for (var i = 0; i < images.length; i++) {
        drawFrame(video, images[i].time, images[i].canvas);
    }
}