从视频中获取图像 [英] Get an image from the video

问题描述

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

I want to grab an image from a video based on the current time of the video upon button click. I'm currently using the video tag to play the video but have not seen any resource for grabbing an image from that.

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

推荐答案

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

This can be done via canvas. Let's say you have a video

<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做任何您想做的事情，例如将其显示为图像:

You can then do whatever you want with dataURL, such as displaying it as an image:

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

灵感来自 查看全文