做视频的人大概都遇到过这种小事：视频已经剪完了，只差把字幕贴上去，但为了这么一点收尾工作，还得打开一个不算便宜的剪辑软件，或者把文件传到某个在线网站，等处理、等下载，顺便担心视频会不会留在别人服务器上。
今天我刚好就遇到了这么一个问题，公司需要录制几段简单的教程视频，等我录制完准备添加字幕的时候发现，我找了一圈没找到特别顺手的工具，不是要登录注册就是要上传字幕文件等。
我的需求很简单，就是给一段视频填写几段字幕说明，这么一个简单的需求，硬是折腾了我半天，最后我使用了口播的方式去解决了。但是当我坐下来休息的时候开始思考，为什么没有这么简单的工具，大概率是有的，只是我没找到而已。
想了半天决定自己动手。
于是我做了“字幕工作室”：一个完全运行在浏览器里的视频字幕编辑和烧录工具。拖进一个本地 MP4，在时间轴上分段、写字、调样式，预览满意后直接导出带字幕的视频。不用注册，不用后端，也没有水印。
它不是一个完整的视频剪辑器，定位很窄，就是处理字幕这件事。
时间轴是核心。视频播放到某个位置，添加一个字幕段，再编辑文字和起止时间。字幕段可以拖动、复制、删除，预览区会按照当前播放时间实时把字幕叠加到画面上。样式可以统一设置，也可以单独覆盖某一段，比如大部分字幕都放底部，只有个别说明文字放顶部。颜色、字号、透明度、位置和对齐方式都能调。
真正麻烦的部分其实在导出。浏览器里播放视频很简单，但要把字幕重新画进每一帧，再编码成一个新的 MP4，并不只是截几张图。这里用到了浏览器提供的 WebCodecs，通过 VideoDecoder 逐帧解码原视频，把画面和字幕一起绘制到画布上，再用 VideoEncoder 编码，最后交给 mp4-muxer 封装。音频如果原本是 AAC，就直接转封装进新文件，尽量避免重新处理。
原视频的解析交给 mp4box。导入后先读取分辨率、时长、编码和音轨这些信息，导出时也据此决定能否走完整流程。听着像一条很自然的流水线，实际写起来要处理不少细节：编码器可能延迟返回元数据，解码和编码队列需要一边消费一边背压，视频帧用完必须及时释放，浏览器不同版本对 H.264 的支持也会有差异。很多工作不是“能不能实现”，而是怎样让长视频在内存和性能都有限的情况下尽量稳定。
这个工具坚持本地处理，不是为了显得技术先进，而是因为视频文件本来就适合留在本地。整个过程中视频不会上传，编辑状态和最近使用的视频通过 IndexedDB 存在浏览器里，下次打开可以继续。代价也很明确：缓存依赖浏览器配额，清空站点数据就会丢失；超大视频仍然受设备内存和编码器限制。目前最稳妥的环境还是桌面版 Chrome 或 Edge，Safari 和部分视频编码格式会受到平台能力约束。
我比较喜欢这种形态。它没有后端，没有账号体系，也没有复杂的协作功能，打开网页就能完成一件具体的事。用完关掉页面，项目留在自己的电脑上，不需要考虑文件什么时候会被删除，也不需要为了一个边缘需求维护一整套服务器。
欢迎体验，可以提一些意见和改进方案。
评论