Giới thiệu
Trong nhiều năm, việc tạo video thường gắn liền với các công cụ đồ họa như Adobe After Effects, Premiere Pro hay Final Cut. Những công cụ này rất mạnh, nhưng lại không thân thiện với lập trình viên, khó tự động hóa và gần như không thể mở rộng theo hướng “viết code để tạo video”.
Remotion ra đời để giải quyết chính vấn đề đó.
Remotion là một framework cho phép lập trình viên tạo video bằng React và JavaScript, biến việc dựng video thành một bài toán lập trình thuần túy. Thay vì kéo-thả timeline, bạn mô tả video bằng component React, sử dụng state, props, animation, dữ liệu động, và cuối cùng render ra file video thật (MP4, WebM…).
Bài blog này sẽ tập trung đúng vào 4 nội dung sau:
- Remotion là gì
- Cách cài đặt Remotion
- Trải nghiệm cài đặt và chạy Remotion trong môi trường thực tế
- Tạo một video mẫu đơn giản bằng Remotion
Remotion là gì?
1. Định nghĩa tổng quan
Remotion là một framework mã nguồn mở cho phép lập trình viên tạo video bằng React và JavaScript. Thay vì sử dụng các công cụ dựng video truyền thống dựa trên giao diện kéo-thả, Remotion cho phép mô tả toàn bộ nội dung video thông qua code.
Trong Remotion, một video không còn là một file media tĩnh, mà là một chương trình chạy theo từng khung hình (frame). Mỗi frame của video được render bằng React component, và mọi hiệu ứng, chuyển động, nội dung hiển thị đều được điều khiển bằng logic JavaScript.
Link: https://www.remotion.dev/docs/recorder/
Nói cách khác:
Remotion biến quá trình làm video thành quá trình viết ứng dụng React.
Remotion Recorder có phù hợp với bạn không?
Remotion Recorder là một công cụ tạo video dựa trên JavaScript đầu tiên thuộc loại này, nơi bạn có toàn quyền kiểm soát mã nguồn.
Kỹ năng cần thiết
Để tạo video với Recorder, bạn cần có khả năng:
- Clone một Git repository
- Chạy lệnh trong command line
- Mở dự án bằng trình chỉnh sửa code
Bạn càng là developer có kỹ năng cao, bạn càng có thể tùy biến Recorder theo nhu cầu của mình.
Có cần biết lập trình không?
Để tạo video theo phong cách mặc định, bạn không cần phải viết code.
Tuy nhiên, Recorder rất hấp dẫn với developer vì bạn có thể tùy chỉnh sâu bằng cách chỉnh sửa mã nguồn.
Công cụ này dành cho ai?
Recorder dành cho những người sáng tạo nội dung muốn toàn quyền kiểm soát quy trình làm video và thấy giá trị trong việc dùng code để tạo video.
Nó phù hợp nhất với những creator quay mặt và màn hình để làm nội dung kỹ thuật (screencast, khóa học lập trình, tutorial).
Hạn chế
Recorder không có bộ tính năng tương đương các phần mềm dựng video truyền thống.
2. Triết lý cốt lõi của Remotion
Triết lý trung tâm của Remotion là:
“Video nên được lập trình, không chỉ được chỉnh sửa thủ công.”
Trong các công cụ truyền thống như After Effects, timeline là trung tâm. Người dùng thao tác bằng chuột, keyframe, layer, và mọi thay đổi đều mang tính thủ công. Điều này gây khó khăn khi:
- Cần tạo hàng trăm hoặc hàng nghìn video
- Cần cá nhân hóa video theo dữ liệu
- Cần tự động hóa quy trình sản xuất
- Cần kiểm soát chính xác bằng logic
Remotion giải quyết những vấn đề này bằng cách đưa video vào thế giới lập trình, nơi mọi thứ đều có thể:
- Lặp (loop)
- Tái sử dụng (reuse)
- Tự động sinh (generate)
- Kiểm soát bằng toán học và dữ liệu
3. Cách Remotion định nghĩa một video
Trong Remotion, một video được mô tả bằng các khái niệm sau:
3.1 Frame (khung hình)
Video được chia thành các frame giống như phim truyền thống (ví dụ: 30 frame/giây). Remotion render từng frame một, và ở mỗi frame:
- Biến frame được cập nhật
- Component React được render lại
- Giao diện JSX tại frame đó được chuyển thành hình ảnh
Frame không chỉ là một con số, mà là đầu vào chính cho animation và logic.
Một số khung hình gồm:
A. Square 1:1 (Twitter / LinkedIn)
- Aspect ratio: 1:1
- Mute mặc định
- Captions burn-in
B. YouTube 16:9
- Aspect ratio: 16:9
- Audio bật mặc định
- Captions xuất
.srt - Endcard với video liên quan
C. TikTok / Shorts / Reels (9:16 – planned)
- Aspect ratio: 9:16
- Safe area dưới
- Word-by-word captions
3.2 Composition
Composition là khái niệm đại diện cho một video hoàn chỉnh.
Một composition bao gồm:
- Component React dùng để render nội dung
- Độ dài (số frame)
- FPS (frame per second)
- Kích thước video (width, height)
Mỗi composition tương đương với một video có thể render.
3.3 React Component là video
Trong Remotion:
- Không có timeline truyền thống
- Không có layer theo kiểu đồ họa
Thay vào đó:
- Mỗi React component chính là một phần của video
- JSX chính là “khung hình”
- CSS quyết định bố cục và style
- JavaScript điều khiển animation, thời gian và logic
Ví dụ:
Hiệu ứng fade-in không phải là kéo keyframe, mà là công thức:
opacity = f(frame)
Điều này giúp animation có tính xác định tuyệt đối và dễ kiểm soát.
4. Remotion khác gì so với công cụ dựng video truyền thống?
4.1 So với After Effects / Premiere
| Tiêu chí | Công cụ truyền thống | Remotion |
|---|---|---|
| Cách làm | Kéo-thả, timeline | Viết code |
| Tự động hóa | Rất hạn chế | Rất mạnh |
| Cá nhân hóa | Gần như không | Dựa trên dữ liệu |
| Tái sử dụng | Khó | Component |
| Quy mô lớn | Không phù hợp | Phù hợp |
Remotion không nhằm thay thế hoàn toàn After Effects, mà nhắm tới bài toán mà After Effects làm rất kém: automation và scale.
4.2 So với animation web thông thường
Remotion sử dụng React giống web app, nhưng khác ở chỗ:
- Web animation chạy trong trình duyệt
- Remotion render offline thành video
- Kết quả là file MP4/WebM, không phụ thuộc browser
Điều này cho phép dùng logic web để tạo sản phẩm media truyền thống.
5. Điểm mạnh cốt lõi của Remotion
5.1 Video được điều khiển hoàn toàn bằng code
Mọi thứ trong video đều có thể:
- Điều kiện hóa (if/else)
- Lặp (map, for)
- Tính toán bằng toán học
- Sinh ra từ API, JSON, database
Ví dụ:
- Mỗi user một video khác nhau
- Mỗi báo cáo một video tổng hợp khác nhau
- Mỗi ngày render video mới từ dữ liệu mới
5.2 Tận dụng toàn bộ hệ sinh thái React
Vì dùng React, Remotion kế thừa:
- Component hóa
- Hooks
- Context
- Thư viện animation, math, UI
Nếu bạn đã quen React, việc học Remotion gần như không có rào cản lớn.
5.3 Tính xác định và tái lập (deterministic)
Video tạo bằng Remotion:
- Cùng input → luôn cho ra cùng output
- Không phụ thuộc thao tác thủ công
- Dễ version control
- Dễ review code
Đây là lợi thế rất lớn trong môi trường engineering.
6. Remotion thường được dùng cho những bài toán nào?
Remotion đặc biệt phù hợp với các trường hợp:
- Video cá nhân hóa (personalized video)
- Video sinh từ dữ liệu (data-driven video)
- Video marketing tự động
- Video báo cáo, dashboard, analytics
- Video AI / generative content
- Video cần render số lượng lớn
Nó không phù hợp với:
- Motion design thủ công phức tạp
- Designer không biết code
- Dự án cần chỉnh tay liên tục
7. Cài đặt
Link: https://www.remotion.dev/docs/recorder/setup
7.1. Fork và clone dự án
Tạo (scaffold) một project Remotion Recorder mới:
Sử dụng Yarn làm package manager
yarn create video –recorder
7.2. Cài đặt Bun
Remotion Recorder yêu cầu Bun phiên bản tối thiểu 1.2.
Để cài đặt Bun, chạy lệnh sau:
curl -fsSL https://bun.sh/install | bash
7.3. Cài đặt dependencies
Sau khi cài Bun, chạy:
bun i
Lệnh này sẽ cài đặt tất cả các thư viện cần thiết cho project.
7.4. Cài đặt Whisper.cpp (tùy chọn)
Đây là bước nên làm nếu bạn muốn tạo phụ đề tự động (captioning).
Lệnh dưới sẽ cài Whisper.cpp và tải model (mặc định ~1.5GB):
bun sub.ts
7.5. Chạy Remotion Recorder
Sau khi setup xong, bạn có thể khởi động Recorder bằng:
bun run dev
8. Thực hành
Kết quả sẽ được video sau:
Vì bài quá dài nên tôi sẽ tách ra thành một bài khác: Link
Remotion link: https://www.remotion.dev/docs/recorder/is-it-for-me