export function getVideoFrameImage(url, width = 200, height = 200) {
return new Promise((resolve, reject) => {
const video = document.createElement("video");
video.setAttribute("crossOrigin", "anonymous");
video.setAttribute("preload", "metadata");
video.setAttribute("src", url);
// 视频开始可能是黑屏状态
video.currentTime = 1;
video.addEventListener("loadeddata", function () {
const canvas = document.createElement("canvas");
const { videoWidth, videoHeight } = video;
const height = height || videoHeight * (width / videoWidth);
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(video, 0, 0, 200, height);
resolve(canvas.toDataURL("image/jpeg"));
});
});
}
如果是 阿里云 有更方便的方式
<原视频URL>?x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast
使用fast模式截取视频7s处的内容,输出为JPG格式的图片,宽度为800,高度为600\
视频截帧
https://help.aliyun.com/document_detail/64555.html