asp.net-mvc - 从视频中获取图像

Question

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

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

Answer 1

这可以通过 canvas 来完成。假设您有一个视频

<video id="video" controls="controls">
  ....
</video>

您可以执行以下操作:

const video = document.getElementById("video");

const canvas = document.createElement("canvas");
// scale the canvas accordingly
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
// draw the video at that frame
canvas.getContext('2d')
  .drawImage(video, 0, 0, canvas.width, canvas.height);
// convert it to a usable data URL
const dataURL = canvas.toDataURL();

然后您可以使用 dataURL 做任何您想做的事情，例如将其显示为图像:

var img = document.createElement("img");
img.src = dataURL;

灵感来自 odetocode