explain-with-video

用视频讲解

一段简短精炼的动画讲解，时长约 60 秒，在大型视频风格播放器中播放。默认情况下，它是实时 HTML/SVG 动画，而不是视频文件：它会适配主题，文本可搜索和复制，编辑时无需重新渲染。

适用场景

• 用户要求通过视频直观讲解更改内容。
• 编排器用于通过视频直观讲解更改内容。

视频

• 时长约 60 秒，节奏明快。包含 4–7 个章节，每章传达一个要点，并配有一个动态视觉元素。
• 大型展示区：占满内容宽度；在桌面设备上采用 16:9 比例，在手机上切换为更高的布局并增大文本。
• 字幕以真实文本的形式显示在展示区下方的字幕栏中。
• 保持展示区整洁：视频内或进度条上不显示章节标签、时间戳或工具提示。
• 播放器控件：播放/暂停（空格键）、进度条、播放速度、字幕开关、全屏。
• 播放前显示有意义的海报帧（最具代表性的画面），不要显示空白展示区。暂停时始终保留清晰易读的画面。

播放器下方

• 在播放器正下方显示一行章节名称：点击即可跳转，播放时高亮当前章节。
• 下方是精简的详细信息区域：使用几个标明内容的 ev-more 切换项，并配以视觉内容（高亮代码、标签、精简表格）。保持精简。

构建方式

• 使用 explainer-kit 技能构建（主题令牌、ev-more、代码块）。
• 使用一个函数 render(t) 绘制每一帧，仅根据时间设置整个画面，并由 requestAnimationFrame 驱动。这样，跳转、调整速度和海报帧都能轻松实现。
• 只有当用户需要可在页面外分享的文件时，才渲染实际视频文件（例如使用 Python PIL 生成帧并通过管道传给 ffmpeg）。