Asp.net mvc 从视频中获取图像

我想在点击按钮时根据视频的当前时间从视频中抓取图像。我目前正在使用视频标签播放视频，但还没有看到从中获取图像的任何资源

<video
    id="video-player"
    class="video-player"
    width="640"
    controls="controls"
    muted=true>
    <source type="video/mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" id="mp4"></source>
    <source type="video/webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" id="webm"></source>
    <source type="video/ogg" src="http://media.w3.org/2010/05/sintel/trailer.ogv" id="ogv"></source>
    <p>Your user agent does not support the HTML5 Video element.</p>
</video>

您的用户代理不支持HTML5视频元素

这可以通过

画布来完成。假设你有一个视频


....

您可以执行以下操作：

const video=document.getElementById（“视频”）；
const canvas=document.createElement（“canvas”）；
//相应地缩放画布
canvas.width=video.videoWidth；
canvas.height=video.videoHeight；
//在该帧处绘制视频
canvas.getContext（'2d'）
.drawImage（视频，0，0，canvas.width，canvas.height）；
//将其转换为可用的数据URL
const dataURL=canvas.toDataURL（）；

然后，您可以使用
dataURL
执行任何操作，例如将其显示为图像：

var img=document.createElement（“img”）；
img.src=数据URL；

灵感来源于纯JS方式，支持缩放：

/**
*从视频中截图。
*@param videoEl{Element}视频元素
*@param scale{Number}屏幕截图比例（默认值=1）
*@returns{Element}屏幕截图图像元素
*/
功能获取屏幕截图（视频、缩放）{
比例=比例| | 1；
const canvas=document.createElement（“canvas”）；
canvas.width=videoEl.clientWidth*比例；
canvas.height=videoEl.clientHeight*比例；
canvas.getContext（'2d'）.drawImage（videoEl，0，0，canvas.width，canvas.height）；
常量图像=新图像（）
image.src=canvas.toDataURL（）；
返回图像；
}
您的视频播放器是什么？只是基本的视频标签。编辑主要帖子。