WebAV 剪切视频

WebAV

AI 视频生成越来越火，作为前端，学习一下视频编辑/显示的功能。

FFmpeg 是视频处理的神器，但它的 API 比较复杂，学习成本较高，处理速度挺慢。暂时不学。

WebCodecs 是新型视频处理的浏览器 API，支持性也好了不少。在前b站员工 风痕 的文章学习下，了解了不少视频知识。但是在自己对使用 mp4box + WebCodecs 的探索下，还是有很多坑。几番尝试后，还是采用，该 blog主的 sdk WebAV 比较合适。

WebAV 注意事项

1. 记得 await clip.ready，ready 自身是一个 Promise，需要等待它完成。不需要 ready() 执行
2. clip.tick 获取帧数据，间隔注意设置大一些，不然会返回 null
   • 查找帧逻辑非直观感受的一帧帧查找，里面涉及 就近、缓存 之类的，一次次查找也比较慢
   • 所以使用 thumbnails 更适合显示帧图片（使用了异步处理）
3. 剪切视频只有 split 分割为两部分，或许可以考虑去贡献个 start - end 的代码
4. clip 没有输出设计，需要使用 Combinator 输出
5. 默认 Combinator 输出文件比较大，需要配置下比率，目前先设置 3e6 比较合适（默认 5e6)
   • 这里编码器的配置，文件并没有多少变化