00:00 / 00:51
连播
清屏
智能
倍速
点赞6998
00:00 / 07:12
连播
清屏
智能
倍速
点赞786
00:00 / 00:30
连播
清屏
智能
倍速
点赞2999
00:00 / 02:43
连播
清屏
智能
倍速
点赞6
00:00 / 00:30
连播
清屏
智能
倍速
点赞138
00:00 / 01:43
连播
清屏
智能
倍速
点赞1
这次尝试用纯 Web 技术(HTML / CSS / JavaScript)制作数据结构微课, 不依赖传统视频剪辑软件,所有动画和画面都由浏览器渲染生成。 ️ 技术栈 · HyperFrames —— 基于 HTML 的微课视频框架 · HTML + CSS + JavaScript —— 所有动画与画面的实现 · GSAP —— 动画时间轴控制 · Canvas / SVG —— 数据结构可视化(链表、树、图、排序柱状图等) · MiniMax API —— AI 语音合成,分段生成旁白后对齐合成 · FFmpeg —— 视频渲染与音视频合成 · PowerShell 自动化脚本 —— 一键完成 TTS 生成 → 音频对齐 → 视频合成全流程 画面风格 采用 Geometric Bold(几何大胆风):纯色块、粗黑边框、无渐变无模糊阴影, 所有元素在 1920×1080 画布上由浏览器实时渲染,再通过 FFmpeg 输出 MP4。 制作流程 1. Markdown 笔记 → 提取知识点和关键代码 2. HTML/CSS/JS 编写场景与动画(GSAP 时间轴) 3. 浏览器预览 → FFmpeg 渲染无配音版 4. MiniMax 分段生成 TTS 音频 5. FFmpeg 对齐音视频 → 输出带 AI 配音的最终版 为什么这么做? 传统微课制作流程重(录屏 + 剪辑 + 配音),迭代慢。 用代码生成动画的好处是:改一行代码就能调整画面,动画精确可控, 整套流程可以自动化,换一套笔记就能复用。 6 集内容:数据结构总览 → 顺序表 vs 链表 → 栈和队列 → 二叉树遍历 → 图 → 查找与排序 如果你也对"用代码做视频"感兴趣,欢迎交流。 #ai #codex #claude
00:00 / 27:31
连播
清屏
智能
倍速
点赞35
00:00 / 02:56
连播
清屏
智能
倍速
点赞1
00:00 / 01:05
连播
清屏
智能
倍速
点赞91