主标题

{chapters.map((ch) => { const chStart = ch.start_frame / TOTAL_FRAMES const chEnd = (ch.start_frame + ch.duration_frames) / TOTAL_FRAMES const isActive = progress >= chStart && progress < chEnd const isPast = progress >= chEnd const chProgress = isActive ? (progress - chStart) / (chEnd - chStart) : isPast ? 1 : 0 return (

{isActive && (

)} {ch.label}

) })}

) } // 在主视频组件中添加 export const MyVideo = () => (

) ``` 详细组件文档见 [docs/COMPONENTS.md](docs/COMPONENTS.md#8-chapter-progress-bar) --- ## Step 8.5: Preview & Debug (Optional) Use Remotion Studio for real-time preview before final render: ```bash # Start Remotion Studio (opens browser) npx remotion studio src/remotion/index.ts ``` **Studio features:** - Real-time preview with timeline scrubbing - Hot reload on code changes - Visual debugging of animations and layout **Alternative: Quick preview render** ```bash # 720p preview (~4x faster than 4K) npx remotion render src/remotion/index.ts CompositionId videos/{name}/preview.mp4 --scale 0.33 --crf 28 # Preview first 10 seconds only npx remotion render src/remotion/index.ts CompositionId videos/{name}/preview.mp4 --frames 0-300 --scale 0.5 # Static frame screenshots npx remotion still src/remotion/index.ts CompositionId videos/{name}/frame_0.png --frame 0 npx remotion still src/remotion/index.ts CompositionId videos/{name}/frame_300.png --frame 300 ``` **Recommended workflow:** 1. Use `remotion studio` for iterative development 2. Quick preview render to check full flow 3. Final 4K render when satisfied --- ## Step 9: Render Video > Use `npx remotion studio` for preview, then render directly for final output. ```bash npx remotion render src/remotion/index.ts CompositionId videos/{name}/output.mp4 --video-bitrate 16M ``` **验证 4K**: ```bash ffprobe -v quiet -show_entries stream=width,height -of csv=p=0 videos/{name}/output.mp4 # 期望: 3840,2160 ``` --- ## Step 10: Mix with Background Music ```bash cp ~/.claude/skills/video-podcast-maker/music/perfect-beauty-191271.mp3 videos/{name}/bgm.mp3 ffmpeg -y \ -i videos/{name}/output.mp4 \ -stream_loop -1 -i videos/{name}/bgm.mp3 \ -filter_complex "[0:a]volume=1.0[a1];[1:a]volume=0.05[a2];[a1][a2]amix=inputs=2:duration=first[aout]" \ -map 0:v -map "[aout]" \ -c:v copy -c:a aac -b:a 192k \ videos/{name}/video_with_bgm.mp4 ``` --- ## Step 11: Add Subtitles (可选) **询问用户是否需要字幕。** 如不需要： ```bash cp videos/{name}/video_with_bgm.mp4 videos/{name}/final_video.mp4 ``` **添加字幕（纯白背景用深色字幕）**: ```bash ffmpeg -y -i videos/{name}/video_with_bgm.mp4 \ -vf "subtitles=videos/{name}/podcast_audio.srt:force_style='FontName=PingFang SC,FontSize=14,PrimaryColour=&H00333333,OutlineColour=&H00FFFFFF,Bold=1,Outline=2,Shadow=0,MarginV=20'" \ -c:v libx264 -crf 18 -preset slow -s 3840x2160 \ -c:a copy videos/{name}/final_video.mp4 ``` **关键参数**: - `-s 3840x2160` - 强制 4K - `-crf 18 -preset slow` - 高质量编码 --- ## Step 12: Complete Publish Info (Part 2) 从 `timing.json` 生成 B站章节： ``` 00:00 开场 00:23 功能介绍 00:55 演示 01:20 总结 ``` 格式：`MM:SS 章节标题`，每段间隔 ≥5秒。 --- ## Step 13: Verify Output 视频完成后，执行以下验证： ### 13.1 文件存在性检查 ```bash VIDEO_DIR="videos/{name}" echo "=== 文件检查 ===" for f in podcast.txt podcast_audio.wav podcast_audio.srt timing.json output.mp4 final_video.mp4; do [ -f "$VIDEO_DIR/$f" ] && echo "✓ $f" || echo "✗ $f 缺失" done ``` ### 13.2 技术指标验证 ```bash echo "=== 技术指标 ===" # 分辨率 RES=$(ffprobe -v quiet -select_streams v:0 -show_entries stream=width,height -of csv=p=0 "$VIDEO_DIR/final_video.mp4") [ "$RES" = "3840,2160" ] && echo "✓ 分辨率: 3840x2160 (4K)" || echo "✗ 分辨率: $RES (非4K)" # 时长 DUR=$(ffprobe -v quiet -show_entries format=duration -of csv=p=0 "$VIDEO_DIR/final_video.mp4" | cut -d. -f1) echo "✓ 时长: ${DUR}s" # 编码 CODEC=$(ffprobe -v quiet -select_streams v:0 -show_entries stream=codec_name -of csv=p=0 "$VIDEO_DIR/final_video.mp4") echo "✓ 视频编码: $CODEC" # 文件大小 SIZE=$(ls -lh "$VIDEO_DIR/final_video.mp4" | awk '{print $5}') echo "✓ 文件大小: $SIZE" ``` ### 13.3 验证报告模板完成验证后，向用户报告： ``` === 验证完成 === ✓ 文件完整性: 6/6 ✓ 分辨率: 3840x2160 ✓ 时长: XXs ✓ 编码: h264 ✓ 大小: XXX MB 是否需要清理临时文件？(Step 14) ``` --- ## Step 14: Cleanup (可选) > **重要**: 此步骤需要用户确认后执行。 ### 14.1 列出临时文件执行前，先向用户展示将被删除的文件： ```bash VIDEO_DIR="videos/{name}" echo "=== 将删除的临时文件 ===" ls -lh "$VIDEO_DIR"/part_*.wav 2>/dev/null | awk '{print $9, "(" $5 ")"}' ls -lh "$VIDEO_DIR"/concat_list.txt 2>/dev/null | awk '{print $9, "(" $5 ")"}' ls -lh "$VIDEO_DIR"/output.mp4 2>/dev/null | awk '{print $9, "(" $5 ")"}' ls -lh "$VIDEO_DIR"/video_with_bgm.mp4 2>/dev/null | awk '{print $9, "(" $5 ")"}' echo "" echo "=== 将保留的文件 ===" ls -lh "$VIDEO_DIR"/final_video.mp4 "$VIDEO_DIR"/podcast_audio.wav "$VIDEO_DIR"/podcast_audio.srt "$VIDEO_DIR"/timing.json "$VIDEO_DIR"/podcast.txt 2>/dev/null | awk '{print $9, "(" $5 ")"}' ``` ### 14.2 用户确认 **询问用户**: > 以上临时文件将被删除，保留最终成品和源文件。是否继续？ ### 14.3 执行清理用户确认后执行： ```bash VIDEO_DIR="videos/{name}" rm -f "$VIDEO_DIR"/part_*.wav rm -f "$VIDEO_DIR"/concat_list.txt rm -f "$VIDEO_DIR"/output.mp4 rm -f "$VIDEO_DIR"/video_with_bgm.mp4 echo "✓ 临时文件已清理" ``` ### 14.4 清理后文件结构 ``` videos/{name}/ ├── final_video.mp4 # 最终成品 ├── podcast.txt # 原始脚本 ├── podcast_audio.wav # 音频 ├── podcast_audio.srt # 字幕 ├── timing.json # 时间轴 ├── topic_research.md # 研究资料 ├── publish_info.md # 发布信息 └── thumbnail_*.png # 封面图 ``` --- ## Background Music Options Available at `~/.claude/skills/video-podcast-maker/music/`: - `perfect-beauty-191271.mp3` - Upbeat, positive - `snow-stevekaldes-piano-397491.mp3` - Calm piano --- ## Common Mistakes | Mistake | Fix | |---------|-----| | Numbers in Arabic digits | Write in Chinese: "3999" → "三千九百九十九" | | Skipping preview | Use `npx remotion studio` for debugging before final render | | Output in `out/` instead of `videos/{name}/` | Must specify full path: `npx remotion render ... videos/{name}/output.mp4` | | Audio/video timing mismatch | Use `timing.json`, don't hardcode | | Section not syncing | `[SECTION:name]` must match component names | | TTS chunks too long | Keep MAX_CHARS=400 | | Subtitle font missing | Use PingFang SC (mac), Microsoft YaHei (win) | | Subtitle invisible on white | Use dark color `PrimaryColour=&H00333333` | | Video blurry | Use `--video-bitrate 16M` and `-crf 18 -preset slow` | | Not 4K | Composition 3840x2160, `scale(2)` wrapper | | Text too small | Title 80-100px, subtitle 48-64px | | Too much whitespace | Content ≥85% width, card 900-1100px | --- ## Requirements ### System Tools ```bash brew install ffmpeg node # macOS ``` ### Python Dependencies ```bash pip install azure-cognitiveservices-speech requests ``` ### Node.js Dependencies ```bash npm install remotion @remotion/cli @remotion/player ``` ### Environment Variables ```bash # Azure TTS (optional) export AZURE_SPEECH_KEY="your-azure-speech-key" export AZURE_SPEECH_REGION="eastasia" # Volcano Engine TTS (optional) export VOLC_ACCESS_KEY="your-volc-access-key" export VOLC_SECRET_KEY="your-volc-secret-key" export VOLC_REGION="cn-beijing" # Default: cn-beijing export VOLC_VOICE_TYPE="zh_male_taocheng_uranus_bigtts" # Default voice # Optional: AI image generation export GEMINI_API_KEY="..." # imagen (Google) export DASHSCOPE_API_KEY="..." # imagenty (阿里云) # Optional: TTS speech rate control (0.5-2.0, default 1.0) export TTS_RATE="1.0" ``` ### Optional: AI Image Generation ```bash pip install google-genai pillow # imagen pip install dashscope requests # imagenty ``` --- ## Documentation | Doc | Content | |-----|---------| | [QUICKSTART.md](docs/QUICKSTART.md) | 5分钟快速入门 | | [TROUBLESHOOTING.md](docs/TROUBLESHOOTING.md) | 故障排除指南 | | [COMPONENTS.md](docs/COMPONENTS.md) | Remotion 组件参考 | | [VISUAL_STYLES.md](docs/VISUAL_STYLES.md) | 视觉风格规范 | | [MEDIA_ASSETS.md](docs/MEDIA_ASSETS.md) | 素材来源推荐 |