从视频中获取图像

本文介绍了从视频中获取图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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;

灵感来自代码编码

这篇关于从视频中获取图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

dataUrl