HTML/JS生成指定时间戳视频缩略图失败，求更优解法

背景与需求 #

我正在开发HTML/JavaScript项目，需要生成上传视频指定时间戳的缩略图列表。找到一段捕获视频当前画面的代码：

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');
}

尝试的实现代码 #

基于这段代码，我编写了如下实现：

<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", ()=>{ // 点击生成视频时间戳缩略图
    timestamp01.setAttribute("src", captureVideoTime(uploadedVideo,1)) // 捕获1秒处画面
    timestamp02.setAttribute("src", captureVideoTime(uploadedVideo,4))
    timestamp03.setAttribute("src", captureVideoTime(uploadedVideo,7)) // 捕获7秒处画面
})
// ... 其他代码
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');
}
</script>

遇到的问题 #

这段代码并未捕获到指定时间（1秒、4秒、7秒）的画面，反而始终捕获视频当前播放时间的画面。我猜测是video.currentTime = time的执行时机问题，但不确定具体原因。

我尝试过多种解决方案，包括解绑seeked事件、使用相关createPoster函数、在timeupdate事件触发时截图，但都没有得到理想结果。

当前可行但冗余的代码 #

我编写了以下代码可以正常工作，但代码重复度高，想知道有没有更简洁的解决方案：

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})   
})

内容的提问来源于stack exchange，提问作者DIO