Di Adstacker, iklan video adalah kombinasi klip, pengaturan waktu subtitle, lapisan teks, gaya, animasi, rasio aspek, dan ajakan bertindak (calls to action). Kreator perlu melihat pilihan tersebut dengan segera—dan hasil ekspor akhir harus sesuai.
Itulah sebabnya kami menggunakan Remotion. Komposisinya yang berbasis React mendukung pratinjau yang dapat diedit dan menyediakan aturan visual yang sama untuk video yang dirender. Kami mendefinisikan materi kreatif sekali dan menjaga kedua pengalaman tetap selaras.
Tantangan: pratinjau dan ekspor sering kali tidak sinkron
Alat kreatif umumnya menghadapi masalah yang menjengkelkan: pratinjau editor terlihat benar, tetapi file yang diekspor tidak. Posisi teks mungkin bergeser, font mungkin membungkus secara berbeda, keterangan mungkin muncul pada saat yang salah, atau urutan klip mungkin diputar secara berbeda setelah ekspor.
Masalahnya bertambah ketika pengguna mencampur segmen, memilih gaya subtitle, menambahkan teks hook/body/CTA, dan mengubah rasio aspek keluaran. Jika setiap permukaan menafsirkan pengaturan ini secara independen, perbedaan kecil akan menumpuk.
Adstacker membutuhkan pratinjau instan dan rendering yang dapat diskalakan. Komposisinya harus fleksibel untuk pengeditan dan dapat diprediksi dalam produksi.
Satu komposisi bersama untuk pratinjau dan rendering
Blok bangunan utama kami adalah VideoTemplate Remotion bersama. Ini menerima:
- Satu video atau urutan segmen video
- Total durasi dan frame rate
- Ukuran kanvas target untuk rasio aspek yang dipilih
- Teks berwaktu, CTA, dan lapisan subtitle
- Pengaturan gaya dan animasi untuk setiap lapisan
Series Remotion merangkai segmen menjadi satu timeline. Sequence menempatkan lapisan teks dan subtitle pada frame tertentu. Oleh karena itu, sebuah variasi adalah data, bukan file yang diedit sekali pakai.
Arsitektur
Frontend dan jalur rendering berbagi template, font, peta gaya subtitle, dan jenis lapisan. Sebuah gaya berarti hal yang sama di browser dan di iklan yang sudah jadi.
Pratinjau langsung dengan Remotion Player
Remotion Player menyediakan kanvas pratinjau interaktif. Ketika seorang kreator mengubah hook, body, CTA, gaya subtitle, atau rasio aspek, kami meneruskan props yang diperbarui ke template alih-alih membangun file baru.
Pratinjau menggunakan komposisi yang sebenarnya, bukan perkiraan statis. Ini menampilkan klip berurutan, subtitle berwaktu, teks animasi, dan dimensi kanvas yang dipilih secara bersamaan, dengan kontrol pemutaran yang sudah dikenal.
Untuk pengeditan teks, pratinjau sementara menyembunyikan lapisan komposisi aktif saat editor di kanvas menangani interaksi. Posisi yang disimpan kemudian mengalir kembali ke lapisan Remotion tersebut—tanpa membuat model visual terpisah.
Lapisan dinamis, diatur berdasarkan frame
Remotion memberi kita timeline berbasis frame, sehingga setiap lapisan memiliki frame awal dan durasi daripada perkiraan visual yang tidak tepat.
Kata-kata subtitle berwaktu dikelompokkan menjadi potongan-potongan pendek dan dikonversi menjadi frame sebelum mencapai komposisi. Setiap hook, body, atau CTA juga memiliki jendela waktu, gaya, animasi, dan posisi yang ditentukan. Template hanya merender lapisan untuk frame saat ini.
Ini membuat variasi baru menjadi perubahan data: Adstacker menyediakan spesifikasi lapisan yang berbeda ke komponen yang sama - jenis pendekatan berbasis template yang dapat disusun yang diterapkan tim rekayasa teknologi video kami di seluruh pipeline media klien.
Merancang untuk output yang dirender dengan setia
Pratinjau browser dan render worker tidak mendekode video dengan cara yang persis sama. Template kami memeriksa apakah ia dalam mode rendering: di browser, ia menggunakan komponen Video Remotion sehingga Player dapat memutar audio sumber; saat rendering, ia menggunakan OffthreadVideo, yang lebih cocok untuk ekstraksi frame sisi server yang andal.
Kami juga berbagi font dan peta gaya antara kedua konteks. Ini menjaga konsistensi pembungkus subtitle, ukuran teks, dan perilaku animasi. Kanvas rasio aspek dan overlay yang dijepit mencegah lapisan menghilang di luar tepi.
Contoh dunia nyata: menguji hook yang unggul tanpa membangun ulang setiap iklan
Bayangkan sebuah merek dengan satu demonstrasi produk dan dua ajakan bertindak yang menguji tiga hook pembuka dan dua gaya subtitle. Kreator dapat melihat pratinjau kombinasi, termasuk urutannya, keterangan, dan teks animasi, dalam rasio akhir.
Jika tim mengubah salinan hook atau memindahkan CTA, itu memperbarui data lapisan. Tidak ada desain pratinjau terpisah untuk dibuat ulang; pipeline rendering menggunakan aturan template yang sama untuk ekspor.
Pemasar dapat menguji lebih banyak ide sambil mengontrol detail yang membuat video terasa sempurna.
Bangun, pratinjau, dan render dengan percaya diri
Remotion membantu Adstacker memperlakukan iklan video sebagai komposisi dinamis yang dapat digunakan kembali. Template yang sama mendukung eksplorasi browser dan output yang dapat diprediksi, sementara lapisan yang peka frame menjaga subtitle, teks, dan klip tetap sinkron.
Buat set hook, caption, dan CTA Anda berikutnya di Adstacker, pratinjau kombinasinya saat Anda membangun, dan ekspor variasi yang siap diuji.
Kami telah menerapkan disiplin 'pratinjau-sesuai-ekspor' yang sama ini pada pembangunan AI video platform lainnya, termasuk alat pengeditan bentuk pendek Ssemble dan pipeline generasi berbasis AI VideoCap, keduanya diskalakan pada infrastruktur render yang dikelola melalui cloud infrastructure services kami.
Tumpukan Teknologi: React · Next.js · Remotion · @remotion/player · AWS ECS render workers · FFmpeg
Baca lebih lanjut dari tim kami
1. Layanan Ekspor vs. Pipeline Editor Video
