Cara Buat Video dengan AI

Ringkasan: Mau bikin video tanpa menyewa editor? Sekarang ada jalannya lewat AI. LLM seperti Claude Opus bisa menulis kode video sungguhan, bukan cuma deskripsi adegan. Kuncinya ada di Remotion, React framework untuk video, ditambah MCP server supaya agent membaca dokumentasi API yang asli. Hasil akhirnya MP4 yang benar-benar ter-render.

• Bukan sekadar prompt – LLM menulis kode video sungguhan, bukan deskripsi adegan
• Remotion – React framework untuk video, tersedia varian client-side dan server-side
• WebCodecs + Mediabunny – encoder berjalan di browser, bukan FFmpeg
• MCP server – agent mengambil dokumentasi API asli, tidak mengandalkan ingatan model
• Spec tertulis – yang menentukan kualitas hasil bukan modelnya, melainkan brief Anda
• Ada jalur gratis – belasan generator teks-ke-video, sebagian tanpa pendaftaran
• Belum selesai setelah render – voiceover, cutting, dan musik masih dikerjakan manual

Apa Ini

Yang menentukan kualitas bukan AI-nya, melainkan spec tertulis yang Anda siapkan sendiri. Kalau spec-nya longgar, agent justru lebih sering mengarang hal yang tidak ada. Artikel ini menunjukkan alur yang presisi, sekaligus jalur ringan buat Anda yang cuma mau menguji ide hari ini.

Remotion adalah React framework untuk membuat video. Komponennya ditulis seperti komponen web biasa, lalu di-render jadi video. Varian client-side berjalan di browser tanpa server, memakai WebCodecs lewat Mediabunny sebagai encoder. Varian server-side berjalan di Node.js atau Lambda dan memakai FFmpeg.

Claude Opus menulis komponen Remotion yang bisa di-render, bukan sekadar deskripsi adegan.

Dua belas generator gratis memang menggoda, tapi ingat bahwa yang Anda punya di sana hanyalah prompt. Kalau butuh presisi, kontrol penuh, dan hasil yang bisa diulang, jalur berbasis kode tetap yang paling masuk akal.

Cara Kerja

Ada empat pendekatan yang perlu Anda bedakan sebelum memilih:

Keempatnya berbeda jauh, jadi jangan disamakan. Remotion client-side paling ringan karena tidak membutuhkan bundling step; ia menerima components beserta video config secara langsung. Ini pilihan pertama untuk prototipe. Varian server-side mendukung semua HTML dan CSS, tetapi butuh Node dan infrastruktur, jadi siapkan baru ketika durasi render sudah panjang.

Yang perlu diingat, tag dan CSS yang didukung versi client-side baru subset. Ada sebagian elemen yang memang tidak akan ter-render, dan itu harus Anda cek sebelum menulis komponen.

import {renderMediaOnWeb} from '@remotion/web-renderer';

const {getBlob} = await renderMediaOnWeb({
  composition: {
    component: Component,
    durationInFrames: 100,
    fps: 30,
    width: 1920,
    height: 1080,
    id: 'my-composition',
  },
});

const blob = await getBlob();

Contoh di atas diadaptasi dari dokumentasi resmi renderMediaOnWeb(). Perhatikan bahwa inputProps dan calculateMetadata adalah opsi tersendiri, bukan bagian dari objek composition.

Kapan Dipakai

Lima kasus penggunaan yang paling masuk akal untuk dicoba lebih dulu:

Untuk pengumuman massal, satu agent bisa memproses pengumuman sepekan lalu mengubah masing-masingnya jadi headline, code snippet, dan subtitle props. Setelah itu agent me-render versi landscape dan vertical sekaligus, sehingga Anda tidak perlu mengedit video satu per satu. Ini paling hemat waktu kalau Anda rutin menerbitkan pengumuman mingguan.

Untuk clip demo kode, Remotion menghasilkan animasi spring, entrance blur, dan timing zoom yang bisa disetel presisi di dalam komponen React. Bagian inilah yang paling sulit dibuat rapi secara manual. Pastikan Anda menuliskan durasi dan posisi setiap elemen di spec, jangan mengandalkannya ke prompt saja.

CE.SDK dipakai untuk product shot komposabel. Teks dinamis bisa diganti dari variabel yang diambil dari database, jadi satu template bisa melayani banyak pelanggan sekaligus. Untuk eksplorasi konsep, cukup buat draf klip 5 detik di beberapa generator sekaligus, misalnya Hunyuan, Vidu, Grok, Qwen, dan Meta. Kalau idenya terbukti bagus, barulah pindah ke pipeline berbasis kode. Jangan berkomitmen ke pipeline mahal sebelum idenya benar-benar diuji.

Cara Mulai

Enam langkah supaya alurnya tidak meleset sejak awal:

1. Siapkan spec tertulis, bukan sekadar prompt
2. Beri konteks dokumentasi ke agent
3. Arahkan ke MCP server supaya spesifikasinya asli
4. Preview di Remotion Studio
5. Export dengan renderMediaOnWeb()
6. Poles akhir secara manual di CapCut

Langkah pertama adalah menyiapkan spec tertulis, karena inilah pembeda antara output yang bisa dipakai dan output yang mengawang. Berikan konteks dokumentasinya ke agent dengan perintah seperti menulis React component di Remotion untuk video 5 detik dengan teks memantul di tengah layar.

Langkah kedua, Anda bisa membiarkan agent mengembalikan kode native, atau mengarahkannya ke Remotion MCP server supaya ia mengambil dokumentasi API yang asli. Inilah gunanya MCP server, yaitu spesifikasi yang benar-benar ada dan bisa diverifikasi. Jangan mengandalkan ingatan model soal API terbaru, karena di sinilah yang paling sering gagal.

Langkah ketiga, preview hasilnya di Remotion Studio lewat tombol Render in browser. Anda bisa melihat hasil sebelum ekspor, jadi hemat waktu. Langkah keempat, export dengan renderMediaOnWeb() dan MP4 langsung masuk ke folder download Anda.

Video hasil render renderMediaOnWeb() di browser, siap diunduh sebagai MP4.

Metode tanpa framework

Kalau ingin lebih cepat, ada metode yang tidak butuh framework sama sekali. Minta LLM menulis satu file HTML lengkap dengan HTML5 Canvas, lalu animasikan lingkaran dari kiri ke kanan selama 3 detik. Sertakan tombol Record Video yang menangkap canvas lewat canvas.captureStream() lalu mengunduh .webm, dan jalankan di browser sebagai index.html dengan elemen canvas beserta MediaRecorder.

Kelebihan dan Kekurangan

Kelebihan

• Video dihasilkan dari kode, jadi bisa diulang dan dikontrol penuh
• Versi client-side tidak butuh server maupun bundling step
• MCP server menjaga spesifikasi API tetap sesuai dokumentasi asli
• Satu template bisa menurunkan banyak variasi lewat input props
• Ada jalur gratis untuk menguji ide tanpa biaya
• Render landscape dan vertical bisa dijalankan sekaligus

Kekurangan

• Client-side hanya mendukung subset elemen HTML dan properti CSS
• Encoding berjalan iteratif sehingga ekspor panjang terasa lambat
• Hasil render belum final; masih perlu polesan di NLE
• Metadata batas free tier masih abu-abu dan tidak seragam
• CE.SDK memerlukan license key, sedangkan harga Remotion tidak disebut sumber
• Integrasi masih berada di permukaan yang eksperimental

Yang Perlu Diwaspadai

Tujuh hal yang perlu diwaspadai sebelum dipakai serius:

Hugging Face Spaces bahkan sering melempar error alokasi GPU, dan solusi berupa VPN plus mode incognito menandakan layanan gratis itu tidak dirancang untuk beban produksi. Mendorong sebuah transition agar pas di satu kata jauh lebih cepat dikerjakan di NLE ketimbang di spec.

Kesimpulannya, AI bukan sihir. Selisih antara hasil yang bisa dipakai dan yang berantakan bermula dari waktu yang Anda luangkan untuk menulis spec, style guide, dan component registry.

Tautan Proyek

• Dokumentasi @remotion/web-renderer – API renderMediaOnWeb() dan opsi komposisinya
• Panduan client-side rendering – dukungan browser, WebCodecs, dan daftar batasannya
• Remotion MCP server – dokumentasi server MCP untuk agent
• IMG.LY Creative SDK – editor dan template untuk kebutuhan komposisi lanjutan

Artikel Terkait

• Cara Mulai Pakai Jev, LLM yang Jago Ambil Keputusan