HTML/JS) To display timestamp list of video (capture video image at specific timestamp)

Question

I am working on html/javascript. I want make thumbnail image list of specific timestamp in uploaded video. I found a following code, which captures current image of video.

            function captureVideo(video) {
                var canvas = document.createElement("canvas");
                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;
                var canvasContext = canvas.getContext("2d");
                canvasContext.drawImage(video, 0, 0);
                return canvas.toDataURL('image/png');
            }

by using this, i wrote a following code.

        <input id="vidImgButton" type="button" value="Set timestamp images" >
        <img id = "timestamp01" width = "160" height="120">
        <img id = "timestamp02" width = "160" height="120">
        <img id = "timestamp03" width = "160" height="120">

...
        <script>
...
            vidImgButton.addEventListener("click", ()=>{ // click to set image list describing video.
                timestamp01.setAttribute("src", captureVideoTime(uploadedVideo,1)) // captures image at 1s
                timestamp02.setAttribute("src", captureVideoTime(uploadedVideo,4))
                timestamp03.setAttribute("src", captureVideoTime(uploadedVideo,7)) // captures image at 7s 
            })
...
            function captureVideoTime(video, time) {
                var canvas = document.createElement("canvas");
                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;
                var canvasContext = canvas.getContext("2d");
                video.currentTime = time; // 
                canvasContext.drawImage(video, 0, 0);
                return canvas.toDataURL('image/png');
            }

Instead of capturing video image at (1s, 4s, 7s), this code captures video image at current time. In other words, the result of this modified code does not changed at all. Maybe code 'video.currentTime = time' executes after the event ends, and that is why this code does not works? I have no idea.

What should I do? Please share your knowledge. Thank you.

I tried solution at following link and had no favoroble result as well : Capturing an image for a specific time, within a HTML5 video

Tried unbinding seeked event, pasted 'createPoster' function at link, took snaps on timeupdate event,

Tried following code, it works but well.... I wonder if there's more clever solution

            timestamp01.addEventListener("click", ()=>{
                videoInput.currentTime = timestamp[0];
                uploadedVideo.addEventListener('seeked', ()=>{
                    timestamp01.setAttribute("src", captureVideo(uploadedVideo))
                }, {once:true})   
            })
            timestamp02.addEventListener("click", ()=>{
                videoInput.currentTime = timestamp[1];
                uploadedVideo.addEventListener('seeked', ()=>{
                    timestamp02.setAttribute("src", captureVideo(uploadedVideo))
                }, {once:true})   
            })
            timestamp03.addEventListener("click", ()=>{
                videoInput.currentTime = timestamp[2];
                uploadedVideo.addEventListener('seeked', ()=>{
                    timestamp03.setAttribute("src", captureVideo(uploadedVideo))
                }, {once:true})   
            })

Answer 1

I would rather carry out this from serverside because it cannot be done only by targeting in clientside (images's), as it will become heavylifting from the front end.

Client Side Method:

<video id="video" controls>
  <source src="your-video-file.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
<canvas id="canvas"></canvas>

<script>
const video = document.getElementById("video");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

video.addEventListener("loadedmetadata", function() {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
}

Example : When a user sees a video on YouTube, the site's servers send these thumbnails, which are saved as JPEG files. The thumbnail of a video will grow and begin playing a preview when a user hovers over it in the search results or on the watch page, giving them a clearer understanding of what the video is about.

<img id="thumbnail" src="your-thumbnail-image.jpg">

<script>
const thumbnail = document.getElementById("thumbnail");

// Modify the thumbnail's properties, such as its width and height
thumbnail.width = 150;
thumbnail.height = 100;

// Add an event listener to handle user interactions
thumbnail.addEventListener("click", function() {
  // Perform some action, such as playing the video
});
</script>