SuperAPI AI Directory
Partner中文AI newsFavorites
Skillssearch-video-on-web-and-gen

search-video-on-web-and-gen

Design & creation

View repository

Updated 10-16 08:49

About this skill

Remotion Video Pipeline

One-stop video production pipeline: search video materials → generate Doubao TTS voiceover → Remotion professional rendering → add background music. Quickly turn text content into polished short videos.

✨ Features

  • 🔍 Smart Material Search - Use yt-dlp to automatically search and download YouTube video materials
  • ✂️ Automatic Editing - FFmpeg automatically crops and transcodes video clips
  • 🎙️ Doubao TTS Voiceover - Use Doubao (Volcano Engine) high-quality speech synthesis
  • 🎬 Remotion Rendering - Professional-grade video rendering, supports video/image backgrounds
  • 📝 Bottom Subtitles - Automatically displays voiceover text, cinematic subtitle bar design
  • 🎵 Background Music - Automatically adds royalty-free BGM, smart volume balancing
  • 📦 Fully Automated Workflow - Complete everything from materials to final product with one command

Prerequisites

# 1. 安装依赖
brew install ffmpeg yt-dlp
npm install -g @remotion/cli

# 2. 安装豆包 TTS skill
cd ~/clawd/skills/doubao-open-tts
pip install -r requirements.txt

# 3. 配置火山引擎密钥
cp ~/clawd/skills/doubao-open-tts/.env.example.txt ~/.env
# 编辑 .env 添加你的密钥

Quick Start

Option 1: Use Scripts (Recommended)

# 创建视频项目
cd ~/clawd/skills/remotion-video-pipeline
./scripts/create-video.sh "约克夏犬介绍" ~/output/yorkie

# 按提示操作：
# 1. 编辑 scenes.json 设置内容
# 2. 运行渲染脚本
# 3. 获取成品视频

Option 2: Manual Workflow

# 1. 创建项目
mkdir my-video && cd my-video
npm init -y
npm install @remotion/cli remotion react react-dom axios

# 2. 复制模板
cp -r ~/clawd/skills/remotion-video-pipeline/templates/remotion-base/* .

# 3. 下载视频素材
yt-dlp -f "18" -o "raw_video.%(ext)s" "ytsearch1:关键词"
ffmpeg -i raw_video.mp4 -ss 00:00:10 -t 10 clip1.mp4

# 4. 生成TTS音频
python3 ~/clawd/skills/doubao-open-tts/scripts/tts.py "你的文案" \
  -v zh_male_jieshuoxiaoming_moon_bigtts -o audio/intro.mp3

# 5. 渲染视频
npx remotion render src/index.tsx Scene-intro out/intro.mp4

# 6. 添加BGM
ffmpeg -i final.mp4 -i bgm.mp3 -filter_complex \
  "[1:a]volume=0.5[bgm];[0:a][bgm]amix=inputs=2:duration=longest[a]" \
  -map 0:v -map "[a]" -c:v copy -c:a aac output.mp4

Project Structure

my-video/
├── scenes.json              # 场景配置（核心文件）
├── audio-durations.json     # 音频时长配置（自动生成）
├── src/
│   ├── index.tsx           # Remotion入口
│   ├── scenes/
│   │   └── SceneTemplate.tsx
│   └── components/         # UI组件
├── public/
│   ├── audio/              # TTS音频
│   ├── images/             # 图片素材
│   └── videos/             # 视频素材
├── out/                    # 输出目录
└── scripts/
    ├── generate_tts.sh     # 批量生成TTS
    ├── download_video.sh   # 下载视频素材
    └── add_bgm.sh          # 添加背景音乐

Scene Configuration (scenes.json)

[
  {
    "id": "intro",
    "searchQuery": "yorkshire terrier puppy", 
    "title": "约克夏犬",
    "subtitle": "迷你的外表，巨大的个性",
    "caption": "INTRODUCTION",
    "variant": "hero",
    "videoSrc": "videos/clip1.mp4",
    "ttsText": "约克夏犬，迷你的外表，巨大的个性。"
  },
  {
    "id": "content",
    "title": "起源与历史", 
    "variant": "content-rich",
    "videoSrc": "videos/clip2.mp4",
    "paragraphs": ["段落1", "段落2"],
    "bulletPoints": ["要点1", "要点2"],
    "ttsText": "约克夏犬起源于19世纪的英国约克郡..."
  }
]

Configuration Field Description

Field Description
id Unique scene identifier
searchQuery Keywords for searching video materials
title Main title
subtitle Subtitle
caption Section label (uppercase)
variant Layout variant: hero/centered/content-rich/minimal
videoSrc Video material path
ttsText Voiceover script (also displayed as bottom subtitles)
paragraphs Array of paragraph content
bulletPoints Bullet point list

Automation Scripts

1. Batch Generate TTS

./scripts/generate_tts.sh scenes.json public/audio

# 可选参数：
# -v 指定音色（默认：解说小明）
# -s 指定语速

2. Download Video Materials

./scripts/download_video.sh "搜索关键词" public/videos 5

# 参数说明：
# $1 - 搜索关键词
# $2 - 输出目录
# $3 - 下载数量（默认5）

3. Automatic Clip Editing

./scripts/extract_clips.sh raw_video.mp4 public/videos/ 10

# 从视频中自动提取多个10秒片段

4. Add Background Music

./scripts/add_bgm.sh input.mp4 bgm.mp3 output.mp4 0.5

# 参数说明：
# $1 - 输入视频
# $2 - 背景音乐
# $3 - 输出视频
# $4 - BGM音量（相对于原声，默认0.5=50%）

5. One-Click Render All

./scripts/render_all.sh

# 自动：
# 1. 测量音频时长
# 2. 渲染所有场景
# 3. 拼接最终视频
# 4. 压缩输出

Recommended Voices

Chinese Male Voice (News/Commentary)

Voice Voice Type Features Permission
Commentary Xiaoming zh_male_jieshuoxiaoming_moon_bigtts Natural commentary style ⭐ No permission required
News Xiaozhi zh_male_xinwenxiaozhi_mars_bigtts Standard news broadcast Requires activation
Classic Xiaoming zh_male_jingdianxiaoming_mars_bigtts Documentary style Requires activation
Xiaomo zh_male_xiaomo_mars_bigtts Warm and friendly Requires activation

Chinese Female Voice

Voice Voice Type Features
Cancan zh_female_cancan_mars_bigtts Lively female voice
News Xiaojing zh_female_xinwenxiaojing_mars_bigtts Professional news

Free BGM Sources

  1. Free Music Archive - https://freemusicarchive.org
  2. Incompetech - https://incompetech.com
  3. ccMixter - http://ccmixter.org
  4. Musopen - https://musopen.org

Search keywords:cute, happy, upbeat, pet, playful, warm

Complete Example Workflow

# 1. 创建视频目录
mkdir -p ~/output/my-video && cd ~/output/my-video

# 2. 初始化项目
cp -r ~/clawd/skills/remotion-video-pipeline/templates/remotion-base/* .
npm install

# 3. 编辑 scenes.json 定义内容
vim scenes.json

# 4. 下载视频素材
~/clawd/skills/remotion-video-pipeline/scripts/download_video.sh \
  "yorkshire terrier puppy" public/videos 5

# 5. 提取片段
ffmpeg -i public/videos/video1.mp4 -ss 00:00:10 -t 10 public/videos/clip1.mp4

# 6. 生成TTS
~/clawd/skills/remotion-video-pipeline/scripts/generate_tts.sh scenes.json public/audio

# 7. 渲染所有场景
~/clawd/skills/remotion-video-pipeline/scripts/render_all.sh

# 8. 添加BGM
curl -L -o bgm.mp3 "https://files.freemusicarchive.org/..."
~/clawd/skills/remotion-video-pipeline/scripts/add_bgm.sh \
  out/final.mp4 bgm.mp4 out/final_with_bgm.mp4 0.5

# ✅ 完成！

Output Files

  • out/scene-*.mp4 - Single scene video
  • out/final.mp4 - Complete video (uncompressed)
  • out/final_compressed.mp4 - Compressed version (recommended for sharing)
  • out/final_with_bgm.mp4 - Version with background music

FAQ

Q: What should I do if the video is too large?

ffmpeg -i input.mp4 -b:v 1.5M -b:a 128k output.mp4

Q: How do I adjust the BGM volume?

# 修改 add_bgm.sh 中的 volume 参数
# 0.3 = 30%, 0.5 = 50%, 1.0 = 100%

Q: TTS generation failed?

  • Check the Volcano Engine key in .env Volcano Engine key in
  • Make sure the voice does not require additional permissions (Commentary Xiaoming is recommended)
  • Check the network connection

Q: How do I modify the scene duration? Audio duration is measured automatically; if manual adjustment is needed:

# 编辑 audio-durations.json
{
  "intro": 10,    # 单位：秒
  "content": 15
}

Best Practices

  1. Copy Length - 50-80 characters per scene, corresponding to 5-10 seconds
  2. Video Duration - 30-60 seconds is optimal for short videos
  3. BGM Volume - Set to 30-50% of the narration volume (0.3 recommended)
  4. Subtitle Display - ttsText field is automatically used as the bottom subtitle, keeping it concise and easy to understand

Guide to Using Subtitles and Background Music

📝 Bottom Subtitles

In the scene configuration, the ttsText field is automatically displayed as a bottom cinematic subtitle:

{
  "id": "intro",
  "title": "人工智能",
  "ttsText": "人工智能，正在改变我们的世界。",
  "variant": "hero"
}

Subtitle Style:

  • Position: bottom center of the frame
  • Background: black semi-transparent (75% opacity)
  • Font: 48px white bold
  • Rounded corners: 8px border

🎵 Add Background Music

Use the built-in script to quickly add BGM:

# 基础用法
./scripts/add_bgm.sh input.mp4 bgm.mp3 output.mp4

# 自定义BGM音量（30%）
./scripts/add_bgm.sh input.mp4 bgm.mp3 output.mp4 0.3

Manually use FFmpeg:

ffmpeg -i final.mp4 -i bgm.mp3 \
  -filter_complex "[1:a]volume=0.3[bgm];[0:a][bgm]amix=inputs=2:duration=first[a]" \
  -map 0:v -map "[a]" -c:v copy -c:a aac output.mp4

Parameter Description:

  • volume=0.3 - BGM volume 30% (does not overpower the voice)
  • amix=inputs=2 - Mix two audio tracks
  • duration=first - Use the video length as the standard
  • -c:v copy - Copy the video directly (fast processing)
  1. Material Search - Using English keywords works best
  2. Color Consistency - Set a unified accentColor in scenes.json

With this skill, you can create a beautiful popular science short video in just 30 minutes! 🎬