无标签

发布日期: 2026-06-13

时政热词答题视频制作手册

本手册详细记录如何制作"定义→出题→倒计时→答案解析"模式的竖屏学习视频。基于 Remotion + Edge TTS 技术栈。

一、技术栈总览

工具	用途	安装命令
Node.js v22+	运行 Remotion	已预装
FFmpeg	视频编码	已预装
Remotion v4	React 驱动的视频框架	`npm install remotion@^4.0.0 @remotion/cli@^4.0.0`
React v19	UI 组件	`npm install react@^19.0.0 react-dom@^19.0.0`
edge-tts (Python)	微软免费中文 TTS 配音	`pip3 install edge-tts`
mutagen (Python)	读取 MP3 时长	`pip3 install mutagen`
TypeScript	类型安全	`npm install --save-dev typescript @types/react @types/react-dom`

二、视频规格

参数	值	说明
分辨率	1080×1920	竖屏 9:16，适配手机/抖音/小红书
帧率	30fps	标准，渲染效率高
编码	H.264 + AAC	MP4 格式，兼容所有平台
配音	zh-CN-YunxiNeural	微软云希，中文男声
BGM	无	当前版本未使用背景音乐

三、视频结构（分镜设计）

每个热词的完整流程

┌─────────────┐     ┌─────────────────┐     ┌───────┐     ┌──────────────────┐
│  ① 定义展示  │ ──→ │  ② 出题+选项     │ ──→ │ ③ 倒计时│ ──→ │  ④ 答案+解析+口诀  │
│  约15-25秒   │     │  约15-28秒       │     │ ~1.6秒 │     │  约20-35秒        │
└─────────────┘     └─────────────────┘     └───────┘     └──────────────────┘

① 定义展示（DefineScene）

画面布局（竖屏居中）：

┌─────────────────────────┐
│                         │
│      【概念名称】        │  ← 88px，粗体800，用强调色
│                         │
│   🔑 关键词 badge       │  ← 40px，胶囊形标签，强调色边框
│                         │
│  ┌───────────────────┐  │
│  │ 定义文本           │  │  ← 40px，左边5px强调色竖线
│  │ （左对齐，卡片）   │  │     背景色用强调色8%透明度
│  └───────────────────┘  │
│                         │
│  ┌───────────────────┐  │
│  │ 补充定义（可选）   │  │  ← 同上，延迟17帧出现
│  └───────────────────┘  │
│                         │
└─────────────────────────┘

动画时序：

frame 0-15：整个场景淡入
frame 0+：标题 spring() 弹入（damping:100, stiffness:200）
frame 8+：关键词 badge spring() 弹入（damping:100, stiffness:250）
frame 18-35：定义卡片1 淡入
frame 35-50：定义卡片2 淡入（如有）
结束前15帧：整个场景淡出

字号规范：

概念名称：88px / 800
关键词：40px / 700
定义正文：40px / 500，行高1.6

② 出题+选项（QuestionScene）

画面布局：

┌─────────────────────────┐
│                         │
│  📋 做道题检测一下       │  ← 52px，强调色
│                         │
│  ┌───────────────────┐  │
│  │ 题目文本           │  │  ← 44px/600，深灰底卡片
│  └───────────────────┘  │
│                         │
│  ┌─ A ─ 选项文本 ────┐  │  ← 圆形字母 + 文字
│  └───────────────────┘  │     红色边框 #EF4444
│  ┌─ B ─ 选项文本 ────┐  │     绿色边框 #10B981
│  └───────────────────┘  │     黄色边框 #F59E0B
│  ┌─ C ─ 选项文本 ────┐  │     紫色边框 #8B5CF6
│  └───────────────────┘  │
│  ┌─ D ─ 选项文本 ────┐  │
│  └───────────────────┘  │
│                         │
│  ⏸️ 请暂停视频，思考答案  │  ← 40px，黄色闪烁提示
│                         │
└─────────────────────────┘

ABCD 选项配色（固定）：

选项	颜色	色值	用途
A	红色	`#EF4444`	选项字母圆圈+边框
B	绿色	`#10B981`	选项字母圆圈+边框
C	黄色	`#F59E0B`	选项字母圆圈+边框
D	紫色	`#8B5CF6`	选项字母圆圈+边框

注意：选项颜色是固定的，不随正确/错误变化。正确/错误标记只在答案阶段显示。

动画时序：

frame 0-18：题目+标题淡入
frame 20+：选项逐个滑入（每个间隔15帧），从左侧滑入40px + spring() 缩放
选项全部出现后20帧：暂停提示淡入 + 脉冲闪烁（0.6↔1.0循环）

暂停提示设计：

黄色底框（#F59E0B15 背景，#F59E0B40 边框）
文字 #FCD34D，40px/700
闪烁效果：opacity 在 1.0 和 0.6 之间交替，每个周期约30帧

字号规范：

标题"做道题"：52px / 700
题目：44px / 600，行高1.5
选项字母圆圈：36px / 800，64×64px 圆
选项文字：38px / 500

③ 倒计时（CountdownScene）

画面布局：

┌─────────────────────────┐
│                         │
│                         │
│      ╭──────────╮       │
│      │          │       │  外环：320×320px，6px 强调色40%透明度
│      │  ┌────┐  │       │
│      │  │ 3  │  │       │  内圆：260×260px，强调色15%填充
│      │  └────┘  │       │  数字：160px / 900，强调色
│      │          │       │
│      ╰──────────╯       │
│                         │
│                         │
└─────────────────────────┘

动画时序：

frame 0+：外环 spring() 展开（damping:80, stiffness:200）
frame 2+：内圆+数字 spring() 弹入（damping:60, stiffness:300，更有冲击感）

倒计时音频：

配音文本用纯数字+破折号拉长，如 "3——"、"2——"、"1——"
不说"倒计时"三个字
每个数字时长约1.3-1.6秒（由TTS自然生成，不强制补齐）
3个数字总时长约4-5秒

帧数计算：根据实际音频时长 × 30fps，取最大值统一使用（如48帧）

④ 答案+解析（AnswerScene）

画面布局：

┌─────────────────────────┐
│                         │
│  ✅ 正确答案：B          │  ← 绿色横幅，52px/800
│                         │
│  ┌─ A ─ 选项文本 ─ ❌─┐  │  ← 红色边框+浅红底
│  └───────────────────┘  │
│  ┌─ B ─ 选项文本 ─ ✅─┐  │  ← 绿色边框+浅绿底
│  └───────────────────┘  │
│  ┌─ C ─ 选项文本 ─ ❌─┐  │
│  └───────────────────┘  │
│  ┌─ D ─ 选项文本 ─ ❌─┐  │
│  └───────────────────┘  │
│                         │
│  📖 解析                │  ← 强调色标题
│  解析行1                 │  ← 逐行淡入
│  解析行2                 │
│  解析行3                 │
│                         │
│  🧠 口诀：XX = XX       │  ← 强调色底框，40px/700
│                         │
└─────────────────────────┘

正确/错误选项颜色：

状态	背景色	边框色	图标
正确	`#10B98110`	`#10B98160`	✅
错误	`#EF444408`	`#EF444440`	❌

动画时序：

frame 0-10：答案横幅 spring() 弹入（damping:60, stiffness:300，冲击感强）
frame 15+：选项逐个出现（间隔12帧），带对错标记
选项全部出现后20帧：解析标题出现
frame (expStart)+：解析逐行淡入（每行间隔10帧）
解析全部出现后25帧：口诀淡入

字号规范：

答案横幅：52px / 800
选项：34px / 500，字母圆圈52×52px，30px/800
解析标题：36px / 700
解析正文：34px / 400，行高1.6
口诀：40px / 700

四、配色体系

全局配色

元素	色值	说明
背景色	`#0F172A`	Tailwind slate-900，深蓝底
主文字	`#F8FAFC`	Tailwind slate-50，近白
卡片背景	`#1E293B`	Tailwind slate-800，深灰
正确色	`#10B981`	Tailwind emerald-500
错误色	`#EF4444`	Tailwind red-500
提示色	`#F59E0B`	Tailwind amber-500
暂停提示底	`#F59E0B15`	提示色8%透明
暂停提示边	`#F59E0B40`	提示色25%透明

每个热词的强调色

每个热词用不同的强调色做视觉区分，配色原则：

色系	色值	典型用途
青 Cyan	`#06B6D4`	科技/管理类
琥珀 Amber	`#F59E0B`	商业/消费类
蓝 Blue	`#3B82F6`	海洋/经济类
紫 Purple	`#8B5CF6`	AI/智能类
粉 Pink	`#EC4899`	社交/生活方式类
翡翠 Emerald	`#10B981`	环保/旅游类
橙 Orange	`#F97316`	工作/职业类
黄绿 Lime	`#84CC16`	农业/乡村类
青绿 Teal	`#14B8A6`	工厂/设施类
靛蓝 Indigo	`#6366F1`	数据/平台类

强调色使用规则：

概念名称：纯色
关键词 badge：18%透明度底 + 50%透明度边框
定义卡片左边框：纯色5px
定义卡片背景：8%透明度
出题标题/解析标题：纯色
口诀底框：12%透明度底 + 40%透明度边框

五、配音制作流程

Step 1：撰写配音文案

每个热词分3段配音：

① 定义段（sXXa_def.mp3）

模板：第N个热词。{概念名}。{定义全文}。{关键词}。

示例：

第1个热词。蓝碳经济。蓝碳是固定在红树林、海草床等滨海生态系统中的碳，
即海洋碳汇。蓝碳经济是通过保护和恢复海洋生态系统，降低二氧化碳浓度，
提供生态产品或服务的经济活动。核心关键词：海洋碳汇变现。

② 题目段（sXXb_q.mp3）

模板：请听题。{题干}？选项A，{选项A}。选项B，{选项B}。
选项C，{选项C}。选项D，{选项D}。请暂停视频，选出你的答案。

示例：

请听题。下列哪个属于蓝碳经济？选项A，工厂安装脱硫设备减少排放。
选项B，保护红树林发展生态旅游。选项C，建设光伏发电站替代煤电。
选项D，推广共享单车绿色出行。请暂停视频，选出你的答案。

③ 答案段（sXXc_ans.mp3）

模板：正确答案是{字母}。{解析内容}。记忆口诀：{口诀}。

⚠️ 重要：解析中不要使用 ✅ 空心对勾符号，TTS 会读出奇怪的内容。改用纯文字如"正确。"、"答案是..."等。

示例：

正确答案是B。蓝碳经济的核心是保护和恢复海洋生态系统，
红树林是典型的滨海蓝碳生态系统。A是工业减排，C是清洁能源，
D是绿色交通，都不涉及海洋碳汇。记忆口诀：蓝碳等于海洋碳汇变现。

Step 2：生成 TTS 音频

使用 Python 脚本调用 edge-tts：

import asyncio
import edge_tts
from mutagen.mp3 import MP3

async def synthesize(text, voice, output_path, rate="+0%", pitch="+0Hz"):
    communicate = edge_tts.Communicate(text, voice, rate=rate, pitch=pitch)
    await communicate.save(output_path)
    audio = MP3(output_path)
    return audio.info.length  # 返回秒数

# 使用
voice = "zh-CN-YunxiNeural"
dur = await synthesize("文本内容", voice, "output.mp3")
frames = round(dur * 30)  # 30fps

Step 3：生成倒计时音频

for num in [3, 2, 1]:
    # 用破折号拉长，不说"倒计时"
    dur = await synthesize(f"{num}——", voice, f"cnt_{num}.mp3")

⚠️ 不要用 ffmpeg apad 滤镜补齐静音，Windows 上可能不支持。

Step 4：测量音频精确时长

from mutagen.mp3 import MP3

audio = MP3(filepath)
frames = round(audio.info.length * 30)  # 30fps

关键公式：帧数 = 秒数 × 30（四舍五入）

六、出题设计规范

题目设计原则

一道题测一个核心辨析点：不是简单复述定义，而是测易混淆点
四个选项必须全部有理由：每个选项都要能解释为什么对/错
干扰项要有迷惑性：不能用太离谱的选项，要贴近概念但不准确
正确答案不总是B：虽然示例都是B，实际应均匀分布

干扰项设计套路

套路	说明	示例
偷换概念	把A概念说成B概念	技术经理人→猎头
以偏概全	只涵盖部分定义	AI智能体→只回答问题
绝对化陷阱	把"尽量"变成"必须"	无痕旅游→不能留任何痕迹
过度引申	超出定义范围	蓝碳经济→所有环保行为
反向理解	完全理解反了	零糖社交→断绝社交

解析撰写规范

解析必须包含：

正确答案为什么对（命中定义的哪个核心要素）
每个干扰项为什么错（逐一排除）
口诀（一句话记忆公式）

⚠️ 解析文本中禁用 ✅ 符号，TTS 会读出异常内容。改用"正确。"、"答案是..."等纯文字表述。

七、Remotion 代码架构

项目目录结构

remotion-videos/
├── src/
│   ├── index.ts                          # Remotion 入口
│   ├── Root.tsx                          # 注册 Composition
│   └── compositions/
│       └── quiz-demo/
│           ├── QuizDemo.tsx              # 主编排（数据+时间轴）
│           └── scenes/
│               ├── DefineScene.tsx        # 定义展示场景
│               ├── QuestionScene.tsx      # 出题+选项场景
│               ├── CountdownScene.tsx     # 3-2-1 倒计时场景
│               └── AnswerScene.tsx        # 答案+解析+口诀场景
├── public/
│   ├── audio-quiz-0605/                  # 每批音频独立子目录
│   ├── audio-quiz-0612/
│   └── audio-quiz-0602/
├── output/
│   └── quiz-demo-xxx.mp4                 # 最终输出
├── package.json
├── tsconfig.json
└── remotion.config.ts

音频命名规则

文件名模式	内容
`sNNa_def.mp3`	第N题的定义段配音
`sNNb_q.mp3`	第N题的题目段配音
`sNNc_ans.mp3`	第N题的答案解析配音
`cnt_N.mp3`	倒计时数字N的配音

数据驱动架构

所有热词数据集中在 QuizDemo.tsx 顶部的 QUIZZES 数组中：

const QUIZZES = [
  {
    concept: "蓝碳经济",          // 概念名
    accentColor: "#3B82F6",      // 强调色
    definition: "...",            // 定义文本
    keyword: "🌊 海洋碳汇变现",   // 关键词 badge
    question: "下列哪个属于蓝碳经济？",  // 题干
    options: [                    // ABCD 四选项
      { label: "A", text: "...", correct: false },
      { label: "B", text: "...", correct: true },
      { label: "C", text: "...", correct: false },
      { label: "D", text: "...", correct: false },
    ],
    answer: "B",                  // 正确答案字母
    explanation: ["...", "..."],  // 解析行数组（禁用 ✅）
    mnemonic: "蓝碳 = 海洋碳汇变现 🌊",  // 口诀
    audio: {                      // 音频文件名
      def: "s03a_def.mp3",
      q: "s03b_q.mp3",
      ans: "s03c_ans.mp3",
    },
  },
  // ... 更多热词
];

时间轴构建逻辑

// 帧数常量
const TITLE_FRAMES = 30;       // 标题页帧数（1秒）
const CNT_FRAMES = 48;         // 每个倒计时数字帧数（根据实际音频）
const QUIZ_FRAMES = [...];     // 每段配音的帧数数组

// 自动计算时间轴
let cursor = 0;
const segments = [];

// 1. 标题
segments.push({ from: cursor, duration: TITLE_FRAMES, type: "title", ... });
cursor += TITLE_FRAMES;

// 2. 每个热词循环
QUIZZES.forEach((q, qi) => {
  // ① 定义
  segments.push({ from: cursor, duration: QUIZ_FRAMES[qi].def, type: "define", ... });
  cursor += QUIZ_FRAMES[qi].def;

  // ② 出题
  segments.push({ from: cursor, duration: QUIZ_FRAMES[qi].q, type: "question", ... });
  cursor += QUIZ_FRAMES[qi].q;

  // ③ 倒计时 3-2-1
  [3, 2, 1].forEach((num) => {
    segments.push({ from: cursor, duration: CNT_FRAMES, type: "countdown", ... });
    cursor += CNT_FRAMES;
  });

  // ④ 答案解析
  segments.push({ from: cursor, duration: QUIZ_FRAMES[qi].ans, type: "answer", ... });
  cursor += QUIZ_FRAMES[qi].ans;
});

const TOTAL_FRAMES = cursor;  // 总帧数，填入 Root.tsx

八、渲染命令

# 进入项目目录
cd D:\temp\视频制作\remotion-videos

# TypeScript 类型检查
npx tsc --noEmit

# 渲染视频
npx remotion render src/index.ts quiz-demo output/quiz-demo-xxx.mp4

# 检查输出
ffprobe -v quiet -show_entries format=duration \
  -show_entries stream=width,height \
  -of default=noprint_wrappers=1 \
  output/quiz-demo-xxx.mp4

九、Remotion 动画关键规则

绝对禁止

❌ 禁止	✅ 正确
CSS `transition`	`useCurrentFrame()` + `interpolate()`
CSS `@keyframes`	`spring()` 函数
HTML `<img>`	Remotion `<Img>`
HTML `<video>`	Remotion `<Video>`
硬编码文件路径	`staticFile("audio-quiz-xxx/xxx.mp3")`
`interpolate()` 不加 clamp	始终加 `extrapolateLeft/Right: "clamp"`
`...AbsoluteFill` 展开到 style	用内联定位或 `<AbsoluteFill>` 组件包裹

常用动画函数

// 1. 淡入淡出
const opacity = interpolate(frame, [0, 15], [0, 1], {
  extrapolateLeft: "clamp", extrapolateRight: "clamp",
});

// 2. 弹性缩放（用于标题、badge等）
const scale = spring({ frame, fps, config: { damping: 100, stiffness: 200 } });
// damping 越大越稳，stiffness 越大越快

// 3. 交错出现（选项逐个滑入）
const itemStart = baseStart + index * staggerDelay;
const itemOp = interpolate(frame, [itemStart, itemStart + 18], [0, 1], {
  extrapolateLeft: "clamp", extrapolateRight: "clamp",
});
const itemX = interpolate(frame, [itemStart, itemStart + 22], [-40, 0], {
  extrapolateLeft: "clamp", extrapolateRight: "clamp",
});

// 4. 脉冲闪烁（暂停提示）
const pulse = interpolate(frame,
  [start, start+30, start+60, start+90, start+120],
  [1, 0.6, 1, 0.6, 1],
  { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
);

// 5. 场景进出（每个场景必须有）
const enter = interpolate(frame, [0, 12], [0, 1], { clamp });
const exit = interpolate(frame, [duration-12, duration], [1, 0], { clamp });
const master = Math.min(enter, exit);  // 取较小值

十、新增热词的操作步骤

当有新一批热词需要制作视频时：

1. 撰写数据（约30分钟/10词）

填写 QUIZZES 数组，每个热词需要：

concept / accentColor / definition / keyword
question / options[4] / answer
explanation[]（禁用 ✅）/ mnemonic
音频文件名映射

2. 生成配音（约5分钟/10词）

# 创建新的音频子目录
New-Item -ItemType Directory -Force -Path "public/audio-quiz-新批次"

# 用 Python 脚本批量生成
# - 定义段、题目段、答案段
# - 倒计时 3/2/1（文本用 "N——"，不说"倒计时"）

3. 测量帧数（1分钟）

用 mutagen.mp3.MP3 读取每个音频时长，换算帧数 = 秒数 × 30。

4. 更新代码（5分钟）

更新 QUIZZES 数组
更新 QUIZ_FRAMES 帧数数组
更新音频路径前缀：staticFile("audio-quiz-新批次/xxx.mp3")
更新 Root.tsx 的 durationInFrames
更新标题日期文字

5. 渲染（约15-20分钟/10词视频）

npx tsc --noEmit
npx remotion render src/index.ts quiz-demo output/quiz-demo-xxx.mp4

十一、常见问题与踩坑记录

Q1: 视频末尾被截断？

A: 检查 Root.tsx 的 durationInFrames 是否等于所有音频帧数之和。这是最常犯的错误——更新了音频但忘记更新总帧数。

Q2: 配音和画面不同步？

A: Remotion 的 Sequence 的 from 和 durationInFrames 必须精确匹配音频的起止帧。用 mutagen 获取精确时长。

Q3: 选项颜色为什么不是正确=绿色、错误=红色？

A: 出题阶段不应透露答案。ABCD固定用红/绿/黄/紫四色，正确/错误标记只在答案阶段才显示。

Q4: 如何换配音声音？

A: 把 zh-CN-YunxiNeural 改为 zh-CN-XiaoxiaoNeural（女声）或其他支持的声音。

Q5: 渲染太慢？

A: 可以降低质量加速预览：

npx remotion render ... --jpeg-quality=50

最终版再去掉此参数渲染高清版。

坑1：`AbsoluteFill` 不能用 spread 展开到 style 中

错误现象：

TypeError: Cannot convert a Symbol value to a string

渲染第3帧就崩溃。

原因： AbsoluteFill 是一个 React 组件，不是 CSS 对象。用 ...AbsoluteFill 展开到 style={{}} 中会把 Symbol 属性传入，React-DOM 无法处理。

解决： 不要用 ...AbsoluteFill，改用内联定位：

// 错误 ❌
style={{ ...AbsoluteFill, background: "#0F172A" }}

// 正确 ✅
style={{
  position: "absolute",
  top: 0, left: 0, right: 0, bottom: 0,
  background: "#0F172A",
}}

或者直接用 <AbsoluteFill> 组件包裹：

// 也正确 ✅
<AbsoluteFill style={{ background: "#0F172A" }}>
  ...
</AbsoluteFill>

坑2：Python f-string 中包含 JSX 模板字符串会冲突

错误现象： 用 Python f-string 生成包含 `q${qi}-def` 的 JSX 代码时，${} 被 Python 当作 f-string 变量占位符。

解决： 不要用 Python 脚本生成含模板字符串的 TSX 代码。直接手写 TSX 或用字符串拼接（"q" + qi + "-def"）。

坑3：ffmpeg `apad` 滤镜在 Windows 上可能不可用

错误现象： ffmpeg -af apad=whole_dur=1.5 报错或生成空文件。

解决： 不依赖 ffmpeg 补静音。改为在 edge-tts 文本中加破折号来控制时长（如 "3——" 比 "3" 更长）。

坑4：PowerShell `mkdir -p` 语法

错误现象： mkdir -p output 报错 "已存在"。

解决： PowerShell 中用 New-Item -ItemType Directory -Force -Path output，或忽略该错误（目录已存在不影响后续操作）。

坑5：QuizDemo.tsx 文件被重复内容污染

错误现象： 之前生成的 QuizDemo.tsx 有 548000+ 字符，包含大量重复的 import 和数据。

原因： 多次用脚本追加写入，没有先清空文件。

解决： 每次生成新视频时，用覆盖写入（Write 工具）而不是追加。整个文件一次性写入。

十二、完整制作检查清单

[ ] 环境就绪：Node.js + FFmpeg + edge-tts + mutagen + Remotion
[ ] 热词数据撰写：概念/定义/关键词/题目/选项/解析/口诀
[ ] 解析文本中没有 ✅ 空心对勾符号
[ ] 每个选项都有充分理由（正确为什么对，错误为什么错）
[ ] 配音文案3段式：定义段 + 题目段 + 答案段
[ ] 倒计时文本用 "N——"，不说"倒计时"
[ ] TTS生成：edge-tts 逐段生成
[ ] 帧数测量：mutagen 获取所有音频时长
[ ] 代码更新：QUIZZES + QUIZ_FRAMES + 音频路径 + durationInFrames
[ ] TypeScript 编译通过：npx tsc --noEmit
[ ] 渲染：npx remotion render
[ ] 验证：ffprobe 检查分辨率/时长
[ ] 播放检查：完整观看，确认画面/配音/倒计时/解析均正常

十三、变更记录

日期	变更内容
2026-06-09	首次编写手册，标题页6秒，倒计时说"倒计时，N"
2026-06-13	标题页缩短到4秒（120帧）
2026-06-13	倒计时改为纯数字+拉长音（"N——"），不说"倒计时"
2026-06-13	标题页进一步缩短到1秒（30帧）
2026-06-13	解析配音禁用 ✅ 空心对勾，改用纯文字
2026-06-13	合并《热词视频制作经验总结》到本手册，减少文件数量

十四、性能参考

指标	9热词	6热词	7热词	10热词
总帧数	~23772	~16609	~18760	~22881
总时长	~13.2分钟	~9.2分钟	~10.4分钟	~12.7分钟
输出大小	~64MB	~45MB	~52MB	~62MB
渲染耗时	~20分钟	~15分钟	~17分钟	~20分钟
分辨率	1080×1920	1080×1920	1080×1920	1080×1920
帧率	30fps	30fps	30fps	30fps

每个热词平均耗时：定义段 ~20秒 + 题目段 ~23秒 + 倒计时 ~4.5秒 + 答案段 ~30秒 ≈ 78秒。

摸鱼

https://gtjs-9gjbu0mx.maozi.io/2026/06/12/guan-yu-ji-neng/32-shi-zheng-re-ci-da-ti-shi-pin-zhi-zuo-shou-ce/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源摸鱼 !

无标签

半月谈热词0613

2026-06-13 摸鱼

半月谈热词时政三区三线全周期管理公物仓非申即享集中带量采购分级诊疗青年发展型城市灵活就业本领恐慌算法推荐

半月谈热词0612b

2026-06-12 摸鱼

半月谈热词时政场景创新亚轨道生前预嘱个人养老金口袋公园空轨虚拟电厂数字藏品首店经济

时政热词答题视频制作手册

时政热词答题视频制作手册

一、技术栈总览

二、视频规格

三、视频结构（分镜设计）

每个热词的完整流程

① 定义展示（DefineScene）

② 出题+选项（QuestionScene）

③ 倒计时（CountdownScene）

④ 答案+解析（AnswerScene）

四、配色体系

全局配色

每个热词的强调色

五、配音制作流程

Step 1：撰写配音文案

Step 2：生成 TTS 音频

Step 3：生成倒计时音频

Step 4：测量音频精确时长

六、出题设计规范

题目设计原则

干扰项设计套路

解析撰写规范

七、Remotion 代码架构

项目目录结构

音频命名规则

数据驱动架构

时间轴构建逻辑

八、渲染命令

九、Remotion 动画关键规则

绝对禁止

常用动画函数

十、新增热词的操作步骤

1. 撰写数据（约30分钟/10词）

2. 生成配音（约5分钟/10词）

3. 测量帧数（1分钟）

4. 更新代码（5分钟）

5. 渲染（约15-20分钟/10词视频）

十一、常见问题与踩坑记录

Q1: 视频末尾被截断？

Q2: 配音和画面不同步？

Q3: 选项颜色为什么不是正确=绿色、错误=红色？

Q4: 如何换配音声音？

Q5: 渲染太慢？

坑1：AbsoluteFill 不能用 spread 展开到 style 中

坑2：Python f-string 中包含 JSX 模板字符串会冲突

坑3：ffmpeg apad 滤镜在 Windows 上可能不可用

坑4：PowerShell mkdir -p 语法

坑5：QuizDemo.tsx 文件被重复内容污染

十二、完整制作检查清单

十三、变更记录

十四、性能参考

你的赏识是我前进的动力

坑1：`AbsoluteFill` 不能用 spread 展开到 style 中

坑3：ffmpeg `apad` 滤镜在 Windows 上可能不可用

坑4：PowerShell `mkdir -p` 语法