我正在对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", ()=>{ // 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');
}这段代码不是在（1 s，4s，7s）捕获视频图像，而是在当前时间捕获视频图像。换句话说，这段修改后的代码的结果根本没有改变。也许代码'video.currentTime = time'在事件结束后执行，这就是为什么这段代码不起作用？我不知道。
我该怎么办？请分享你的知识。谢谢。
我在以下链接尝试解决方案，也没有好的结果：在HTML5视频中捕获特定时间的图像
已尝试取消绑定搜索事件，在链接处粘贴“createPoster”函数，在时间更新事件上拍摄快照，
尝试以下代码，它的工作，但好....我想知道是否有更聪明的解决方案
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})
})
2条答案
按热度按时间t30tvxxf1#
我宁愿从服务器端执行这一点，因为它不能只通过在客户端（图像的）目标，因为它将成为从前端繁重。
客户端方法：
例如：当用户在YouTube上观看视频时，该网站的服务器会发送这些缩略图，这些缩略图会保存为JPEG文件。当用户在搜索结果或观看页面中悬停在视频上时，视频的缩略图会变大并开始播放预览，使用户更清楚地了解视频的内容。
wkftcu5l2#
我自己找到了解决办法，多亏了我的同事。
这个问题似乎发生，因为渲染引擎的性能被迫受到限制（虽然不确定）。
要解决此问题，请使用setTimeout（）函数使其具有顺序性。
对于那些谁是有simmilar问题，我希望这个代码有帮助。