Hướng Dẫn Biến Claude Code Thành Đạo Diễn Video Với Remotion

Remotion vừa ra mắt Agent Skills, và điều này thay đổi mọi thứ cho việc tạo video bằng AI.

npx skills add remotion-dev/skills

Chỉ vậy thôi. Một lệnh duy nhất, và Claude Code trở thành một chuyên gia tạo video hiểu rõ khung video dựa trên React của Remotion từ trong ra ngoài.

Remotion Agent Skills là gì?

Agent Skills là "sổ tay hướng dẫn" giúp các tác nhân AI như Claude Code biết cách sử dụng đúng các công cụ và framework cụ thể. Các kỹ năng Remotion chính thức cung cấp cho Claude kiến thức sâu rộng về:

Kiến trúc component của Remotion (<Composition>, <Sequence>, <AbsoluteFill>)
API hoạt ảnh (interpolate, spring, useCurrentFrame)
Các phương pháp hay nhất về thời gian, hiệu suất và render
Các mẫu phổ biến cho phần mở đầu, chuyển cảnh và hiệu ứng

Nếu không có các kỹ năng này, Claude có thể tạo ra mã Remotion lỗi hoặc không chính xác. Với các kỹ năng, nó sẽ viết các component video chất lượng sản xuất ngay từ lần thử đầu tiên.

💡

Bạn muốn xây dựng một API tạo video? Hướng dẫn này cũng đề cập đến việc tạo các endpoint REST để render video theo yêu cầu. Sử dụng Apidog để thiết kế, kiểm thử và tài liệu hóa các API tạo video của bạn với kiểm thử tự động và cộng tác thời gian thực.

nút

Những gì bạn sẽ xây dựng

Trong hướng dẫn này, bạn sẽ:

Cài đặt Remotion Agent Skills chỉ với một lệnh
Tạo một video mở đầu hoàn chỉnh bằng ngôn ngữ tự nhiên
Tinh chỉnh hoạt ảnh thông qua đối thoại
Render video của bạn ra MP4
Mở rộng quy mô với Remotion Lambda (tùy chọn)

Tóm tắt

# 1. Tạo một dự án Remotion
npx create-video@latest my-video && cd my-video

# 2. Cài đặt Agent Skills (bước quan trọng!)
npx skills add remotion-dev/skills

# 3. Khởi động Claude Code và mô tả video của bạn
claude

# 4. Render
npx remotion render <composition-name> out/video.mp4

Đó là toàn bộ quy trình làm việc. Agent Skills dạy Claude cách viết mã Remotion đúng cách, vì vậy bạn có thể tập trung vào việc mô tả những gì bạn muốn thay vì gỡ lỗi các component React.

Điều kiện tiên quyết

Trước khi bắt đầu, hãy đảm bảo bạn có:

Yêu cầu	Phiên bản	Lệnh kiểm tra
Node.js	18+	`node --version`
npm hoặc yarn	Mới nhất	`npm --version`
Claude Code	Mới nhất	`claude --version`
Trình soạn thảo mã	Nên dùng VS Code	-

Bạn cũng nên có:

Kiến thức cơ bản về dòng lệnh
Hiểu biết cơ bản về React (hữu ích nhưng không bắt buộc)

Bước 1: Cài đặt Remotion và Tạo Dự án của bạn

Đầu tiên, hãy tạo một dự án Remotion mới bằng CLI chính thức.

1.1 Mở terminal của bạn và chạy:

npx create-video@latest my-first-video

1.2 Khi được hỏi, hãy chọn các tùy chọn sau:

? What would you like to name your project? my-first-video
? Choose a template: blank
? Use TypeScript? Yes
? Install dependencies? Yes

1.3 Điều hướng đến dự án của bạn:

cd my-first-video

1.4 Xác minh cài đặt:

npm run dev

Thao tác này sẽ mở Remotion Studio trong trình duyệt của bạn tại http://localhost:3000. Bạn sẽ thấy một khung vẽ trống với dòng thời gian ở phía dưới.

Kết quả mong đợi: Một cửa sổ trình duyệt với giao diện Remotion Studio.

Bước 2: Cài đặt Remotion Agent Skills

Đây là nơi điều kỳ diệu xảy ra. Một lệnh duy nhất cung cấp cho Claude Code kiến thức chuyên sâu về Remotion.

2.1 Trong thư mục dự án của bạn, chạy:

npx skills add remotion-dev/skills

Khi bạn thấy Added skill: remotion hiển thị, quá trình cài đặt đã thành công.

2.2 Chuyện gì vừa xảy ra?

Lệnh này đã thêm một kỹ năng vào .claude/skills/remotion/ trong dự án của bạn. Thư mục này chứa SKILL.md—sổ tay hướng dẫn dạy Claude cách viết mã Remotion đúng cách.

2.3 Xác minh cài đặt:

Kiểm tra xem tệp kỹ năng có tồn tại không:

ls .claude/skills/remotion/

Kết quả mong đợi:

SKILL.md

2.4 Cấu trúc dự án của bạn hiện trông như sau:

my-first-video/
├── .claude/
│   └── skills/
│       └── remotion/
│           └── SKILL.md      # "Bộ não" dạy Claude Remotion
├── src/
│   ├── Root.tsx
│   ├── Composition.tsx
│   └── index.ts
├── public/
├── remotion.config.ts
├── package.json
└── tsconfig.json

Mẹo chuyên nghiệp: Nếu kỹ năng không được nhận diện, hãy chạy lại npx skills add remotion-dev/skills hoặc khởi động lại Claude Code.

Bước 3: Tạo Video Đầu tiên của bạn với Claude Code

Bây giờ, hãy sử dụng Claude Code để tạo một video hoàn chỉnh. Mở terminal của bạn trong thư mục dự án.

3.1 Khởi động Claude Code:

claude

3.2 Mô tả video của bạn:

Nhập lời nhắc này vào Claude Code:

Tạo một video giới thiệu dài 5 giây cho một công ty công nghệ có tên "DevFlow".

Yêu cầu:
- Độ phân giải: 1920x1080
- Tốc độ khung hình: 30fps
- Nền: Gradient tối từ #1a1a2e đến #16213e
- Trình tự hoạt ảnh:
  1. Văn bản logo "DevFlow" xuất hiện mờ dần từ độ mờ 0 đến 1 (khung 0-30)
  2. Logo phóng to nhẹ với hiệu ứng nảy (khung 15-45)
  3. Câu khẩu hiệu "Build faster. Ship smarter." xuất hiện mờ dần bên dưới (khung 45-90)
  4. Mọi thứ giữ nguyên cho các khung hình còn lại

Sử dụng kiểu chữ hiện đại, rõ ràng với họ phông chữ Inter.

3.3 Claude Code tạo ra các tệp:

Claude Code sẽ tạo hoặc sửa đổi các tệp này:

src/Root.tsx - Định nghĩa 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 - Component video chính:

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 Xem trước video của bạn:

Nếu Remotion Studio chưa chạy, hãy khởi động nó:

npm run dev

Chọn "devflow-intro" từ menu thả xuống composition. Sử dụng dòng thời gian để xem qua video và xem trước các hoạt ảnh.

Kết quả mong đợi: Video giới thiệu của bạn phát với hoạt ảnh logo và khẩu hiệu mờ dần.

Bước 4: Tinh chỉnh video của bạn với các lời nhắc tiếp theo

Sức mạnh của Claude Code là tinh chỉnh lặp đi lặp lại. Hãy cải thiện video của chúng ta.

4.1 Thêm hiệu ứng nền hạt và Thay đổi bảng màu

Thêm một hiệu ứng nền hạt chuyển động nhẹ nhàng với các chấm trắng nhỏ
trôi từ từ lên trên. Giữ nó tối thiểu - khoảng 20-30 hạt,
độ mờ rất thấp (0.1-0.2), và chuyển động chậm.
Thay đổi gradient sang chủ đề xanh-tím:
- Màu bắt đầu: #0f0c29
- Màu giữa: #302b63
- Màu kết thúc: #24243e
Tạo gradient 3 điểm dừng.

4.3 Thêm dấu hiệu hiệu ứng âm thanh (tùy chọn):

Thêm một bình luận đánh dấu nơi hiệu ứng âm thanh "whoosh" sẽ phát
khi logo nảy. Tôi sẽ thêm âm thanh sau.

Mỗi khi bạn đưa ra phản hồi, Claude Code sẽ sửa đổi mã liên quan và bạn có thể xem trước các thay đổi ngay lập tức trong Remotion Studio.

Bước 5: Thêm nội dung động với Props

Làm cho video của bạn có thể tái sử dụng bằng cách chấp nhận các props động. Điều này cho phép bạn tạo nhiều video với nội dung khác nhau.

5.1 Yêu cầu Claude Code thêm props:

Tái cấu trúc video để chấp nhận các props sau:
- companyName (chuỗi) - thay thế "DevFlow"
- tagline (chuỗi) - thay thế văn bản khẩu hiệu
- primaryColor (chuỗi) - màu gradient chính
- secondaryColor (chuỗi) - màu gradient phụ

Cũng thêm xác thực schema Zod cho an toàn kiểu dữ liệu.

5.2 Claude Code tạo schema:

src/DevFlowIntro.tsx (đã cập nhật):

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 sử dụng các props này
};

src/Root.tsx (đã cập nhật):

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 Kiểm tra với các props khác nhau trong Remotion Studio:

Trong Remotion Studio, nhấp vào bảng điều khiển Props và sửa đổi các giá trị:

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

Bản xem trước cập nhật theo thời gian thực.

Bước 6: Tạo Video Đa Cảnh

Hãy xây dựng một video phức tạp hơn với nhiều cảnh.

6.1 Lời nhắc Claude Code:

Tạo một video demo sản phẩm dài 30 giây với các cảnh sau:

Cảnh 1 (0-5 giây): Hoạt ảnh mở đầu logo
Cảnh 2 (5-12 giây): Trưng bày tính năng với 3 biểu tượng xuất hiện từng cái một
  - Biểu tượng 1: Tên lửa (Tốc độ)
  - Biểu tượng 2: Khiên (Bảo mật)
  - Biểu tượng 3: Biểu đồ (Phân tích)
  Mỗi biểu tượng nên trượt vào từ bên trái với hiệu ứng mờ dần

Cảnh 3 (12-22 giây): Bản mô phỏng bảng điều khiển sản phẩm
  - Hiển thị bản mô phỏng UI đơn giản
  - Làm nổi bật các phần khác nhau theo trình tự

Cảnh 4 (22-30 giây): Kêu gọi hành động
  - "Bắt đầu dùng thử miễn phí"
  - URL trang web xuất hiện mờ dần

Sử dụng component <Sequence> để sắp xếp các cảnh.
Tổng thời lượng: 900 khung hình ở 30fps.

6.2 Claude Code tạo cấu trúc cảnh:

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' }}>
      {/* Cảnh 1: Giới thiệu Logo (khung 0-150) */}
      <Sequence from={0} durationInFrames={150}>
        <LogoIntro />
      </Sequence>

      {/* Cảnh 2: Trưng bày tính năng (khung 150-360) */}
      <Sequence from={150} durationInFrames={210}>
        <FeatureShowcase />
      </Sequence>

      {/* Cảnh 3: Bản mô phỏng bảng điều khiển (khung 360-660) */}
      <Sequence from={360} durationInFrames={300}>
        <DashboardMockup />
      </Sequence>

      {/* Cảnh 4: Kêu gọi hành động (khung 660-900) */}
      <Sequence from={660} durationInFrames={240}>
        <CallToAction />
      </Sequence>
    </AbsoluteFill>
  );
};

6.3 Claude Code tạo các component cảnh riêng lẻ:

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>
  );
};

Bước 7: Thêm Âm thanh vào Video của bạn

7.1 Thêm bản nhạc nền:

Đặt tệp âm thanh của bạn vào thư mục public:

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

7.2 Yêu cầu Claude Code tích hợp âm thanh:

Thêm nhạc nền từ public/audio/background-music.mp3
- Mở dần trong 30 khung hình đầu tiên
- Tắt dần trong 30 khung hình cuối cùng
- Đặt âm lượng thành 0.5

7.3 Claude Code thêm component Audio:

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

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

  // Mở/tắt dần âm thanh
  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} />
      {/* ... các cảnh còn lại */}
    </AbsoluteFill>
  );
};

Bước 8: Render Video của bạn

Bây giờ, hãy xuất video của bạn ra một tệp.

8.1 Render từ dòng lệnh:

# Render ra MP4 (được khuyến nghị cho hầu hết các trường hợp sử dụng)
npx remotion render company-intro out/company-intro.mp4

# Render với các props tùy chỉnh
npx remotion render company-intro out/apidog-intro.mp4 \
  --props='{"companyName":"Apidog","tagline":"Design. Debug. Test. Document."}'

8.2 Tùy chọn Render:

# Chất lượng cao (chậm hơn)
npx remotion render company-intro out/video.mp4 --crf=18

# Chất lượng thấp hơn (nhanh hơn, tệp nhỏ hơn)
npx remotion render company-intro out/video.mp4 --crf=28

# Render dưới dạng GIF
npx remotion render company-intro out/video.gif --codec=gif

# Render dưới dạng WebM
npx remotion render company-intro out/video.webm --codec=vp8

# Render phạm vi khung hình cụ thể
npx remotion render company-intro out/preview.mp4 --frames=0-90

8.3 Tiến độ Render:

Bạn sẽ thấy đầu ra như sau:

ℹ Đang render khung hình 0-150
████████████████████████████████████████ 100% | 150/150 khung hình
✓ Đã render 150 khung hình trong 12.3 giây (12.2 fps)
✓ Đã mã hóa video trong 3.2 giây
✓ Video đã lưu vào out/company-intro.mp4

Kết quả mong đợi: Một tệp video đã được render trong thư mục out/ của bạn.

Bước 9: Mở rộng quy mô với Remotion Lambda (Tùy chọn)

Để render video ở quy mô lớn (hàng trăm hoặc hàng nghìn), hãy sử dụng Remotion Lambda.

9.1 Cài đặt các phần phụ thuộc Lambda:

npm install @remotion/lambda

9.2 Cấu hình thông tin xác thực AWS:

# Thiết lập thông tin xác thực AWS
aws configure

# Tạo vai trò Remotion Lambda
npx remotion lambda policies role

9.3 Triển khai hàm Lambda của bạn:

# Triển khai hàm render
npx remotion lambda functions deploy

# Triển khai trang web video của bạn
npx remotion lambda sites create src/index.ts --site-name=my-videos

9.4 Render qua 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 Render có lập trình:

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('URL Video:', result.url);

Bước 10: Xây dựng API tạo Video

Tạo một endpoint API để tạo video theo yêu cầu.

10.1 Yêu cầu Claude Code tạo một máy chủ Express:

Tạo một máy chủ API Express.js với các endpoint sau:

POST /api/videos/generate
- Chấp nhận: template, props, format
- Kích hoạt một tiến trình render Remotion Lambda
- Trả về: jobId, status

GET /api/videos/status/:jobId
- Trả về tiến độ render và URL tải xuống khi hoàn tất

Bao gồm xử lý lỗi thích hợp và xác thực Zod.

10.2 Claude Code tạo máy chủ:

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 đang chạy trên http://localhost:3001');
});

10.3 Kiểm thử API của bạn với Apidog:

Sử dụng Apidog để kiểm thử các endpoint tạo video của bạn:

Tạo một yêu cầu mới đến POST /api/videos/generate
Đặt nội dung:

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

Gửi và xác minh phản hồi chứa một jobId
Gửi yêu cầu đến endpoint trạng thái cho đến khi status: "completed"

Các tính năng kiểm thử tự động của Apidog giúp bạn xác thực quy trình tạo video của mình hoạt động đáng tin cậy.

Ví dụ Hoàn chỉnh: Trình tạo Video Marketing

Đây là một ví dụ đầy đủ bạn có thể sử dụng làm mẫu.

Lời nhắc cho Claude Code:

Tạo một trình tạo video marketing hoàn chỉnh với các tính năng sau:

1. Mẫu: "social-promo"
   - Thời lượng: 15 giây (450 khung hình ở 30fps)
   - Độ phân giải: 1080x1080 (hình vuông Instagram)

2. Cảnh:
   - Văn bản thu hút (0-3 giây): Văn bản to, đậm gây chú ý
   - Hình ảnh sản phẩm (3-9 giây): Hiển thị sản phẩm với hiệu ứng Ken Burns
   - Danh sách tính năng (9-12 giây): 3 gạch đầu dòng xuất hiện tuần tự
   - CTA (12-15 giây): "Mua ngay" với hoạt ảnh nhấp nháy

3. Props:
   - hookText: string
   - productImageUrl: string
   - features: string[] (mảng 3 mục)
   - ctaText: string
   - brandColor: string

4. Bao gồm hiệu ứng giảm âm lượng khi văn bản xuất hiện

Tạo tất cả các tệp cần thiết để điều này hoạt động.

Claude Code sẽ tạo một mẫu video hoàn chỉnh, sẵn sàng sản xuất mà bạn có thể tùy chỉnh và render ở quy mô lớn.

Khắc phục sự cố thường gặp

Sự cố: "Không tìm thấy module 'remotion'"

# Giải pháp: Cài đặt lại các phần phụ thuộc
rm -rf node_modules
npm install

Sự cố: Không tải được phông chữ

// Thêm import phông chữ vào component của bạn
import { loadFont } from '@remotion/google-fonts/Inter';

const { fontFamily } = loadFont();

// Sử dụng trong kiểu dáng
style={{ fontFamily }}

Sự cố: Video render ra màu đen

Kiểm tra xem các component của bạn có trả về nội dung hiển thị không
Xác minh AbsoluteFill có cài đặt màu nền không
Đảm bảo các hoạt ảnh không đều ở độ mờ 0

Sự cố: Claude Code không nhận diện được các kỹ năng Remotion

# Cài đặt lại kỹ năng
npx skills add remotion-dev/skills

# Kiểm tra xem .claude/skills/remotion/SKILL.md có tồn tại không
ls .claude/skills/remotion/

# Khởi động lại Claude Code

Sự cố: Lỗi không khớp phiên bản

# Kiểm tra và cập nhật phiên bản Remotion
npx remotion versions

# Điều này thường khắc phục các vấn đề tương thích

Bạn đang xây dựng các API tạo video? Hãy dùng thử Apidog miễn phí để thiết kế, kiểm thử và tài liệu hóa các endpoint của bạn. Xác thực schema yêu cầu, tự động hóa các kịch bản kiểm thử và đảm bảo quy trình video của bạn xử lý các trường hợp biên một cách trơn tru.

nút