Adstacker'da bir video reklamı, kliplerin, altyazı zamanlamasının, metin katmanlarının, stillerin, animasyonların, en boy oranlarının ve harekete geçirici mesajların birleşimidir. İçerik oluşturucuların bu seçimleri anında görmesi gerekir ve bitmiş dışa aktarım eşleşmelidir.
İşte bu yüzden Remotion'ı kullanıyoruz. React tabanlı kompozisyonu düzenlenebilir önizlemelere güç verir ve oluşturulan video için aynı görsel kuralları sağlar. İçeriği bir kez tanımlıyor ve iki deneyimi uyumlu tutuyoruz.
Zorluk: Önizleme ve dışa aktarma genellikle birbirinden ayrılıyor
Yaratıcı araçlar genellikle sinir bozucu bir sorunla karşılaşır: düzenleyici önizlemesi doğru görünür, ancak dışa aktarılan dosya doğru olmaz. Bir metin konumu kayabilir, bir yazı tipi farklı sarabilir, altyazılar yanlış zamanda görünebilir veya bir klip dizisi dışa aktarımdan sonra farklı oynayabilir.
Kullanıcılar segmentleri karıştırdığında, altyazı stillerini seçtiğinde, hook/body/CTA metni eklediğinde ve çıktı en boy oranını değiştirdiğinde sorun büyür. Her yüzey bu ayarları bağımsız olarak yorumlarsa, küçük farklılıklar birikir.
Adstacker, anında önizlemelere ve ölçeklenebilir oluşturmaya ihtiyaç duyar. Kompozisyon, düzenleme için esnek ve üretimde öngörülebilir olmalıdır.
Önizleme ve oluşturma için tek bir paylaşılan kompozisyon
Merkezi yapı taşımız, paylaşılan bir Remotion VideoTemplate'idir. Şunları kabul eder:
- Tek bir video veya bir video segmentleri dizisi
- Toplam süre ve kare hızı
- Seçilen en boy oranı için bir hedef tuval boyutu
- Zaman ayarlı metin, CTA ve altyazı katmanları
- Her katman için stil ve animasyon ayarları
Remotion'ın Series'ı segmentleri tek bir zaman çizelgesine bağlar. Sequence metin ve altyazı katmanlarını belirli karelere yerleştirir. Bu nedenle bir varyasyon, bir kerelik düzenlenmiş bir dosya değil, veridir.
Mimari
Ön uç ve oluşturma yolu şablonu, yazı tiplerini, altyazı stili haritasını ve katman türlerini paylaşır. Bir stil, tarayıcıda ve bitmiş bir reklamda aynı anlama gelir.
Remotion Player ile canlı önizlemeler
Remotion Player, etkileşimli önizleme tuvalini sağlar. Bir içerik oluşturucu bir hook, body, CTA, altyazı stili veya en boy oranını değiştirdiğinde, yeni bir dosya oluşturmak yerine şablona güncellenmiş props'ları iletiyoruz.
Önizleme, statik bir yaklaşım değil, gerçek kompozisyonu kullanır. Ardışık klipleri, zaman ayarlı altyazıları, animasyonlu metni ve seçilen tuval boyutlarını tanıdık oynatma kontrolleriyle birlikte gösterir.
Metin düzenleme için, önizleme, tuval üzerindeki bir düzenleyici etkileşimi yönetirken aktif kompozisyon katmanını geçici olarak gizler. Saklanan konum daha sonra ayrı bir görsel model oluşturmadan o Remotion katmanına geri akar.
Karelere ayarlı dinamik katmanlar
Remotion bize kare tabanlı bir zaman çizelgesi sunar, bu nedenle her katmanın belirsiz bir görsel tahminden ziyade bir başlangıç karesi ve süresi vardır.
Zaman ayarlı altyazı kelimeleri kısa parçalara ayrılır ve kompozisyona ulaşmadan önce karelere dönüştürülür. Her hook, body veya CTA'nın da benzer şekilde tanımlanmış bir zaman penceresi, stili, animasyonu ve konumu vardır. Şablon yalnızca mevcut kareye ait katmanı oluşturur.
Bu, yeni bir varyasyonu bir veri değişikliği haline getirir: Adstacker, aynı bileşene farklı bir katman spesifikasyonu sağlar - video teknoloji mühendisliği ekiplerimizin müşteri medya boru hatlarında uyguladığı türden birleştirilebilir, şablon odaklı bir yaklaşım.
Sadık bir oluşturulmuş çıktı için tasarım
Bir tarayıcı önizlemesi ve bir oluşturma işçisi videoyu tamamen aynı şekilde çözmez. Şablonumuz oluşturma modunda olup olmadığını kontrol eder: tarayıcıda, Player'ın kaynak sesi çalabilmesi için Remotion'ın Video bileşenini kullanır; oluşturma sırasında ise güvenilir sunucu tarafı kare çıkarma için daha uygun olan OffthreadVideo'yu kullanır.
Ayrıca iki bağlam arasında yazı tiplerini ve stil haritalarını paylaşıyoruz. Bu, altyazı sarımını, metin boyutlandırmayı ve animasyon davranışını tutarlı tutar. Bir en boy oranı tuvali ve sıkıştırılmış katmanlar, katmanların kenarın ötesine kaybolmasını önler.
Gerçek dünya örneği: her reklamı yeniden inşa etmeden kazanan bir hook'u test etmek
Bir ürün demosu ve iki harekete geçirici mesajı olan bir markanın üç açılış hook'unu ve iki altyazı stilini test ettiğini hayal edin. İçerik oluşturucu, sırası, başlıkları ve animasyonlu metni dahil olmak üzere bir kombinasyonu son oranda önizleyebilir.
Ekip hook metnini değiştirir veya bir CTA'yı taşırsa, katman verilerini günceller. Yeniden oluşturulacak ayrı bir önizleme tasarımı yoktur; oluşturma boru hattı, dışa aktarım için aynı şablon kurallarını kullanır.
Pazarlamacılar, bir videonun cilalı görünmesini sağlayan ayrıntıları kontrol ederken daha fazla fikri test edebilirler.
Güvenle inşa edin, önizleyin ve oluşturun
Remotion, Adstacker'ın video reklamları dinamik, yeniden kullanılabilir kompozisyonlar olarak ele almasına yardımcı olur. Aynı şablon, tarayıcı keşfini ve öngörülebilir çıktıyı desteklerken, kareye duyarlı katmanlar altyazıları, metinleri ve klipleri senkronize tutar.
Bir sonraki hook'larınızı, başlıklarınızı ve CTA'larınızı Adstacker'da oluşturun, oluştururken kombinasyonları önizleyin ve test etmeye hazır varyasyonları dışa aktarın.
Aynı önizleme-dışa aktarım eşleşmesi disiplinini, AI video platform oluşturmalarımıza da uyguladık. Buna Ssemble'ın kısa formatlı düzenleme araçları ve VideoCap'in AI odaklı üretim boru hattı dahildir; her ikisi de cloud infrastructure services aracılığıyla yönetilen render altyapısı üzerinde ölçeklenmiştir.
Teknoloji yığını: React · Next.js · Remotion · @remotion/player · AWS ECS render workers · FFmpeg
Ekibimizden daha fazlasını okuyun
1. Export Service vs. Video Editor Pipeline
