Home Canvas .drawImage() function doesn't draw the requested thumbnail of a video

Questions

Canvas .drawImage() function doesn't draw the requested thumbnail of a video

January 25, 2022

I’m trying to create a function where a certain time frame from a video will be displayed as an image. the function accept 2 inputs, namely the path to the video, and the certain second, where the time frame should be displayed.

<!DOCTYPE html>
<html>
<body>

<div id="imageDiv" width="350" height="200"
style="border:1px solid #c3c3c3;">
</div>

<video id="myVideo" width="320" height="176" controls>
</video>

<script type="text/javascript">

// src will be the path to the video
// sec will be the second we want to display from the video

function dispImg(src, sec) {

    var video = document.getElementById("myVideo");
    video.src = src;
    video.type = "video/mp4";
    video.currentTime = sec;

    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    ctx.drawImage(video, 0, 0, 350, 200);
    document.getElementById("imageDiv").appendChild(canvas);
}

dispImg("sample.mp4", 10)
</script>
</body>
</html>

from my current code, I expect the thumbnail displayed in the video section (id="myVideo") is also drawn in the div section (id="imageDiv"). unfortunately it’s not the case, since its all white in the div section.

Is there any suggestion to my problem? thank you for any feedback!

>Solution :

It’s probable that the video hasn’t loaded far enough or hasn’t finished seeking at the time you’re calling drawImage.

If that is the cause, you could wait for an event to trigger, like this:

function dispImg(src, sec) {

    var video = document.getElementById("myVideo");
    video.src = src;
    video.type = "video/mp4";

    // For more events, see:
    // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#events
    video.addEventListener('seeked', (event) => {
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        ctx.drawImage(video, 0, 0, 350, 200);
        document.getElementById("imageDiv").appendChild(canvas);
    });
    // After creating the event handler, change the position of the video.
    video.currentTime = sec;
}

I think when you use the seeked event, you don’t need to wait for events such as canplaythrough.