Bei Adstacker ist eine Videoanzeige eine Kombination aus Clips, Untertitel-Timing, Textebenen, Stilen, Animationen, Seitenverhältnissen und Calls to Action. Kreative müssen diese Entscheidungen sofort sehen – und der fertige Export muss übereinstimmen.
Deshalb nutzen wir Remotion. Seine React-basierte Komposition ermöglicht bearbeitbare Previews und bietet die gleichen visuellen Regeln für gerenderte Videos. Wir definieren das Kreativmaterial einmal und halten die beiden Erfahrungen synchron.
Die Herausforderung: Preview und Export driften oft auseinander
Kreative Tools stehen oft vor einem frustrierenden Problem: Die Editor-Preview sieht richtig aus, aber die exportierte Datei nicht. Eine Textposition kann sich verschieben, eine Schriftart kann anders umbrechen, Untertitel können zum falschen Zeitpunkt erscheinen oder eine Abfolge von Clips kann nach dem Export anders abgespielt werden.
Das Problem verstärkt sich, wenn Benutzer Segmente mischen, Untertitelstile auswählen, Hook/Body/CTA-Text hinzufügen und das Ausgabe-Seitenverhältnis ändern. Wenn jede Oberfläche diese Einstellungen unabhängig interpretiert, summieren sich kleine Unterschiede.
Adstacker benötigt sofortige Previews und skalierbares Rendering. Die Komposition muss flexibel für die Bearbeitung und vorhersehbar in der Produktion sein.
Eine gemeinsame Komposition für Preview und Rendering
Unser zentraler Baustein ist ein geteiltes Remotion VideoTemplate. Es akzeptiert:
- Ein Video oder eine Abfolge von Videosegmenten
- Die Gesamtdauer und Bildrate
- Eine Ziel-Canvas-Größe für das ausgewählte Seitenverhältnis
- Zeitgesteuerte Text-, CTA- und Untertitelebenen
- Styling- und Animationseinstellungen für jede Ebene
Remotion's Series verkettet Segmente zu einer Timeline. Sequence platziert Text- und Untertitelebenen an bestimmten Frames. Eine Variation ist somit Daten, keine einmalig bearbeitete Datei.
Architektur
Das Frontend und der Rendering-Pfad teilen sich das Template, Schriftarten, die Untertitel-Stil-Map und die Ebenentypen. Ein Stil bedeutet im Browser und in einer fertigen Anzeige dasselbe.
Live-Previews mit dem Remotion Player
Der Remotion Player stellt die interaktive Preview-Canvas zur Verfügung. Wenn ein Kreativer einen Hook, Body, CTA, Untertitelstil oder ein Seitenverhältnis ändert, übergeben wir aktualisierte Props an das Template, anstatt eine neue Datei zu erstellen.
Die Preview verwendet die echte Komposition, nicht eine statische Annäherung. Sie zeigt sequenzielle Clips, zeitgesteuerte Untertitel, animierten Text und ausgewählte Canvas-Dimensionen zusammen, mit bekannten Wiedergabesteuerungen.
Für die Textbearbeitung blendet die Preview die aktive Kompositionsebene temporär aus, während ein On-Canvas-Editor die Interaktion übernimmt. Die gespeicherte Position fließt dann zurück in diese Remotion-Ebene – ohne ein separates visuelles Modell zu erstellen.
Dynamische Ebenen, auf Frames getimt
Remotion bietet uns eine Frame-basierte Timeline, sodass jede Ebene einen Start-Frame und eine Dauer hat, anstatt einer unpräzisen visuellen Schätzung.
Zeitgesteuerte Untertitelwörter werden in kurze Blöcke gruppiert und in Frames umgewandelt, bevor sie die Komposition erreichen. Jeder Hook, Body oder CTA hat ebenfalls ein definiertes Zeitfenster, einen Stil, eine Animation und eine Position. Das Template rendert nur die Ebene für den aktuellen Frame.
Dies macht eine neue Variation zu einer Datenänderung: Adstacker liefert eine andere Ebenenspezifikation an dieselbe Komponente – die Art des zusammensetzbaren, Template-gesteuerten Ansatzes, den unsere Video-Technologie-Engineering-Teams über die Medienpipelines der Kunden hinweg anwenden.
Design für eine originalgetreue gerenderte Ausgabe
Eine Browser-Preview und ein Render Worker dekodieren Video nicht auf exakt die gleiche Weise. Unser Template prüft, ob es sich im Rendering-Modus befindet: Im Browser verwendet es Remotion’s Video-Komponente, damit der Player den Quell-Audio abspielen kann; beim Rendering verwendet es OffthreadVideo, das besser für eine zuverlässige serverseitige Frame-Extraktion geeignet ist.
Wir teilen auch Schriftarten und Stil-Maps zwischen den beiden Kontexten. Dies hält den Untertitelumbruch, die Textgrößenanpassung und das Animationsverhalten konsistent. Ein Aspect-Ratio-Canvas und geklemmte Overlays verhindern, dass Ebenen über den Rand hinaus verschwinden.
Praxisbeispiel: Einen erfolgreichen Hook testen, ohne jede Anzeige neu aufzubauen
Stellen Sie sich eine Marke vor, die mit einer Produktdemonstration und zwei Calls to Action drei Eröffnungs-Hooks und zwei Untertitelstile testet. Der Kreative kann eine Kombination, einschließlich ihrer Sequenz, Captions und animierten Texts, im endgültigen Seitenverhältnis vorab ansehen.
Wenn das Team den Hook-Text ändert oder einen CTA verschiebt, aktualisiert es die Ebenendaten. Es gibt kein separates Preview-Design, das neu erstellt werden müsste; die Rendering-Pipeline verwendet dieselben Template-Regeln für den Export.
Marketer können mehr Ideen testen und gleichzeitig die Details kontrollieren, die ein Video ansprechend wirken lassen.
Sicher bauen, vorab ansehen und rendern
Remotion hilft Adstacker, Videoanzeigen als dynamische, wiederverwendbare Kompositionen zu behandeln. Dasselbe Template unterstützt die Browser-Exploration und eine vorhersehbare Ausgabe, während Frame-bewusste Ebenen Untertitel, Text und Clips synchron halten.
Erstellen Sie Ihre nächste Reihe von Hooks, Captions und CTAs in Adstacker, sehen Sie sich die Kombinationen beim Erstellen vorab an und exportieren Sie die Varianten, die zum Testen bereit sind.
Wir haben dieselbe Preview-matches-Export-Disziplin auch bei anderen AI video platform-Builds angewendet, einschließlich Ssembles Short-Form-Bearbeitungstools und VideoCaps AI-gesteuerter Generierungspipeline, beide skaliert auf Render-Infrastruktur, die über unsere Cloud Infrastructure Services verwaltet wird.
Technologie-Stack: React · Next.js · Remotion · @remotion/player · AWS ECS render workers · FFmpeg
Mehr von unserem Team lesen
1. Export-Dienst vs. Video-Editor-Pipeline
