我把视频字幕工具做进了浏览器里
内容提要
作者因缺少顺手的视频加字幕工具，开发了纯浏览器运行的“字幕工作室”。拖入本地MP4即可在时间轴分段编辑字幕、调整样式并实时预览，导出带字幕视频，无需注册、后端和水印。工具使用WebCodecs逐帧解码编码，mp4box解析、mp4-muxer封装，视频全程留在本地，状态存于IndexedDB。目前支持本地音频识别自动生成字幕，推荐桌面版Chrome或Edge。
延伸解读
本地处理的优势与代价
工具坚持视频不上传，所有处理在浏览器内完成，编辑状态和最近视频通过IndexedDB保存，下次打开可继续。这避免了隐私担忧和服务器依赖，但代价是缓存依赖浏览器配额，清空站点数据会丢失；超大视频受设备内存和编码器限制，且目前最稳妥的环境是桌面版Chrome或Edge，Safari和部分编码格式受平台能力约束。
导出流程的技术难点
导出并非简单截图，而是用WebCodecs逐帧解码原视频，将画面和字幕绘制到画布，再用VideoEncoder编码，最后交给mp4-muxer封装。音频若为AAC则直接转封装，避免重处理。实际实现需处理编码器延迟返回元数据、解码编码队列的背压、视频帧及时释放，以及不同浏览器版本对H.264支持的差异，重点在于让长视频在有限内存下稳定运行。
定位与适用场景
字幕工作室不是完整的视频剪辑器，定位很窄，只处理字幕。它适合已剪完视频、只需添加字幕的收尾工作，支持时间轴分段编辑、样式调整和实时预览，可统一设置或单独覆盖某段样式。无需注册、后端和水印，打开网页就能完成具体任务，用完关掉页面，项目留在本地，适合不想打开昂贵剪辑软件或上传文件的用户。
Q&A
字幕工作室是什么？它主要用来做什么？
字幕工作室是一个完全运行在浏览器里的视频字幕编辑和烧录工具。拖入本地MP4后，可以在时间轴上分段编辑字幕、调整样式并实时预览，最后导出带字幕的视频。它定位很窄，就是处理字幕这件事，不是完整的视频剪辑器。
字幕工作室需要注册或上传视频到服务器吗？
不需要。它不用注册，没有后端，也没有水印。整个过程中视频不会上传，编辑状态和最近使用的视频通过IndexedDB存在浏览器里，下次打开可以继续。
字幕工作室如何实现视频导出？用了哪些技术？
导出时使用WebCodecs的VideoDecoder逐帧解码原视频，把画面和字幕一起绘制到画布上，再用VideoEncoder编码，最后交给mp4-muxer封装。音频如果是AAC，就直接转封装进新文件。原视频解析交给mp4box。
字幕工作室支持自动生成字幕吗？
支持。当前更新支持本地识别音频，转为文字自动生成字幕到对应的时间节点，然后可以手动调节内容，因为识别也不是100%准确。
使用字幕工作室有什么限制或注意事项？
缓存依赖浏览器配额，清空站点数据就会丢失；超大视频受设备内存和编码器限制。目前最稳妥的环境是桌面版Chrome或Edge，Safari和部分视频编码格式会受到平台能力约束。
字幕工作室的编辑功能有哪些？
时间轴是核心。视频播放到某个位置，可以添加字幕段，编辑文字和起止时间。字幕段可以拖动、复制、删除，预览区实时叠加字幕。样式可以统一设置，也可以单独覆盖某一段，颜色、字号、透明度、位置和对齐方式都能调。
