Javascript 使用（html5画布）从视频中获取海报

我想从视频文件中提取我的海报图像。我尝试了html5和canvas（），但当我点击图像将其存储在下面时，没有显示任何内容，我检查了代码，发现没有生成“src”！ 看看这里应该是什么样子：

我的目标是将图像保存到我的项目文件夹中！ 守则：

从画布中的视频中截取屏幕抓图
*{边距：0；填充：0；字体大小：15px；字体系列：calibri、arial、sans serif}
页脚、节、页眉{display:block；}
正文{padding:2em；背景：#666；颜色：#fff；}
h1{字体大小：24px；边距：10px 0；}
h2{字体大小：18px；边距：10px 0；颜色：石灰；}
画布{显示：块；边框：2px实心#000；}
#视频，#canvas{float:left；padding right:10px；}
#视频{宽度：640px；}
#保存li{列表样式：无；边距：0；填充：0}
#保存{清除：两者；填充：10px 0；溢出：自动；}
#保存img{float:left；padding right:5px；padding bottom:5px；}
页脚a{color:lime；}
页脚p{边距：5em 0 1em 0；填充：1em 0；边框顶部：1px实心#999}
从画布上的视频截图（Chrome、Mozilla、Opera、Safari——可能是IE（没有windows））
只需播放视频。每次暂停时，您都可以看到右侧的屏幕截图。单击屏幕截图将其存储在下面的收藏中

视频：
预览（单击以存储以下图像）：
您保存的图像：

作者
- 

（功能（）{
var v=document.querySelector（'video'），
n=document.querySelector（'source'）.src.replace（/.*\/\..*$/g'），
c=document.querySelector（'canvas'），
save=document.querySelector（“#save ul”），
ctx=c.getContext（'2d'）；
v、 addEventListener（'loadedmetadata'，函数（ev）{
var比率=v.videoWidth/v.videoHeight，
w=400，
h=parseInt（w/比，10），
时间=0，
img=null，
li=null；
c、 宽度=w；
c、 高度=h+40；
v、 addEventListener（'timeupdate'，函数（ev）{
如果（v.暂停）{
ctx.fillStyle='rgb（0,0,0）'；
ctx.fillRect（0,0,w,h）；
ctx.drawImage（v，0，40，w，h）；
ctx.font='20px Calibri'；
ctx.fillStyle='石灰'；
ctx.fillText（n，5，20）；
时间=格式（v.currentTime）；
ctx.fillStyle='白色'；
ctx.fillText（时间，395-ctx.measureText（时间）.width，20）；
}
}，假）；
c、 addEventListener（'click'，函数（ev）{
li=document.createElement（'li'）；
img=document.createElement（'img'）；
李.儿童（img）；
拯救儿童（李）；
img.src=ctx.canvas.toDataURL（'image/png'）；
}，假）；
}，假）；
函数格式（时间）{
var小时数=parseInt（（时间/60/60）%60,10），
分钟=parseInt（（时间/60）%60,10），
秒=parseInt（时间，10）%60，
小时数=（小时数<10？'0'：''）+parseInt（小时数，10）+'：'，
分钟=（分钟<10？'0'：''）+parseInt（分钟，10）+'：'，
secss=（secs<10？'0'：''）+（secs%60），
时间字符串=（小时！='00:'？小时：''）+分钟+秒；
返回时间串；
};
})();

感谢您的评论，但问题在于“单击”事件而不是“时间更新”。如果检查代码源代码，您会发现没有“src”，问题在于这行代码“img.src=ctx.canvas.toDataURL（'image/png'）；”没有执行。我不知道为什么！！嗯，对不起，我错过了这件事。你在控制台没有收到任何错误？像“安全例外”？如果您的视频来自不同的域，则必须使用服务器提供的正确的跨源标题，并且您必须在设置源之前设置视频的

crossOrigin

属性。否则，您的画布将被污染，您将无法调用

toDataURL

。（使用本地视频（localhost，而不是

文件：//

）测试了您的代码，效果良好。请注意，

文件：//

协议也被视为跨源协议，也会污染您的画布。我已经使用本地视频尝试过了（它位于我项目的文件夹中）但它不工作：/local video（本地视频）时，它仍然在服务器上吗？控制台中没有错误吗？local=仅在我的项目的文件夹中，控制台中没有显示错误