# Remotion Synced Video with Real Web Images 创建专业级视频，集成**真实网页图片** （Google Images 爬取）、完美音频同步、丰富内容展示和精美视觉设计。使用 Remotion + TTS + 多源图片搜索，生成具有顶级大厂风格的视频内容。 ## 🆕 多源图片搜索（v2.0）本工具现已集成 **Google Images 网页爬取** ，无需 Unsplash API Key 即可获取大量高质量真实图片： 🥇 Python/Google Images → 🥈 Bing Images → 🥉 Unsplash → 🎨 渐变占位图层级 | 来源 | 说明 | 需要配置 ---|---|---|--- 1 | **Google Images** | Python + Playwright 爬取高清原图 | 无需 API Key 2 | **Bing Images** | HTTP 解析，快速备选 | 无需 API Key 3 | **Unsplash** | 高质量摄影图 | 需 `UNSPLASH_ACCESS_KEY` 4 | **占位图** | 自动生成渐变背景 | 无需配置 ### 图片搜索使用 # 一键搜索所有场景图片 node scripts/search_images.js scenes.json --output ./public/images # 输出示例： # ✅ 总计: 4 个场景 # Google: 3 个 ← 真实网页图片 # Bing: 1 个 ← 真实网页图片 # Unsplash: 0 个 # 占位图: 0 个每个场景将自动获取 1-2 张高清图片，优先使用 Google Images 真实图片。 ## ✨ Features * 🖼️ **融入式图片展示** \- 图片作为内容的一部分，支持侧边、浮动、卡片等多种布局 * 📝 **丰富的文字内容** \- 支持多段落、要点列表、统计数据、引用等多种内容类型 * 💬 **智能字幕系统** \- 逐句字幕与音频精准同步，支持自动时间轴分配 * 🔤 **超大字体设计** \- 专为视频优化的字体大小，确保在各种屏幕上清晰可读 * 🎬 **丰富的动画效果** \- 打字机、逐行淡入、关键词高亮、数字滚动等动画 * ✅ **完美音视频同步** \- 每个场景等待音频播放完成 * 🎙️ **多 TTS 支持** \- 支持豆包、Volcano 或任何 TTS 服务，默认使用自然男声 * 📐 **动态时长计算** \- 根据音频时长自动计算帧数 * 🔧 **FFmpeg 拼接** \- 无缝合并所有场景 ## 工作流程脚本 → TTS 音频 → 搜索图片 → 测量时长 → 渲染场景 → 拼接视频 ### 多源图片搜索（新）本工具现在支持多源图片搜索，自动按优先级获取高质量图片： Google Images → Bing Images → Unsplash → 渐变占位图 * **Google Images** : 首选，爬取高清原图 * **Bing Images** : 备选，无需 API Key * **Unsplash** : 兜底，高质量摄影图（需 API Key） * **占位图** : 最终兜底，根据场景主题自动生成渐变色使用方法： node scripts/search_images.js scenes.json --output ./public/images 搜索完成后会输出摘要报告，告知每个场景使用的图片来源。 ## 前置要求 ### 1\. 系统依赖 # macOS brew install ffmpeg # Python 3.8+ 和 Playwright（用于 Google Images 爬取） pip3 install playwright npx playwright install chromium ### 2\. Node.js 依赖 npm install @remotion/cli remotion react react-dom ## Unsplash API 配置 ### 1\. 获取 Unsplash Access Key 1. 访问 [Unsplash Developers]() 2. 注册并创建新应用 3. 获取 **Access Key** ### 2\. 设置环境变量 # 添加到 ~/.zshrc 或 ~/.bashrc export UNSPLASH_ACCESS_KEY="your_access_key_here" # 立即生效 source ~/.zshrc ## 项目结构 my-video/ ├── src/ │ ├── index.tsx # 注册所有 compositions │ ├── scenes/ │ │ └── SceneTemplate.tsx # 专业风格模板 │ └── components/ │ ├── Typography.tsx # 文字组件 │ ├── ImageCard.tsx # 图片卡片组件 │ ├── Animations.tsx # 动画组件 │ ├── GradientOverlay.tsx # 渐变遮罩 │ └── UnsplashImage.tsx # 图片展示 ├── scripts/ │ ├── search_images.js # 🔥 多源图片搜索主脚本 │ ├── generate_placeholder.js # 渐变占位图生成 │ └── lib/ # 爬取库 │ ├── crawl_google_images.py # Python Google 图片爬取 │ └── download_images.py # 图片下载器 ├── public/ │ ├── audio/ # TTS 音频文件 │ └── images/ # 下载的真实图片 ├── scenes.json # 场景配置 ├── image-map.json # 图片路径映射 └── package.json ## 场景配置 (scenes.json) ### 基础场景 { "id": "intro", "searchQuery": "artificial intelligence technology abstract blue", "title": "人工智能革命", "subtitle": "探索改变世界的技术力量", "caption": "Introduction", "variant": "hero" } ### 丰富内容场景 { "id": "solution", "searchQuery": "neural network ai brain technology", "title": "智能解决方案", "caption": "Our Solution", "variant": "content-rich", "layout": { "imageLayout": "side-right", "imageStyle": "card", "imageAnimation": "float", "textAlign": "left", "accentColor": "#10b981" }, "paragraphs": [ "我们的 AI 平台能够自动处理海量数据，从中提取有价值的洞察。", "通过深度学习算法，系统可以识别复杂的模式和趋势。" ], "bulletPoints": [ "实时数据处理，毫秒级响应", "准确率高达 99.7%", "自动生成可视化报告" ], "stat": { "value": "300", "label": "效率提升", "suffix": "%" }, "highlightKeywords": ["AI", "深度学习"] } ## 配置选项详解 ### Variant 变体变体 | 描述 | 图片布局 ---|---|--- `hero` | 全屏背景，居中标题 | `background` `centered` | 居中布局，暗角遮罩 | `background` `split` | 左右分割布局 | `side-right` `minimal` | 简洁底部对齐 | `background` `content-rich` | 丰富内容展示 | `side-right` 或 `side-left` ### Layout 配置 { "layout": { "imageLayout": "side-right", // 图片位置 "imageStyle": "card", // 图片样式 "imageAnimation": "float", // 图片动画 "textAlign": "left", // 文字对齐 "accentColor": "#3b82f6" // 强调色 } } #### imageLayout 选项 * `background` \- 全屏背景（传统方式） * `side-left` \- 图片在左侧，占 42% 宽度 * `side-right` \- 图片在右侧，占 42% 宽度 * `floating` \- 图片浮动在右侧上方 * `inline` \- 图片内嵌在文字内容中 #### imageStyle 选项 * `none` \- 无边框无阴影 * `rounded` \- 圆角（24px） * `card` \- 卡片样式（圆角 + 阴影 + 边框） * `polaroid` \- 拍立得样式（白色边框） * `circle` \- 圆形 #### imageAnimation 选项 * `none` \- 无动画 * `zoom` \- 缓慢放大（Ken Burns 效果） * `fade` \- 淡入 * `slide` \- 滑入 * `float` \- 悬浮浮动 ### 内容字段字段 | 类型 | 描述 ---|---|--- `title` | string | 主标题（必填） `subtitle` | string | 副标题 `caption` | string | 章节标签（大写字母，如 "INTRODUCTION"） `paragraphs` | string[] | 段落文字数组 `bulletPoints` | string[] | 要点列表 `quote` | {text, author?} | 引用文字和作者 `stat` | {value, label, suffix?} | 统计数据展示 `highlightKeywords` | string[] | 需要高亮的关键词 `subtitles` | object | 逐句字幕配置（见下方） ### 逐句字幕配置通过 `subtitles` 字段配置与音频同步的字幕： { "id": "intro", "title": "AGI 早已实现", "subtitles": { "sentences": [ "Nature 重磅评论：", "AGI 早已实现，人类却不敢承认。", "就在五年前，我们还没有 AGI；", "而今天，我们已经拥有它。" ], "mode": "word-count", "style": { "position": "bottom", "bgOpacity": 0.8, "fontSize": 52, "maxWidth": "90%", "bottomOffset": 100 } } } **字幕配置选项：** 字段 | 类型 | 描述 ---|---|--- `sentences` | string[] | 字幕句子数组，每句会按时间显示 `mode` | string | 时间分配模式：`word-count`(按字数) / `equal`(平均) `style.position` | string | 位置：`bottom`(底部) / `middle`(中间) `style.bgOpacity` | number | 背景透明度，0-1 `style.fontSize` | number | 字体大小(px) `style.maxWidth` | string | 最大宽度，如 `"90%"` `style.bottomOffset` | number | 距底部距离(px) **时间分配模式：** * **`word-count`** (默认)：按句子字数比例分配音频时长，长句显示更久 * **`equal`** ：平均分配音频时长给每句话 > 💡 **提示** ：按字数分配通常更自然，因为长句需要更多时间阅读。 ## 字体大小规格专为 1920x1080 视频优化：元素 | 大小 | 用途 ---|---|--- **主标题 (xl)** | 160px | 重要章节标题 **主标题 (lg)** | 120px | 标准章节标题 **主标题 (md)** | 90px | 次要标题 **副标题** | 64px | 副标题描述 **段落文字** | 44px | 正文内容 **要点列表** | 40px | 列表项 **统计数据值** | 220px | 大数字展示 **统计标签** | 44px | 数字说明 **引用文字** | 56px | 引用内容 **说明标签** | 28px | 章节标识 ## 动画效果 ### 文字动画 import { TypewriterText, StaggerContainer, HighlightText } from './components'; // 打字机效果 // 逐行淡入第一行第二行 // 关键词高亮 ### 数字滚动 import { AnimatedCounter } from './components'; ## TTS 语音配置 ### 方案一：豆包 TTS（推荐 ⭐）创建 `voice.json`： { "provider": "doubao", "voice": "zh_male_jieshuoxiaoming_moon_bigtts", "speed": 1.0, "volume": 1.0, "pitch": 0 } **环境变量设置** ： export VOLCANO_TTS_APPID="your_app_id" export VOLCANO_TTS_ACCESS_TOKEN="your_access_token" export VOLCANO_TTS_SECRET_KEY="your_secret_key" ### 方案二：系统 TTS（macOS）如果暂时无法使用豆包，可用系统自带 TTS： say -v "Ting-Ting" "你的文案" -o output.aiff # 转换为 mp3 ffmpeg -i output.aiff output.mp3 > ⚠️ 系统 TTS 音质较差，建议优先使用豆包 TTS ### 推荐男声音色 **新闻/科普类视频推荐** ： * `zh_male_jieshuoxiaoming_moon_bigtts` \- 解说小明 ⭐ **最推荐，无需权限** * `zh_male_xinwenxiaozhi_mars_bigtts` \- 新闻小志（需开通权限） * `zh_male_jingdianxiaoming_mars_bigtts` \- 经典小明（需开通权限） **情感类/故事类视频** ： * `zh_male_xiaomo_mars_bigtts` \- 小莫，温暖友好 * `zh_male_xudong_conversation_wvae_bigtts` \- 开心小东，阳光开朗 ## 完整示例场景 [ { "id": "intro", "searchQuery": "artificial intelligence technology", "title": "AI 革命", "subtitle": "正在改变我们的世界", "variant": "hero", "layout": { "imageLayout": "background", "imageAnimation": "zoom", "accentColor": "#3b82f6" } }, { "id": "challenge", "searchQuery": "complex data visualization", "title": "数据挑战", "caption": "THE CHALLENGE", "variant": "content-rich", "layout": { "imageLayout": "side-right", "imageStyle": "card", "accentColor": "#ef4444" }, "paragraphs": [ "数据爆炸时代已经来临，企业面临着前所未有的挑战。", "传统方法已无法满足现代数据处理需求。" ], "bulletPoints": [ "数据量年增长 300%", "人工处理效率低下", "决策成本急剧上升" ], "highlightKeywords": ["数据爆炸", "挑战"] }, { "id": "result", "searchQuery": "success business growth", "title": "显著成效", "caption": "RESULTS", "variant": "content-rich", "layout": { "imageLayout": "side-left", "imageStyle": "rounded", "accentColor": "#10b981" }, "stat": { "value": "500", "label": "客户增长率", "suffix": "%" }, "quote": { "text": "这是我们做过的最明智的投资", "author": "某知名企业 CEO" } } ] ## 快速开始 # 1. 创建项目 mkdir my-video && cd my-video npm init -y npm install @remotion/cli remotion react react-dom axios # 2. 复制 skill 文件 cp -r ~/clawd/skills/remotion-synced-video/src . cp ~/clawd/skills/remotion-synced-video/scripts . cp ~/clawd/skills/remotion-synced-video/scenes.json . # 3. 可选：设置 Unsplash API Key（用于兜底） export UNSPLASH_ACCESS_KEY="your_key_here" # 4. 搜索图片（自动多源搜索） node scripts/search_images.js scenes.json --output ./public/images # 5. 预览 npx remotion preview src/index.tsx # 6. 渲染 npx remotion render src/index.tsx Scene-intro out/intro.mp4 ## 最佳实践 ### 🎙️ TTS 音色选择 **强烈推荐使用豆包 TTS** ，比系统 TTS 自然很多： # 安装豆包 TTS skill cd ~/clawd/skills/doubao-open-tts pip install -r requirements.txt # 设置环境变量 export VOLCANO_TTS_APPID="your_app_id" export VOLCANO_TTS_ACCESS_TOKEN="your_access_token" export VOLCANO_TTS_SECRET_KEY="your_secret_key" **推荐的中文男声音色** （新闻/科普类视频）：音色 | Voice Type | 特点 | 备注 ---|---|---|--- **解说小明** | `zh_male_jieshuoxiaoming_moon_bigtts` | 新闻播报风格，清晰专业 | ⭐ 推荐，无需额外权限新闻小志 | `zh_male_xinwenxiaozhi_mars_bigtts` | 标准新闻播报男声 | 需开通权限经典小明 | `zh_male_jingdianxiaoming_mars_bigtts` | 经典纪录片男声 | 需开通权限开心小东 | `zh_male_xudong_conversation_wvae_bigtts` | 阳光开朗，自然亲切 | 情感类音色 > ⚠️ **注意** ：部分音色需要在火山引擎控制台申请开通权限，建议先用解说小明测试。 ### 📦 视频文件大小管理 **Telegram 限制 16MB** ，需要压缩： # 压缩至 16MB 以内（1080p 保持可接受画质） ffmpeg -i input.mp4 \ -vcodec h264 -acodec aac \ -b:v 1.5M -b:a 128k \ -movflags +faststart \ output_compressed.mp4 # 如需更小文件，降低视频码率 ffmpeg -i input.mp4 -b:v 800k -b:a 96k output.mp4 **码率参考** ： * 高质量：`-b:v 3M` (~25MB/分钟) * 标准质量：`-b:v 1.5M` (~12MB/分钟) ⭐ 推荐 * 低质量：`-b:v 800k` (~6MB/分钟) ### 🔧 完整生成流程 # 1. 创建项目 mkdir my-video && cd my-video npm init -y npm install @remotion/cli remotion react react-dom axios # 2. 复制 skill 文件 cp -r ~/clawd/skills/remotion-synced-video/src . cp ~/clawd/skills/remotion-synced-video/scenes.json . # 3. 设置环境变量 export UNSPLASH_ACCESS_KEY="your_key_here" export VOLCANO_TTS_APPID="your_app_id" export VOLCANO_TTS_ACCESS_TOKEN="your_token" export VOLCANO_TTS_SECRET_KEY="your_secret" # 4. 生成 TTS 音频（使用豆包） python ~/clawd/skills/doubao-open-tts/scripts/tts.py "你的文案" \ -v zh_male_jieshuoxiaoming_moon_bigtts \ -o public/audio/scene1.mp3 # 5. 搜索图片 node src/../scripts/search_images.js scenes.json public/images # 6. 测量音频时长并生成配置文件（关键步骤！） # 这确保每个场景的时长与音频完全同步 echo "{"> audio-durations.json for file in public/audio/*.mp3; do filename=$(basename "$file" .mp3) # 获取音频时长并加2秒缓冲 duration=$(ffprobe -v error -show_entries format=duration -of default=noprint_wrappers=1:nokey=1 "$file" | cut -d. -f1) duration=$((duration + 2)) echo " \"$filename\": $duration," >> audio-durations.json done # 删除最后一个逗号并关闭 JSON truncate -s-2 audio-durations.json echo "" >> audio-durations.json echo "}" >> audio-durations.json # 7. 预览 npx remotion preview src/index.tsx # 8. 渲染所有场景 npx remotion render src/index.tsx Scene-intro out/intro.mp4 npx remotion render src/index.tsx Scene-history out/history.mp4 # ... 渲染其他场景 # 9. 拼接视频 ffmpeg -f concat -i filelist.txt -c copy output/final.mp4 # 10. 压缩（如需） ffmpeg -i output/final.mp4 -b:v 1.5M -b:a 128k output/final_compressed.mp4 ### 💡 内容创作建议 1. **脚本长度** ：每个场景控制在 50-80 字，对应 5-10 秒音频 2. **总时长** ：短视频建议 30-60 秒，4-6 个场景 3. **图片搜索词** ：使用英文关键词，如 `"artificial intelligence technology"`、`"neural network"` 4. **highlightKeywords** ：在关键概念上使用高亮，增强记忆点 ### 🐛 常见问题排查 **问题：TTS 生成失败** Solution: 检查 VOLCANO_TTS_* 环境变量是否设置正确 **问题：音色报权限错误** Solution: 更换为解说小明 (zh_male_jieshuoxiaoming_moon_bigtts) 或其他无需权限的音色 **问题：视频文件太大** Solution: 使用 FFmpeg 压缩，降低 -b:v 码率参数 **问题：语音还没说完画面就切换了** 原因：场景时长固定，没有根据实际音频长度调整 Solution: 1. 使用 ffprobe 测量每个音频的实际时长 2. 生成 audio-durations.json 配置文件 3. 在 index.tsx 中读取配置并动态计算帧数示例代码： // index.tsx import audioDurations from '../audio-durations.json'; function getAudioDuration(sceneId: string): number { return (audioDurations as Record)[sceneId] || 5; } // 在 Composition 中使用 * * * ## 🎯 音频时长同步最佳实践 ### 为什么需要同步？当视频由多个场景拼接而成时，每个场景的**画面时长必须与音频时长完全匹配** ，否则会出现： * ❌ 语音还没说完，画面就切到下一个场景 * ❌ 语音已经结束，画面还停留在当前场景 ### 解决方案：音频时长配置 **步骤 1：创建音频时长测量脚本** 创建 `scripts/measure-audio.sh`： #!/bin/bash AUDIO_DIR="public/audio" OUTPUT_FILE="audio-durations.json" echo "{" first=true for file in "$AUDIO_DIR"/*.mp3; do filename=$(basename "$file" .mp3) duration=$(ffprobe -v error -show_entries format=duration -of default=noprint_wrappers=1:nokey=1 "$file" | cut -d. -f1) if [ -z "$duration" ]; then duration=5; fi duration=$((duration + 2)) # 加2秒缓冲 if [ "$first" = true ]; then first=false; else echo ","; fi echo " \"$filename\": $duration" done echo "" echo "}" **步骤 2：更新 index.tsx 读取时长** import {Composition, registerRoot} from 'remotion'; import {SceneTemplate} from './scenes/SceneTemplate'; import audioDurations from '../audio-durations.json'; // 导入配置 const FPS = 30; // 从配置文件获取音频时长 function getAudioDuration(sceneId: string): number { return (audioDurations as Record)[sceneId] || 5; } // 计算帧数 function calculateFrames(durationInSeconds: number): number { return Math.ceil(durationInSeconds * FPS); } export const RemotionRoot: React.FC = () => { return ( <> {scenes.map((scene) => ( ))} ); }; registerRoot(RemotionRoot); **步骤 3：在渲染流程中执行测量** # 生成 TTS 音频后，必须执行时长测量 ./scripts/measure-audio.sh > audio-durations.json # 然后再渲染 ./scripts/render.sh ### 时长配置示例生成的 `audio-durations.json` 格式： { "intro": 7, "gpt4o": 16, "xai": 15, "google": 15, "moltbot": 11, "datacenter": 16, "outro": 8 } > 💡 **提示** ：数值单位为秒，已包含 +2 秒缓冲时间，确保语音完整播放。 * * * ## 常见问题 ### Q: 字体在不同分辨率下如何适配？ A: 字体大小基于 1920x1080 设计，在 4K 播放时会自动缩放。如需调整，使用 `textScale` 属性。 ### Q: 图片布局如何选择？ A: 简短有力的标题用 `background`，需要展示大量内容时用 `side-right` 或 `side-left`。 ### Q: 如何自定义动画速度？ A: 大多数组件支持 `delay` 和 `duration` 参数，单位为帧（30fps = 1秒）。 ### Q: 统计数据支持小数吗？ A: 支持，使用字符串格式 `value: "99.7"` 或配合 `formatNumber: false` 显示小数。 * * * **Pro Tip** : 使用 `highlightKeywords` 可以让核心概念在视频中更加醒目，增强观众记忆！

远程同步视频

包含技能