子舒的博客

一个围绕开发实践组织的个人博客

首页以时间顺序列出文章，并提供文章、周刊、分类、标签、碎碎念、地图和 RSS 等入口。近期条目覆盖多个软件开发场景：既有 Trae 桌面端模型接入 OpenAI 客户端的系列，也有 Xcode 与 HBuilderX 运行模拟器时的排错记录，还有 Cloudflare Workers 评论系统的实现介绍。读者可以从首页了解新文章，也能进入文章归档或分类标签继续查找。

作者的简介提到前端与全栈开发、开源项目参与，以及把自己编写的小工具托管到 GitHub。站点因此既保存完成后的方案，也记录具体问题从出现到处理的过程。对于正在调试类似环境的人，错误信息、所用工具和处理背景能帮助判断文章是否相关；对于关注项目实现的人，系列文章则适合按顺序阅读。

字幕工作室解决的具体问题

“我把视频字幕工具做进了浏览器里”从一个很明确的需求开始：视频已剪好，只需补充几段说明字幕。作者希望避免为了短小的收尾工作而打开大型剪辑软件，也不希望把本地视频传到在线服务。文章介绍的字幕工作室把范围限制在字幕编辑与烧录，不把它描述成完整的视频剪辑器。

使用流程围绕一段本地 MP4 展开。导入后，页面读取视频的分辨率、时长、编码和音轨信息；用户沿时间轴增加字幕片段，为每段填写文字和起止时间，然后播放预览。字幕片段可以拖动、复制和删除。常用样式可以统一设置，也可以针对个别片段覆盖设置，例如让大部分字幕保持在画面底部，只把少量说明文字放到顶部。

样式选项包括颜色、字号、透明度、位置和对齐方式。预览会根据当前播放时间叠加相应字幕，方便检查文字与画面出现的时机。工具的价值在于把“在几个时间点加上文字”这个单一任务变成连贯步骤：选视频、切分时间段、填写内容、调整外观、检查预览，最后生成带字幕的视频文件。

浏览器中的媒体处理链路

文章还说明了导出过程为何比播放视频复杂。浏览器需要逐帧解码原视频，把每一帧与当时有效的字幕一起绘制，再编码成新的视频并封装成 MP4。文中提到使用 WebCodecs 的 VideoDecoder 和 VideoEncoder 处理视频帧，使用画布合成画面与文字，并由 mp4-muxer 封装输出。mp4box 用于读取输入文件的信息；如果音轨为 AAC，则可以直接转封装，尽量避免重新处理音频。

这条链路也带来工程细节。编码器可能延后提供元数据，解码和编码队列需要协调消费速度，避免等待和内存持续堆积；已经处理完的视频帧要及时释放。不同浏览器和设备对 H.264 等编码格式的支持也可能不同，因此从文件信息判断可处理范围、在队列间维持背压、管理帧生命周期，都是让本地导出保持稳定的一部分。文章不是只列出 API 名称，也解释了这些组件如何连接到用户看见的字幕成片。

本地处理的特点与边界

作者强调，视频处理在浏览器本地完成，视频文件不会上传到服务器。编辑状态和最近使用的视频通过浏览器 IndexedDB 保存，以便重新打开页面后继续处理。对于包含工作画面或尚未公开素材的视频，这种方式减少了把文件提交给远端服务的步骤，也省去了账号和服务器端项目管理。

本地保存同时意味着数据依赖当前浏览器。浏览器存储配额可能有限，清除站点数据会删除已保存的编辑状态；大型视频也受设备内存、处理性能和编码器能力影响。文章指出桌面版 Chrome 或 Edge 是较稳妥的使用环境，而 Safari 和部分视频编码格式会受到平台能力限制。这些说明让读者在开始前能评估素材大小、设备条件和浏览器兼容性，不必把“浏览器里运行”误解为对所有设备和格式都没有限制。

文章后续更新还加入了音频识别并生成字幕时间节点的能力，识别结果仍可手动修订。自动生成可以减少逐段录入的工作，但校对仍然重要，尤其是专有名词、背景声音或语速较快的片段。页面将自动识别放在原有时间轴编辑流程里：先生成初稿，再调整文字和节点，最后继续预览与导出。

适合怎样阅读这个站点

如果正在处理浏览器视频、字幕时间轴或媒体编码问题，可以从字幕工具文章了解这个小工具的定位、界面步骤和实现组件；若关注开发环境，则可以按首页上的 Xcode、HBuilderX 或 AI 客户端文章查找相近问题。Cloudflare Workers 评论系统文章则适合关注轻量服务和博客组件的人。首页提供的分类、标签和归档入口可以帮助读者从单篇文章扩展到相关主题。

个人技术博客的写法保留了作者遇到问题时的上下文，因此适合用来理解一种实现思路或排查过程。技术环境会随浏览器版本、依赖更新和平台变化而变动，读者在复用步骤时应结合自己的版本核对。对刚好遇到类似任务的人，这些文章提供了问题背景、工具选择和实现结构；对长期学习的人，时间线和主题入口则构成持续积累的阅读目录。

从需求到实现的阅读线索

字幕工作室这篇文章把需求边界、交互步骤、媒体处理和本地存储连在一起，能让读者看到一个小型开发项目如何由具体不便形成。它先说明为什么只做字幕而不承担完整剪辑，再讲时间轴如何表达字幕片段，随后解释浏览器编码链路和实现中的资源管理，最后交代兼容与存储限制。这样的顺序便于把产品界面与背后的技术选择对应起来。

子舒的博客还收录客户端接入、开发工具排错和评论系统等不同主题。访问者可以先用文章标题判断问题场景，再通过分类、标签或归档寻找延伸内容。若目标是立即解决环境错误，优先阅读问题相近的记录；若想理解一个工具如何实现，则选择带有流程和技术说明的项目文章。站点的文章范围以开发实践为主，适合将个人经验作为参考，再根据自身项目环境验证细节。