做视频处理时，会有截屏的场景，也称视频快照。今天介绍一下多张快照和单点快照。
视频快照
支持单点快照，即视频播放到某个时间点，获取快照多张快照，即从某个时间点开始，间隔一定时间，批量生成多张快照可定制快照张数可定制快照时间间隔快照可下载代码实现
canvas绘制截屏// 截图 function captureScreenshot() { const {width,height} = mediaInfo; const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d')!; // 设置画布尺寸为视频原始分辨率 canvas.width = width; canvas.height = height; // 绘制视频帧到画布 ctx.drawImage(videoRef.current!, 0, 0, canvas.width, canvas.height); const url = canvas.toDataURL('image/png'); return url; }多张快照// batch 批量生成快照const batchCreateShots = async(count:number) => { if (!file) { alert('请先选择文件'); }; setloading(true); setList([]); // 获取当前视频时间点 const cur_time = videoRef.current!.currentTime; for (let i = 0; i < count; i++) { const video = videoRef.current; if(!video) return; // 计算当前时间点,取浮点数 const time = +(cur_time + i * intervalTime).toFixed(2); // 时间超出时选择视频最后一帧 const currentTime = Math.min(time,mediaInfo.duration); // 设置视频当前时间点 videoRef.current!.currentTime = currentTime; await new Promise(resolve => { // 监听视频帧绘制完成事件 videoRef.current!.addEventListener('seeked', async()=>{ resolve(true); }, { once: true }); }); console.log('videoRef.current!.currentTime===', videoRef.current!.currentTime); const url = captureScreenshot(); setList(pre=>[...pre,url]); await sleep(100); } setloading(false); }获取音视频的信息/** * 获取音视频文件的元数据信息 * @param file - 音视频文件对象 * @returns 包含文件名、大小、时长、分辨率、类型等信息的Promise对象 */export async function getMediaInfo(file: File): Promise<{ name: string; size: number; duration: number; width: number; height: number; type: string;}> { return new Promise((resolve, reject) => { const video = document.createElement('video'); video.preload = 'metadata'; video.src = URL.createObjectURL(file); video.onloadedmetadata = () => { resolve({ name: file.name, size: file.size, type: file.type, duration: video.duration, width: video.videoWidth, height: video.videoHeight }); URL.revokeObjectURL(video.src); // 释放内存 }; video.onerror = (error) => { URL.revokeObjectURL(video.src); reject(new Error('无法解析媒体文件')); }; });}本文来自作者[绿夏]投稿，不代表百搭号立场，如若转载，请注明出处：https://bdnews.shjy.cc/dqbk/510810275.html
评论列表（4条）
我是百搭号的签约作者“绿夏”！
希望本篇文章《javascript视频（JS 视频截屏视频快照）》能对你有所帮助！
本站[百搭号]内容主要涵盖：育
本文概览：做视频处理时，会有截屏的场景，也称视频快照。今天介绍一下多张快照和单点快照。视频快照支持单点快照，即视频播放到某个时间点，获取快照多张快照，即从某个时间点开始，间隔一定时间，批...