Hos Adstacker er en videoannonce en kombination af klip, undertitels-timing, tekstlag, stilarter, animationer, billedformater og opfordringer til handling. Skabere skal se disse valg med det samme – og den færdige eksport skal stemme overens.
Derfor bruger vi Remotion. Dets React-baserede komposition driver redigerbare forhåndsvisninger og giver de samme visuelle regler for renderet video. Vi definerer det kreative én gang og holder de to oplevelser synkroniserede.
Udfordringen: forhåndsvisning og eksport driver ofte fra hinanden
Kreative værktøjer står ofte over for et frustrerende problem: editorens forhåndsvisning ser korrekt ud, men den eksporterede fil gør ikke. En tekstposition kan flytte sig, en skrifttype kan bryde om på en anden måde, undertekster kan dukke op på det forkerte tidspunkt, eller en sekvens af klip kan afspilles anderledes efter eksport.
Problemet vokser, når brugere blander segmenter, vælger undertitelsformater, tilføjer hook/body/CTA-tekst og ændrer output-billedformatet. Hvis hver overflade fortolker disse indstillinger uafhængigt, vil små forskelle hobe sig op.
Adstacker har brug for øjeblikkelige forhåndsvisninger og skalerbar rendering. Kompositionen skal være fleksibel for redigering og forudsigelig i produktion.
Én delt komposition til forhåndsvisning og rendering
Vores centrale byggesten er en delt Remotion VideoTemplate. Den accepterer:
- Én video eller en sekvens af videosegmenter
- Den samlede varighed og billedhastighed
- En mål-lærredsstørrelse for det valgte billedformat
- Tidsindstillede tekst-, CTA- og undertitelslag
- Stil- og animationsindstillinger for hvert lag
Remotions Series forbinder segmenter til én tidslinje. Sequence placerer tekst- og undertitelslag ved specifikke frames. En variation er derfor data, ikke en engangsredigeret fil.
Arkitektur
Frontend og rendering-sti deler skabelonen, skrifttyper, undertitels-stil-kort og lagtyper. En stil betyder det samme i browseren og i en færdig annonce.
Live forhåndsvisninger med Remotion Player
Remotion Player leverer det interaktive forhåndsvisnings-lærred. Når en skaber ændrer en hook, body, CTA, undertitelsstil eller billedformat, sender vi opdaterede props til skabelonen i stedet for at bygge en ny fil.
Forhåndsvisningen bruger den reelle komposition, ikke en statisk tilnærmelse. Den viser sekventielle klip, tidsindstillede undertekster, animeret tekst og valgte lærredsdimensioner samlet, med velkendte afspilningskontroller.
Ved tekstredigering skjuler forhåndsvisningen midlertidigt det aktive kompositionslag, mens en on-canvas editor håndterer interaktionen. Den gemte position flyder derefter tilbage til det Remotion-lag – uden at skabe en separat visuel model.
Dynamiske lag, tidsindstillet til frames
Remotion giver os en frame-baseret tidslinje, så hvert lag har en start-frame og varighed snarere end et upræcist visuelt gæt.
Tidsindstillede undertekstsord grupperes i korte bidder og konverteres til frames, før de når kompositionen. Hver hook, body eller CTA har ligeledes et defineret tidsvindue, stil, animation og position. Skabelonen render kun laget for den aktuelle frame.
Dette gør en ny variation til en dataændring: Adstacker leverer en anden lag-specifikation til den samme komponent - den slags komponerbar, skabelon-drevet tilgang, som vores video technology engineering-teams anvender på tværs af klienters medie-pipelines.
Design for en trofast renderet output
En browser-forhåndsvisning og en render-worker afkoder ikke video på nøjagtig samme måde. Vores skabelon kontrollerer, om den er i rendering-tilstand: i browseren bruger den Remotions Video-komponent, så Playeren kan afspille kildelyden; ved rendering bruger den OffthreadVideo, som er bedre egnet til pålidelig server-side frame-ekstraktion.
Vi deler også skrifttyper og stilkort mellem de to kontekster. Dette holder undertitel-ombrydning, tekststørrelse og animationsadfærd konsistent. Et billedformat-lærred og afgrænsede overlays forhindrer lag i at forsvinde ud over kanten.
Eksempel fra den virkelige verden: test af en vindende hook uden at genopbygge hver annonce
Forestil dig et brand med én produktdemonstration og to opfordringer til handling, der tester tre indledende hooks og to undertitelsstilarter. Skaberen kan forhåndsvise en kombination, inklusive dens sekvens, billedtekster og animerede tekst, i det endelige billedformat.
Hvis teamet ændrer hook-teksten eller flytter en CTA, opdaterer det lagdataene. Der er intet separat forhåndsvisningsdesign at genskabe; rendering-pipelinen bruger de samme skabelonregler til eksport.
Marketingfolk kan teste flere ideer, samtidig med at de kontrollerer de detaljer, der får en video til at fremstå professionel.
Byg, forhåndsvis og render med tillid
Remotion hjælper Adstacker med at behandle videoannoncer som dynamiske, genanvendelige kompositioner. Den samme skabelon understøtter browser-udforskning og forudsigelig output, mens frame-bevidste lag holder undertekster, tekst og klip synkroniseret.
Opret dit næste sæt hooks, billedtekster og CTA'er i Adstacker, forhåndsvis kombinationerne, mens du bygger, og eksporter de variationer, der er klar til test.
Vi har anvendt den samme forhåndsvisning-matcher-eksport-disciplin på andre AI video platform-byggerier, herunder Ssemble’s værktøjer til kortformatsredigering og VideoCap’s AI-drevne genereringspipeline, begge skaleret på render-infrastruktur styret gennem vores cloud infrastructure services.
Teknologistak: React · Next.js · Remotion · @remotion/player · AWS ECS render workers · FFmpeg
