วิธีเปลี่ยน Claude Code เป็นผู้กำกับวิดีโอด้วย Remotion

Remotion เพิ่งเปิดตัว Agent Skills และสิ่งนี้ได้เปลี่ยนแปลงทุกสิ่งสำหรับการสร้างวิดีโอด้วย AI

npx skills add remotion-dev/skills

แค่นั้นแหละ คำสั่งเดียว Claude Code ก็กลายเป็นผู้เชี่ยวชาญด้านการสร้างวิดีโอที่เข้าใจ Remotion ซึ่งเป็นเฟรมเวิร์กวิดีโอที่ใช้ React อย่างถ่องแท้

Remotion Agent Skills คืออะไร?

Agent Skills คือ "คู่มือการใช้งาน" ที่สอน AI agents เช่น Claude Code ให้ใชเครื่องมือและเฟรมเวิร์กเฉพาะได้อย่างถูกต้อง Remotion skills อย่างเป็นทางการจะให้ความรู้เชิงลึกแก่ Claude ในเรื่อง:

สถาปัตยกรรมคอมโพเนนต์ของ Remotion (<Composition>, <Sequence>, <AbsoluteFill>)
Animation APIs (interpolate, spring, useCurrentFrame)
แนวทางปฏิบัติที่ดีที่สุดสำหรับเวลา, ประสิทธิภาพ และการเรนเดอร์
รูปแบบทั่วไปสำหรับส่วนนำ, การเปลี่ยนฉาก และเอฟเฟกต์

หากไม่มี skills, Claude อาจสร้างโค้ด Remotion ที่มีข้อผิดพลาดหรือไม่ถูกต้อง แต่เมื่อมี skills, มันจะเขียนคอมโพเนนต์วิดีโอคุณภาพระดับโปรดักชันได้ตั้งแต่ครั้งแรก

💡

ต้องการสร้าง API สำหรับการสร้างวิดีโอใช่ไหม? บทช่วยสอนนี้ยังครอบคลุมถึงการสร้าง REST endpoints สำหรับการเรนเดอร์วิดีโอตามความต้องการ ใช้ Apidog เพื่อออกแบบ ทดสอบ และจัดทำเอกสาร API การสร้างวิดีโอของคุณด้วยการทดสอบอัตโนมัติและการทำงานร่วมกันแบบเรียลไทม์

ปุ่ม

สิ่งที่คุณจะได้สร้าง

ในบทช่วยสอนนี้ คุณจะได้:

ติดตั้ง Remotion Agent Skills ด้วยคำสั่งเดียว
สร้างวิดีโอแนะนำฉบับเต็มโดยใช้ภาษามนุษย์
ปรับแต่งแอนิเมชันผ่านการสนทนา
เรนเดอร์วิดีโอของคุณเป็น MP4
ขยายขนาดด้วย Remotion Lambda (ไม่บังคับ)

สรุปย่อ

# 1. สร้างโปรเจกต์ Remotion
npx create-video@latest my-video && cd my-video

# 2. ติดตั้ง Agent Skills (ขั้นตอนสำคัญ!)
npx skills add remotion-dev/skills

# 3. เริ่มต้น Claude Code และอธิบายวิดีโอของคุณ
claude

# 4. เรนเดอร์
npx remotion render <composition-name> out/video.mp4

นั่นคือขั้นตอนการทำงานทั้งหมด Agent Skills สอน Claude วิธีเขียนโค้ด Remotion ที่เหมาะสม ดังนั้นคุณจึงสามารถมุ่งเน้นไปที่การอธิบายสิ่งที่คุณต้องการ แทนที่จะต้องแก้ไขข้อผิดพลาดในคอมโพเนนต์ React

ข้อกำหนดเบื้องต้น

ก่อนเริ่มต้น ตรวจสอบให้แน่ใจว่าคุณมีสิ่งต่อไปนี้:

ข้อกำหนด	เวอร์ชัน	คำสั่งตรวจสอบ
Node.js	18+	`node --version`
npm หรือ yarn	ล่าสุด	`npm --version`
Claude Code	ล่าสุด	`claude --version`
โปรแกรมแก้ไขโค้ด	แนะนำ VS Code	-

คุณควรมีสิ่งเหล่านี้ด้วย:

ความคุ้นเคยกับ Command Line ขั้นพื้นฐาน
ความเข้าใจพื้นฐานเกี่ยวกับ React (มีประโยชน์ แต่ไม่จำเป็น)

ขั้นตอนที่ 1: ติดตั้ง Remotion และสร้างโปรเจกต์ของคุณ

อันดับแรก สร้างโปรเจกต์ Remotion ใหม่โดยใช้ CLI อย่างเป็นทางการ

1.1 เปิด Terminal ของคุณแล้วรัน:

npx create-video@latest my-first-video

1.2 เมื่อมีข้อความแจ้ง ให้เลือกตัวเลือกเหล่านี้:

? คุณต้องการตั้งชื่อโปรเจกต์ของคุณว่าอะไร? my-first-video
? เลือกเทมเพลต: blank
? ใช้ TypeScript? ใช่
? ติดตั้ง dependencies? ใช่

1.3 ไปยังโปรเจกต์ของคุณ:

cd my-first-video

1.4 ตรวจสอบการติดตั้ง:

npm run dev

สิ่งนี้จะเปิด Remotion Studio ในเบราว์เซอร์ของคุณที่ http://localhost:3000 คุณควรเห็นผืนผ้าใบว่างเปล่าพร้อมไทม์ไลน์ที่ด้านล่าง

ผลลัพธ์ที่คาดหวัง: หน้าต่างเบราว์เซอร์พร้อมอินเทอร์เฟซ Remotion Studio

ขั้นตอนที่ 2: ติดตั้ง Remotion Agent Skills

นี่คือจุดที่ความมหัศจรรย์เกิดขึ้น คำสั่งเดียวจะทำให้ Claude Code มีความรู้ระดับผู้เชี่ยวชาญเกี่ยวกับ Remotion

2.1 ในไดเรกทอรีโปรเจกต์ของคุณ รัน:

npx skills add remotion-dev/skills

เมื่อคุณเห็นข้อความ Added skill: remotion แสดงว่าการติดตั้งสำเร็จ

2.2 เกิดอะไรขึ้น?

คำสั่งนี้ได้เพิ่ม skill ไปยัง .claude/skills/remotion/ ในโปรเจกต์ของคุณ โฟลเดอร์นี้มี SKILL.md — คู่มือการใช้งานที่สอน Claude วิธีเขียนโค้ด Remotion ที่ถูกต้อง

2.3 ตรวจสอบการติดตั้ง:

ตรวจสอบว่าไฟล์ skill มีอยู่:

ls .claude/skills/remotion/

ผลลัพธ์ที่คาดหวัง:

SKILL.md

2.4 โครงสร้างโปรเจกต์ของคุณตอนนี้มีลักษณะดังนี้:

my-first-video/
├── .claude/
│   └── skills/
│       └── remotion/
│           └── SKILL.md      # "สมอง" ที่สอน Claude Remotion
├── src/
│   ├── Root.tsx
│   ├── Composition.tsx
│   └── index.ts
├── public/
├── remotion.config.ts
├── package.json
└── tsconfig.json

เคล็ดลับโปร: หาก skill ไม่ได้รับการจดจำ ให้รัน npx skills add remotion-dev/skills อีกครั้ง หรือรีสตาร์ท Claude Code

ขั้นตอนที่ 3: สร้างวิดีโอแรกของคุณด้วย Claude Code

ตอนนี้เรามาใช้ Claude Code เพื่อสร้างวิดีโอที่สมบูรณ์กัน เปิด Terminal ของคุณในไดเรกทอรีโปรเจกต์

3.1 เริ่มต้น Claude Code:

claude

3.2 อธิบายวิดีโอของคุณ:

พิมพ์พรอมต์นี้ลงใน Claude Code:

สร้างวิดีโอแนะนำความยาว 5 วินาทีสำหรับบริษัทเทคโนโลยีชื่อ "DevFlow"

ข้อกำหนด:
- ความละเอียด: 1920x1080
- เฟรมเรต: 30fps
- พื้นหลัง: ไล่ระดับสีเข้มจาก #1a1a2e ถึง #16213e
- ลำดับแอนิเมชัน:
  1. ข้อความโลโก้ "DevFlow" ค่อยๆ ปรากฏขึ้นจากความทึบ 0 เป็น 1 (เฟรม 0-30)
  2. โลโก้ขยายใหญ่ขึ้นเล็กน้อยพร้อมเอฟเฟกต์เด้ง (เฟรม 15-45)
  3. สโลแกน "Build faster. Ship smarter." ค่อยๆ ปรากฏขึ้นด้านล่าง (เฟรม 45-90)
  4. ทุกอย่างคงที่ตลอดเฟรมที่เหลือ

ใช้ฟอนต์ที่ทันสมัย สะอาดตา ด้วยตระกูลฟอนต์ Inter

3.3 Claude Code สร้างไฟล์:

Claude Code จะสร้างหรือแก้ไขไฟล์เหล่านี้:

src/Root.tsx - คำจำกัดความของ Composition:

import React from 'react';
import { Composition } from 'remotion';
import { DevFlowIntro } from './DevFlowIntro';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="devflow-intro"
        component={DevFlowIntro}
        durationInFrames={150}
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

src/DevFlowIntro.tsx - คอมโพเนนต์วิดีโอหลัก:

import React from 'react';
import {
  AbsoluteFill,
  useCurrentFrame,
  interpolate,
  spring,
  useVideoConfig,
} from 'remotion';

export const DevFlowIntro: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Logo fade in (frames 0-30)
  const logoOpacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: 'clamp',
  });

  // Logo bounce scale (frames 15-45)
  const logoScale = spring({
    frame: frame - 15,
    fps,
    from: 1,
    to: 1.1,
    config: {
      damping: 10,
      stiffness: 100,
    },
  });

  // Tagline fade in (frames 45-90)
  const taglineOpacity = interpolate(frame, [45, 90], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill
      style={{
        background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)',
        justifyContent: 'center',
        alignItems: 'center',
        fontFamily: 'Inter, sans-serif',
      }}
    >
      <div style={{ textAlign: 'center' }}>
        <h1
          style={{
            fontSize: 120,
            fontWeight: 700,
            color: 'white',
            margin: 0,
            opacity: logoOpacity,
            transform: `scale(${frame >= 15 ? logoScale : 1})`,
          }}
        >
          DevFlow
        </h1>

        <p
          style={{
            fontSize: 36,
            color: 'rgba(255, 255, 255, 0.8)',
            marginTop: 24,
            opacity: taglineOpacity,
            fontWeight: 400,
          }}
        >
          Build faster. Ship smarter.
        </p>
      </div>
    </AbsoluteFill>
  );
};

3.4 ดูตัวอย่างวิดีโอของคุณ:

หาก Remotion Studio ไม่ได้ทำงานอยู่ ให้เริ่มมัน:

npm run dev

เลือก "devflow-intro" จากรายการดรอปดาวน์ composition ใช้ไทม์ไลน์เพื่อเลื่อนดูวิดีโอของคุณและดูตัวอย่างแอนิเมชัน

ผลลัพธ์ที่คาดหวัง: วิดีโอแนะนำของคุณกำลังเล่นพร้อมแอนิเมชันโลโก้และสโลแกนที่ค่อยๆ ปรากฏขึ้น

ขั้นตอนที่ 4: ปรับแต่งวิดีโอของคุณด้วยพรอมต์ติดตาม

พลังของ Claude Code คือการปรับแต่งซ้ำๆ มาปรับปรุงวิดีโอของเรากัน

4.1 เพิ่มเอฟเฟกต์พื้นหลังแบบอนุภาคและเปลี่ยนโทนสี

เพิ่มพื้นหลังแบบอนุภาคที่เคลื่อนไหวอย่างละเอียดอ่อนด้วยจุดสีขาวเล็กๆ
ที่ค่อยๆ ลอยขึ้นข้างบน ทำให้ดูน้อยที่สุด - ประมาณ 20-30 อนุภาค
ความทึบต่ำมาก (0.1-0.2) และการเคลื่อนไหวช้าๆ
เปลี่ยนการไล่ระดับสีเป็นธีมสีน้ำเงิน-ม่วง:
- สีเริ่มต้น: #0f0c29
- สีกลาง: #302b63
- สีสิ้นสุด: #24243e
ทำให้เป็นไล่ระดับ 3 จุด

4.3 เพิ่มคิวเสียงเอฟเฟกต์ (ไม่บังคับ):

เพิ่มความคิดเห็นมาร์กเกอร์ที่ควรเล่นเสียงเอฟเฟกต์ "วูบ"
เมื่อโลโก้เด้ง ฉันจะเพิ่มเสียงในภายหลัง

ทุกครั้งที่คุณให้ข้อเสนอแนะ Claude Code จะแก้ไขโค้ดที่เกี่ยวข้อง และคุณสามารถดูตัวอย่างการเปลี่ยนแปลงได้ทันทีใน Remotion Studio

ขั้นตอนที่ 5: เพิ่มเนื้อหาแบบไดนามิกด้วย Props

ทำให้วิดีโอของคุณนำกลับมาใช้ใหม่ได้โดยการรับ props แบบไดนามิก สิ่งนี้ช่วยให้คุณสร้างวิดีโอหลายรายการที่มีเนื้อหาแตกต่างกันได้

5.1 ขอให้ Claude Code เพิ่ม props:

ปรับโครงสร้างวิดีโอใหม่เพื่อรับ props เหล่านี้:
- companyName (string) - แทนที่ "DevFlow"
- tagline (string) - แทนที่ข้อความสโลแกน
- primaryColor (string) - สีไล่ระดับหลัก
- secondaryColor (string) - สีไล่ระดับรอง

เพิ่มการตรวจสอบ Zod schema เพื่อความปลอดภัยของชนิดข้อมูลด้วย

5.2 Claude Code สร้าง schema:

src/DevFlowIntro.tsx (อัปเดต):

import { z } from 'zod';

export const introSchema = z.object({
  companyName: z.string().default('DevFlow'),
  tagline: z.string().default('Build faster. Ship smarter.'),
  primaryColor: z.string().default('#0f0c29'),
  secondaryColor: z.string().default('#24243e'),
});

type IntroProps = z.infer<typeof introSchema>;

export const DevFlowIntro: React.FC<IntroProps> = ({
  companyName,
  tagline,
  primaryColor,
  secondaryColor,
}) => {
  // ... component uses these props
};

src/Root.tsx (อัปเดต):

import { Composition } from 'remotion';
import { DevFlowIntro, introSchema } from './DevFlowIntro';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="company-intro"
        component={DevFlowIntro}
        durationInFrames={150}
        fps={30}
        width={1920}
        height={1080}
        schema={introSchema}
        defaultProps={{
          companyName: 'DevFlow',
          tagline: 'Build faster. Ship smarter.',
          primaryColor: '#0f0c29',
          secondaryColor: '#24243e',
        }}
      />
    </>
  );
};

5.3 ทดสอบด้วย props ที่แตกต่างกันใน Remotion Studio:

ใน Remotion Studio คลิกที่แผง Props และแก้ไขค่า:

{
  "companyName": "Apidog",
  "tagline": "Design. Debug. Test. Document.",
  "primaryColor": "#1e3a5f",
  "secondaryColor": "#0d1b2a"
}

การแสดงตัวอย่างจะอัปเดตแบบเรียลไทม์

ขั้นตอนที่ 6: สร้างวิดีโอหลายฉาก

มาสร้างวิดีโอที่ซับซ้อนยิ่งขึ้นด้วยหลายฉากกัน

6.1 พรอมต์ Claude Code:

สร้างวิดีโอสาธิตผลิตภัณฑ์ความยาว 30 วินาทีพร้อมฉากเหล่านี้:

ฉากที่ 1 (0-5 วินาที): แอนิเมชันแนะนำโลโก้
ฉากที่ 2 (5-12 วินาที): การนำเสนอคุณสมบัติด้วย 3 ไอคอนที่ปรากฏทีละไอคอน
  - ไอคอน 1: จรวด (ความเร็ว)
  - ไอคอน 2: โล่ (ความปลอดภัย)
  - ไอคอน 3: กราฟ (การวิเคราะห์)
  แต่ละไอคอนควรเลื่อนเข้ามาจากด้านซ้ายพร้อมการเฟด

ฉากที่ 3 (12-22 วินาที): ภาพจำลองแดชบอร์ดผลิตภัณฑ์
  - แสดงภาพจำลอง UI แบบเรียบง่าย
  - เน้นส่วนต่างๆ ตามลำดับ

ฉากที่ 4 (22-30 วินาที): การเรียกร้องให้ดำเนินการ (Call to action)
  - "เริ่มทดลองใช้ฟรี"
  - URL เว็บไซต์ค่อยๆ ปรากฏขึ้น

ใช้คอมโพเนนต์ <Sequence> เพื่อจัดระเบียบฉาก
ระยะเวลารวม: 900 เฟรมที่ 30fps

6.2 Claude Code สร้างโครงสร้างฉาก:

import { Sequence, AbsoluteFill } from 'remotion';
import { LogoIntro } from './scenes/LogoIntro';
import { FeatureShowcase } from './scenes/FeatureShowcase';
import { DashboardMockup } from './scenes/DashboardMockup';
import { CallToAction } from './scenes/CallToAction';

export const ProductDemo: React.FC = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: '#0a0a0a' }}>
      {/* Scene 1: Logo Intro (frames 0-150) */}
      <Sequence from={0} durationInFrames={150}>
        <LogoIntro />
      </Sequence>

      {/* Scene 2: Feature Showcase (frames 150-360) */}
      <Sequence from={150} durationInFrames={210}>
        <FeatureShowcase />
      </Sequence>

      {/* Scene 3: Dashboard Mockup (frames 360-660) */}
      <Sequence from={360} durationInFrames={300}>
        <DashboardMockup />
      </Sequence>

      {/* Scene 4: Call to Action (frames 660-900) */}
      <Sequence from={660} durationInFrames={240}>
        <CallToAction />
      </Sequence>
    </AbsoluteFill>
  );
};

6.3 Claude Code สร้างคอมโพเนนต์แต่ละฉาก:

src/scenes/FeatureShowcase.tsx:

import { useCurrentFrame, interpolate, AbsoluteFill } from 'remotion';

const features = [
  { icon: '🚀', label: 'Speed', delay: 0 },
  { icon: '🛡️', label: 'Security', delay: 30 },
  { icon: '📊', label: 'Analytics', delay: 60 },
];

export const FeatureShowcase: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        gap: 80,
        flexDirection: 'row',
      }}
    >
      {features.map((feature, index) => {
        const slideIn = interpolate(
          frame - feature.delay,
          [0, 30],
          [-100, 0],
          { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' }
        );
        const opacity = interpolate(
          frame - feature.delay,
          [0, 30],
          [0, 1],
          { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' }
        );

        return (
          <div
            key={index}
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              transform: `translateX(${slideIn}px)`,
              opacity,
            }}
          >
            <span style={{ fontSize: 80 }}>{feature.icon}</span>
            <span style={{ fontSize: 24, color: 'white', marginTop: 16 }}>
              {feature.label}
            </span>
          </div>
        );
      })}
    </AbsoluteFill>
  );
};

ขั้นตอนที่ 7: เพิ่มเสียงลงในวิดีโอของคุณ

7.1 เพิ่มเพลงประกอบ:

วางไฟล์เสียงของคุณในโฟลเดอร์ public:

public/
└── audio/
    └── background-music.mp3

7.2 ขอให้ Claude Code ผสานรวมเสียง:

เพิ่มเพลงประกอบจาก public/audio/background-music.mp3
- ค่อยๆ เพิ่มเสียงในช่วง 30 เฟรมแรก
- ค่อยๆ ลดเสียงลงในช่วง 30 เฟรมสุดท้าย
- ตั้งระดับเสียงเป็น 0.5

7.3 Claude Code เพิ่มคอมโพเนนต์ Audio:

import { Audio, interpolate, useCurrentFrame, useVideoConfig } from 'remotion';
import { staticFile } from 'remotion';

export const ProductDemo: React.FC = () => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();

  // Audio fade in/out
  const volume = interpolate(
    frame,
    [0, 30, durationInFrames - 30, durationInFrames],
    [0, 0.5, 0.5, 0],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );

  return (
    <AbsoluteFill>
      <Audio src={staticFile('audio/background-music.mp3')} volume={volume} />
      {/* ... rest of scenes */}
    </AbsoluteFill>
  );
};

ขั้นตอนที่ 8: เรนเดอร์วิดีโอของคุณ

ตอนนี้เรามาส่งออกวิดีโอของคุณไปยังไฟล์กัน

8.1 เรนเดอร์จาก Command Line:

# เรนเดอร์เป็น MP4 (แนะนำสำหรับการใช้งานส่วนใหญ่)
npx remotion render company-intro out/company-intro.mp4

# เรนเดอร์ด้วย props แบบกำหนดเอง
npx remotion render company-intro out/apidog-intro.mp4 \
  --props='{"companyName":"Apidog","tagline":"Design. Debug. Test. Document."}'

8.2 ตัวเลือกการเรนเดอร์:

# คุณภาพสูง (ช้ากว่า)
npx remotion render company-intro out/video.mp4 --crf=18

# คุณภาพต่ำกว่า (เร็วกว่า, ไฟล์เล็กกว่า)
npx remotion render company-intro out/video.mp4 --crf=28

# เรนเดอร์เป็น GIF
npx remotion render company-intro out/video.gif --codec=gif

# เรนเดอร์เป็น WebM
npx remotion render company-intro out/video.webm --codec=vp8

# เรนเดอร์ช่วงเฟรมที่กำหนด
npx remotion render company-intro out/preview.mp4 --frames=0-90

8.3 ความคืบหน้าการเรนเดอร์:

คุณจะเห็นผลลัพธ์เช่น:

ℹ Rendering frames 0-150
████████████████████████████████████████ 100% | 150/150 frames
✓ Rendered 150 frames in 12.3s (12.2 fps)
✓ Encoded video in 3.2s
✓ Video saved to out/company-intro.mp4

ผลลัพธ์ที่คาดหวัง: ไฟล์วิดีโอที่เรนเดอร์แล้วในไดเรกทอรี out/ ของคุณ

ขั้นตอนที่ 9: ขยายขนาดด้วย Remotion Lambda (ไม่บังคับ)

สำหรับการเรนเดอร์วิดีโอในขนาดใหญ่ (หลายร้อยหรือหลายพัน) ให้ใช้ Remotion Lambda

9.1 ติดตั้ง Lambda dependencies:

npm install @remotion/lambda

9.2 กำหนดค่าข้อมูลรับรอง AWS:

# ตั้งค่าข้อมูลรับรอง AWS
aws configure

# สร้างบทบาท Remotion Lambda
npx remotion lambda policies role

9.3 ปรับใช้ฟังก์ชัน Lambda ของคุณ:

# ปรับใช้ฟังก์ชันเรนเดอร์
npx remotion lambda functions deploy

# ปรับใช้ไซต์วิดีโอของคุณ
npx remotion lambda sites create src/index.ts --site-name=my-videos

9.4 เรนเดอร์ผ่าน Lambda:

npx remotion lambda render \
  --function-name=remotion-render \
  --serve-url=https://your-bucket.s3.amazonaws.com/sites/my-videos \
  --composition=company-intro \
  --props='{"companyName":"ClientCo"}'

9.5 การเรนเดอร์แบบ Programmatic:

import { renderMediaOnLambda } from '@remotion/lambda/client';

const result = await renderMediaOnLambda({
  region: 'us-east-1',
  functionName: 'remotion-render',
  composition: 'company-intro',
  serveUrl: 'https://your-bucket.s3.amazonaws.com/sites/my-videos',
  codec: 'h264',
  inputProps: {
    companyName: 'Apidog',
    tagline: 'Design. Debug. Test. Document.',
  },
});

console.log('Video URL:', result.url);

ขั้นตอนที่ 10: สร้าง Video Generation API

สร้าง API endpoint ที่สร้างวิดีโอตามความต้องการ

10.1 ขอให้ Claude Code สร้าง Express server:

สร้างเซิร์ฟเวอร์ Express.js API พร้อม endpoints เหล่านี้:

POST /api/videos/generate
- รับ: template, props, format
- เรียกใช้การเรนเดอร์ Remotion Lambda
- คืนค่า: jobId, status

GET /api/videos/status/:jobId
- คืนค่าความคืบหน้าการเรนเดอร์และ URL สำหรับดาวน์โหลดเมื่อเสร็จสิ้น

รวมการจัดการข้อผิดพลาดที่เหมาะสมและการตรวจสอบ Zod

10.2 Claude Code สร้างเซิร์ฟเวอร์:

server/index.ts:

import express from 'express';
import { renderMediaOnLambda, getRenderProgress } from '@remotion/lambda/client';
import { z } from 'zod';

const app = express();
app.use(express.json());

const generateSchema = z.object({
  template: z.enum(['company-intro', 'product-demo']),
  props: z.record(z.unknown()),
  format: z.enum(['mp4', 'webm', 'gif']).default('mp4'),
});

app.post('/api/videos/generate', async (req, res) => {
  try {
    const { template, props, format } = generateSchema.parse(req.body);

    const { renderId, bucketName } = await renderMediaOnLambda({
      region: 'us-east-1',
      functionName: 'remotion-render',
      composition: template,
      serveUrl: process.env.REMOTION_SITE_URL!,
      codec: format === 'gif' ? 'gif' : 'h264',
      inputProps: props,
    });

    res.json({
      jobId: renderId,
      bucketName,
      status: 'processing',
    });
  } catch (error) {
    res.status(400).json({ error: (error as Error).message });
  }
});

app.get('/api/videos/status/:jobId', async (req, res) => {
  const { jobId } = req.params;
  const { bucketName } = req.query;

  const progress = await getRenderProgress({
    renderId: jobId,
    bucketName: bucketName as string,
    region: 'us-east-1',
    functionName: 'remotion-render',
  });

  res.json({
    status: progress.done ? 'completed' : 'processing',
    progress: progress.overallProgress,
    downloadUrl: progress.outputFile,
  });
});

app.listen(3001, () => {
  console.log('Video API running on http://localhost:3001');
});

10.3 ทดสอบ API ของคุณด้วย Apidog:

ใช้ Apidog เพื่อทดสอบ endpoints การสร้างวิดีโอของคุณ:

สร้างคำขอใหม่ ไปยัง POST /api/videos/generate
ตั้งค่าเนื้อหา:

{
  "template": "company-intro",
  "props": {
    "companyName": "TestCorp",
    "tagline": "Testing made easy"
  },
  "format": "mp4"
}

ส่งและยืนยัน ว่าการตอบกลับมี jobId
ตรวจสอบ endpoint สถานะ จนกว่า status: "completed"

คุณสมบัติการทดสอบอัตโนมัติของ Apidog ช่วยให้คุณตรวจสอบว่าไปป์ไลน์การสร้างวิดีโอของคุณทำงานได้อย่างน่าเชื่อถือ

ตัวอย่างที่สมบูรณ์: เครื่องมือสร้างวิดีโอการตลาด

นี่คือตัวอย่างเต็มรูปแบบที่คุณสามารถใช้เป็นเทมเพลตได้

พรอมต์สำหรับ Claude Code:

สร้างเครื่องมือสร้างวิดีโอการตลาดที่สมบูรณ์พร้อมคุณสมบัติเหล่านี้:

1. เทมเพลต: "social-promo"
   - ระยะเวลา: 15 วินาที (450 เฟรมที่ 30fps)
   - ความละเอียด: 1080x1080 (จัตุรัสสำหรับ Instagram)

2. ฉาก:
   - ข้อความ Hook (0-3 วินาที): ข้อความตัวหนาขนาดใหญ่ที่ดึงดูดความสนใจ
   - รูปภาพผลิตภัณฑ์ (3-9 วินาที): แสดงผลิตภัณฑ์พร้อมเอฟเฟกต์ Ken Burns
   - รายการคุณสมบัติ (9-12 วินาที): 3 จุดที่ปรากฏตามลำดับ
   - CTA (12-15 วินาที): "ซื้อเลย" พร้อมแอนิเมชันเต้นเป็นจังหวะ

3. Props:
   - hookText: string
   - productImageUrl: string
   - features: string[] (อาร์เรย์ของ 3 รายการ)
   - ctaText: string
   - brandColor: string

4. รวมการลดเสียงสำหรับเมื่อข้อความปรากฏ

สร้างไฟล์ทั้งหมดที่จำเป็นเพื่อให้สิ่งนี้ใช้งานได้

Claude Code จะสร้างเทมเพลตวิดีโอที่สมบูรณ์และพร้อมใช้งานจริงที่คุณสามารถปรับแต่งและเรนเดอร์ในขนาดใหญ่ได้

การแก้ไขปัญหาทั่วไป

ปัญหา: "ไม่พบโมดูล 'remotion'"

# วิธีแก้ไข: ติดตั้ง dependencies ใหม่
rm -rf node_modules
npm install

ปัญหา: ฟอนต์ไม่โหลด

// เพิ่มการนำเข้าฟอนต์ไปยังคอมโพเนนต์ของคุณ
import { loadFont } from '@remotion/google-fonts/Inter';

const { fontFamily } = loadFont();

// ใช้ในสไตล์
style={{ fontFamily }}

ปัญหา: วิดีโอเรนเดอร์เป็นสีดำ

ตรวจสอบว่าคอมโพเนนต์ของคุณส่งคืนเนื้อหาที่มองเห็นได้
ตรวจสอบว่า AbsoluteFill มีการตั้งค่าสีพื้นหลัง
ตรวจสอบให้แน่ใจว่าแอนิเมชันไม่ได้มีความทึบ 0 ทั้งหมด

ปัญหา: Claude Code ไม่รู้จัก Remotion skills

# ติดตั้ง skill ใหม่
npx skills add remotion-dev/skills

# ตรวจสอบว่ามี .claude/skills/remotion/SKILL.md อยู่หรือไม่
ls .claude/skills/remotion/

# รีสตาร์ท Claude Code

ปัญหา: ข้อผิดพลาดเวอร์ชันไม่ตรงกัน

# ตรวจสอบและอัปเดตเวอร์ชัน Remotion
npx remotion versions

# สิ่งนี้มักจะแก้ไขปัญหาความเข้ากันได้

กำลังสร้าง API การสร้างวิดีโออยู่ใช่ไหม? ลองใช้ Apidog ฟรี เพื่อออกแบบ ทดสอบ และจัดทำเอกสาร endpoints ของคุณ ตรวจสอบ schema ของคำขอ ทำสถานการณ์ทดสอบให้เป็นอัตโนมัติ และตรวจสอบให้แน่ใจว่าไปป์ไลน์วิดีโอของคุณจัดการกรณีขอบได้อย่างราบรื่น

ปุ่ม