视频转 GIF/APNG/WebM

在线视频转 GIF / APNG / WebM 工具

视频转 GIF/APNG/WebM是纯前端的视频格式转换利器，上传 mp4 / webm / mov 等浏览器可识别的视频，截取任意时间段，一键导出为 GIF 动图、APNG 无损动画、WebM 视频或 PNG/JPG 帧序列。所有处理在浏览器本地完成，视频不上传服务器，可以安全处理私密素材。

支持的输出格式

• GIF：最通用的动图格式，几乎所有平台都能展示，但色深仅 256 色，适合表情包、UI 演示
• APNG：动画 PNG，24bit 真彩色 + alpha 透明度，画质远超 GIF，体积也更小（同等质量约为 GIF 的 60%）
• WebM：现代 Web 视频格式，VP9/VP8 编码，体积最小（通常是 GIF 的 1/5），但部分微信/钉钉聊天框不直接展示动画
• PNG 序列 ZIP：每帧无损 PNG 打包下载，适合后期再用 Premiere / AE 处理
• JPG 序列 ZIP：每帧 JPG（质量 50~100%）打包，体积比 PNG 小

核心参数

• 时间区间：双滑块拖拽选时间段，或用"⏱起=当前/⏱终=当前"按钮在播放定位时一键取值
• FPS：每秒帧数 2~30 可调，越高越流畅但文件越大。表情包 8-12 FPS 即可
• 输出尺寸：保留原始 / 等比缩放 10~100% / 自定义宽高（可锁定原始比例）
• 循环：无限循环或仅播放 1 次（适合单次提示动画）
• GIF 压缩等级：1~30，越高文件越小但画面失真也越明显
• WebM 比特率：0.5~10 Mbps 可调，常规分享 1-2 Mbps 即可

使用场景

1. 制作表情包

剪一段 1-3 秒的搞笑片段，输出 GIF（FPS 10、宽度 320 像素），文件控制在 2MB 以内可发到几乎所有聊天软件。

2. 产品 Demo 动图

把产品操作录屏的关键 5 秒抽出来转 GIF / APNG，写到 README 或产品介绍页，比静态图更有说服力。APNG 适合需要清晰文字的 UI 演示。

3. 网页背景视频

WebM 体积小、可循环播放，是 H5 落地页背景动画的最佳选择。导出后用 <video autoplay loop muted> 嵌入即可。

4. 提取视频中的关键帧

选 PNG/JPG 序列输出，再配合 FPS 1（每秒一帧）就是简易的"视频抽帧"工具，可用于做素材库或 AI 训练数据。

性能与体积建议

• GIF 帧数超过 200 会出现性能警告，超过 600 会二次确认。建议时长 ≤ 5 秒、FPS ≤ 12
• 分辨率影响最大：4K 视频抽帧到 1080p 体积差 4 倍，建议先按用途缩到 480-720 宽度
• 动图重在"循环看不腻"，画质够用即可，没必要追求电影级清晰度

技术细节（给开发者看）

• 抽帧通过 <video> 元素逐帧 currentTime = t 跳转 + canvas.drawImage 截图，每 5 帧让出主线程避免 UI 卡死
• GIF 编码用 gif.js@0.2 在 WebWorker 里跑，不阻塞主线程
• APNG 编码用 UPNG.js + pako，支持真彩色与 alpha 通道
• WebM 通过 canvas.captureStream(fps) + MediaRecorder 录制，setTimeout(1000/fps) 同步驱动确保不丢帧
• ObjectURL 在加载新视频和卸载页面时自动 revoke 防止内存泄漏

相关工具

需要把多张图片合成 GIF？用 GIF 制作。需要批量裁剪图片？用 图片大小变更。需要给图片加水印？用 图片加文字。