Repolode
提交项目
OneMoh

OneMoh/html-explainer

一个 Agent Skill，把任意主题做成带配音、硬字幕和封面的讲解视频，用 HTML 写画面、本地渲染。

可替代:SynthesiaLumen5

在 GitHub 查看
Star
174
Fork
20
未关闭 Issue
2
最近提交
5天前

这是什么？

html-explainer 是一个用于生成讲解视频的 Agent Skill。给智能体一个主题，它会依次完成调研、解说词撰写、TTS 配音、字幕与节拍时间轴、场景 HTML 编写、逐帧渲染和 ffmpeg 合成，最后生成封面。画面用 HTML/CSS/GSAP 编写，渲染时把动画 seek 到精确时间点逐帧截图，而不是录制浏览器播放，因此同一帧每次渲染结果一致。

配音默认使用免费的 edge-tts，也可以切换到火山引擎语音合成 2.0，后者需要在本地 env 文件中填写 API Key。字幕时间来自 TTS 返回的字级时间戳，画面动画锚定在字幕文本上而非硬编码帧号，修改解说词后时间轴会自动重排。项目内置 23 种画面风格目录和约 40 个动效词汇。

该技能可在 Claude Code、OpenAI Codex、WorkBuddy 等能加载 SKILL.md 的智能体中使用。渲染支持 1080p 或 4K、30 或 60 fps，可选快门运动模糊和多进程并行。基础运行需要 Python 3.9+、Node 18+、Chrome 或 Edge，以及 ffmpeg。

核心功能

  • 01通过把动画 seek 到精确时间点逐帧渲染，避免录制式的时序问题。
  • 02提供两种配音引擎：默认免费的 edge-tts，或需要 API Key 的火山引擎语音合成。
  • 03字幕时间取自 TTS 的字级时间戳，动画锚定在字幕文本上。
  • 04内置 23 种画面风格模板和约 40 个动效词汇。
  • 05除 MP4、SRT、VTT 外还输出 16:9、3:4 及可选的 9:16 封面。
  • 06支持 1080p 与 4K、30 或 60 fps 输出，可选运动模糊和多进程渲染。

适用场景

  • 把文章或技术文档改写成带解说的讲解视频。
  • 在 AI 编程智能体中批量制作主题讲解视频，保持配音与字幕风格统一。
  • 使用默认 edge-tts 离线生成视频，避免按次计费。
  • 需要帧级可复现结果的讲解视频渲染。

标签

#agent-skill#video-generation#text-to-speech#html-to-video#claude-code#tts#subtitles#agent-skills#claude-code-skill#claude-code-skills

常见问题

html-explainer 是什么？
一个 Agent Skill，把任意主题做成带配音、硬字幕和封面的讲解视频，用 HTML 写画面、本地渲染。 html-explainer 是一个用于生成讲解视频的 Agent Skill。给智能体一个主题，它会依次完成调研、解说词撰写、TTS 配音、字幕与节拍时间轴、场景 HTML 编写、逐帧渲染和 ffmpeg 合成，最后生成封面。画面用 HTML/CSS/GSAP 编写，渲染时把动画 seek 到精确时间点逐帧截图，而不是录制浏览器播放，因此同一帧每次渲染结果一致。
html-explainer 可以免费使用吗？用的什么许可证？
html-explainer 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
html-explainer 还在维护吗？
活跃维护中。html-explainer 最近一次提交是在 2026年10月14日。
html-explainer 适合用来做什么？
把文章或技术文档改写成带解说的讲解视频。 在 AI 编程智能体中批量制作主题讲解视频，保持配音与字幕风格统一。 使用默认 edge-tts 离线生成视频，避免按次计费。 需要帧级可复现结果的讲解视频渲染。
在哪里获取 html-explainer？
源代码和安装说明在 GitHub 上：https://github.com/OneMoh/html-explainer

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目