Di Adstacker, iklan video ialah gabungan klip, penetapan masa sari kata, lapisan teks, gaya, animasi, nisbah aspek, dan seruan tindakan. Pencipta perlu melihat pilihan tersebut dengan serta-merta—dan eksport yang telah siap mesti sepadan.
Itulah sebabnya kami menggunakan Remotion. Komposisi berasaskan React-nya menggerakkan pratonton yang boleh diedit dan menyediakan peraturan visual yang sama untuk video yang dirender. Kami mentakrifkan kreatif itu sekali dan memastikan kedua-dua pengalaman itu selaras.
Cabaran: pratonton dan eksport selalunya berbeza
Alat kreatif lazimnya menghadapi masalah yang mengecewakan: pratonton editor kelihatan betul, tetapi fail yang dieksport tidak. Kedudukan teks mungkin beralih, fon mungkin melingkar secara berbeza, kapsyen mungkin muncul pada masa yang salah, atau urutan klip mungkin dimainkan secara berbeza selepas eksport.
Masalah menjadi lebih besar apabila pengguna mencampur segmen, memilih gaya sari kata, menambah teks hook/body/CTA, dan mengubah nisbah aspek output. Jika setiap permukaan menafsirkan tetapan ini secara bebas, perbezaan kecil akan terkumpul.
Adstacker memerlukan pratonton segera dan rendering berskala. Komposisi mesti fleksibel untuk pengeditan dan boleh diramal dalam pengeluaran.
Satu komposisi kongsi untuk pratonton dan rendering
Blok binaan utama kami ialah Remotion VideoTemplate kongsi. Ia menerima:
- Satu video atau urutan segmen video
- Jumlah durasi dan kadar bingkai
- Saiz kanvas sasaran untuk nisbah aspek yang dipilih
- Lapisan teks bermasa, CTA, dan sari kata
- Tetapan gaya dan animasi untuk setiap lapisan
Series Remotion menyambungkan segmen ke dalam satu garis masa. Sequence menempatkan lapisan teks dan sari kata pada bingkai tertentu. Oleh itu, variasi adalah data, bukan fail yang diedit sekali sahaja.
Seni Bina
Frontend dan laluan rendering berkongsi templat, fon, peta gaya sari kata, dan jenis lapisan. Sesuatu gaya bermaksud perkara yang sama dalam pelayar dan dalam iklan yang telah siap.
Pratonton langsung dengan Remotion Player
Remotion Player menyediakan kanvas pratonton interaktif. Apabila pencipta mengubah hook, body, CTA, gaya sari kata, atau nisbah aspek, kami menghantar props yang dikemas kini kepada templat dan bukannya membina fail baharu.
Pratonton menggunakan komposisi sebenar, bukan anggaran statik. Ia menunjukkan klip berurutan, sari kata bermasa, teks beranimasi, dan dimensi kanvas terpilih secara bersama, dengan kawalan main balik yang biasa.
Untuk pengeditan teks, pratonton menyembunyikan sementara lapisan komposisi aktif sementara editor pada kanvas mengendalikan interaksi. Kedudukan yang disimpan kemudiannya mengalir kembali ke lapisan Remotion itu—tanpa mencipta model visual yang berasingan.
Lapisan dinamik, diselaraskan mengikut bingkai
Remotion memberi kami garis masa berasaskan bingkai, jadi setiap lapisan mempunyai bingkai mula dan durasi dan bukannya tekaan visual yang tidak tepat.
Perkataan sari kata bermasa dikumpulkan menjadi cebisan pendek dan ditukar kepada bingkai sebelum mencapai komposisi. Setiap hook, body, atau CTA juga mempunyai tetingkap masa, gaya, animasi, dan kedudukan yang ditetapkan. Templat hanya merender lapisan untuk bingkai semasa.
Ini menjadikan variasi baharu sebagai perubahan data: Adstacker membekalkan spesifikasi lapisan yang berbeza kepada komponen yang sama - pendekatan boleh digabungkan dan dipacu templat yang diterapkan oleh pasukan kejuruteraan teknologi video kami merentasi saluran media pelanggan.
Mereka bentuk untuk output render yang setia
Pratonton pelayar dan pekerja render tidak menyahkod video dengan cara yang sama persis. Templat kami menyemak sama ada ia dalam mod rendering: dalam pelayar, ia menggunakan komponen Video Remotion supaya Player dapat memainkan audio sumber; apabila merender, ia menggunakan OffthreadVideo, yang lebih sesuai untuk pengekstrak bingkai sisi pelayan yang boleh dipercayai.
Kami juga berkongsi fon dan peta gaya antara kedua-dua konteks. Ini mengekalkan pembalutan sari kata, saiz teks, dan tingkah laku animasi yang konsisten. Kanvas nisbah aspek dan tindanan terkunci menghalang lapisan daripada hilang di luar tepi.
Contoh dunia nyata: menguji hook yang berjaya tanpa membina semula setiap iklan
Bayangkan sebuah jenama dengan satu demonstrasi produk dan dua seruan tindakan yang menguji tiga hook pembukaan dan dua gaya sari kata. Pencipta boleh melihat pratonton kombinasi, termasuk urutan, kapsyen, dan teks beranimasi, dalam nisbah akhir.
Jika pasukan mengubah salinan hook atau memindahkan CTA, ia mengemas kini data lapisan. Tiada reka bentuk pratonton berasingan untuk dicipta semula; saluran paip rendering menggunakan peraturan templat yang sama untuk eksport.
Pemasar boleh menguji lebih banyak idea sambil mengawal butiran yang menjadikan video kelihatan kemas.
Bina, pratonton, dan render dengan yakin
Remotion membantu Adstacker menganggap iklan video sebagai komposisi dinamik yang boleh diguna semula. Templat yang sama menyokong penerokaan pelayar dan output yang boleh diramal, sementara lapisan yang peka bingkai memastikan sari kata, teks, dan klip kekal selari.
Cipta set hook, kapsyen, dan CTA anda yang seterusnya di Adstacker, pratonton kombinasi semasa anda membina, dan eksport variasi yang sedia untuk diuji.
Kami telah menerapkan disiplin pratonton-sepadan-eksport yang sama ini pada pembinaan platform video AI yang lain, termasuk alat penyuntingan bentuk pendek Ssemble dan saluran paip penjanaan pacuan AI VideoCap, kedua-duanya diskala pada infrastruktur render yang diuruskan melalui perkhidmatan infrastruktur awan kami.
Timbunan teknologi: React · Next.js · Remotion · @remotion/player · AWS ECS render workers · FFmpeg
Baca lebih lanjut daripada pasukan kami
1. Perkhidmatan Eksport lwn. Saluran Paip Editor Video
3. Mengoptimumkan Logo Saluran untuk Resolusi Video yang Berbeza
