Meillä Adstackerissa videomainos on yhdistelmä klippejä, tekstityksen ajoitusta, tekstikerroksia, tyylejä, animaatioita, kuvasuhteita ja toimintakehotuksia. Sisällöntuottajien on nähtävä nämä valinnat välittömästi – ja valmiin viennin on vastattava niitä.
Siksi käytämme Remotionia. Sen React-pohjainen koostumus mahdollistaa muokattavat esikatselut ja tarjoaa samat visuaaliset säännöt renderöitylle videolle. Määrittelemme luovan sisällön kerran ja pidämme nämä kaksi kokemusta yhdenmukaisina.
Haaste: esikatselu ja vienti poikkeavat usein toisistaan
Luovilla työkaluilla on usein turhauttava ongelma: editorin esikatselu näyttää oikealta, mutta viety tiedosto ei. Tekstin sijainti voi muuttua, fontti voi rivittyä eri tavalla, tekstitykset voivat ilmestyä väärällä hetkellä, tai klippien sarja voi toistua eri tavalla viennin jälkeen.
Ongelma kasvaa, kun käyttäjät yhdistelevät segmenttejä, valitsevat tekstitystyylejä, lisäävät hook/body/CTA-tekstiä ja muuttavat lähtökuvasuhdetta. Jos jokainen pinta tulkitsee nämä asetukset itsenäisesti, pienet erot kasaantuvat.
Adstacker tarvitsee välittömiä esikatseluita ja skaalautuvaa renderöintiä. Kompositiion on oltava joustava muokkaukseen ja ennustettavissa tuotannossa.
Yksi jaettu koostumus esikatseluun ja renderöintiin
Keskeinen rakennuspalikkamme on jaettu Remotion VideoTemplate. Se hyväksyy:
- Yhden videon tai videosegmenttien sarjan
- Kokonaiskeston ja kuvataajuuden
- Kohdekangas-koon valitulle kuvasuhteelle
- Ajastetut teksti-, CTA- ja tekstityskerrokset
- Jokaisen kerroksen tyyli- ja animaatioasetukset
Remotionin Series yhdistää segmentit yhdeksi aikajanaksi. Sequence sijoittaa teksti- ja tekstityskerrokset tietyille kehyksille. Variantit ovat siis dataa, eivät kertaluonteisia muokattuja tiedostoja.
Arkkitehtuuri
Frontend ja renderöintipolku jakavat templaatin, fontit, tekstitystyylikartan ja kerrostyypit. Tyyli tarkoittaa samaa selaimessa ja valmiissa mainoksessa.
Live-esikatselut Remotion Playerin avulla
Remotion Player tarjoaa interaktiivisen esikatselukankaan. Kun sisällöntuottaja muuttaa hookia, bodya, CTA:ta, tekstitystyyliä tai kuvasuhdetta, välitämme päivitettyjä propseja templaatille uuden tiedoston rakentamisen sijaan.
Esikatselu käyttää todellista koostumusta, ei staattista likiarvoa. Se näyttää peräkkäiset klipit, ajoitetut tekstitykset, animoidun tekstin ja valitut kangasmitat yhdessä tuttujen toistonohjaimien kanssa.
Tekstin muokkausta varten esikatselu piilottaa väliaikaisesti aktiivisen koostumuskerroksen, kun taas kankaalla oleva editori hoitaa vuorovaikutuksen. Tallennettu sijainti palautuu sitten tähän Remotion-kerrokseen – luomatta erillistä visuaalista mallia.
Dynaamiset kerrokset, ajastettu kehyksiin
Remotion antaa meille kehyspohjaisen aikajanan, joten jokaisella kerroksella on alkukehys ja kesto epätarkan visuaalisen arvauksen sijaan.
Ajastetut tekstityssanat ryhmitellään lyhyisiin pätkiin ja muunnetaan kehyksiksi ennen kuin ne saavuttavat koostumuksen. Jokaisella hookilla, bodylla tai CTA:lla on samoin määritelty aikaväli, tyyli, animaatio ja sijainti. Templaatti renderöi vain nykyisen kehyksen kerroksen.
Tämä tekee uudesta variaatiosta datamuutoksen: Adstacker toimittaa erilaisen kerrosmäärityksen samalle komponentille – juuri sellaisen koostettavan, templaattipohjaisen lähestymistavan, jota videoteknologian suunnittelutiimimme soveltavat asiakkaan mediasisällön prosessoinnissa.
Uskollisen renderöidyn tulosteen suunnittelu
Selaimen esikatselu ja renderöintityöntekijä eivät dekoodaa videota täsmälleen samalla tavalla. Templaattimme tarkistaa, onko se renderöintitilassa: selaimessa se käyttää Remotionin Video-komponenttia, jotta Player voi toistaa lähdeäänen; renderöidessä se käyttää OffthreadVideoa, joka soveltuu paremmin luotettavaan palvelinpuolen kehysten poimintaan.
Jaamme myös fontit ja tyylikartat näiden kahden kontekstin välillä. Tämä pitää tekstityksen rivityksen, tekstin koon ja animaatiokäyttäytymisen johdonmukaisena. Kuvasuhdekangas ja rajatut peittokuvat estävät kerrosten katoamisen reunan yli.
Tosimaailman esimerkki: voittavan hookin testaaminen rakentamatta jokaista mainosta uudelleen
Kuvittele brändi, jolla on yksi tuotetiedustelu ja kaksi toimintakehotusta, ja joka testaa kolmea aloitus-hookia ja kahta tekstitystyyliä. Sisällöntuottaja voi esikatsella yhdistelmää, mukaan lukien sen sekvenssi, tekstitykset ja animoitu teksti, lopullisessa kuvasuhteessa.
Jos tiimi muuttaa hook-tekstiä tai siirtää CTA:ta, se päivittää kerrosdataa. Erillistä esikatselumallia ei tarvitse luoda uudelleen; renderöintiputki käyttää samoja templaattisääntöjä vientiin.
Markkinoijat voivat testata useampia ideoita samalla, kun he hallitsevat yksityiskohdat, jotka tekevät videosta viimeistellyn.
Rakenna, esikatsele ja renderöi luottavaisin mielin
Remotion auttaa Adstackeria käsittelemään videomainoksia dynaamisina, uudelleenkäytettävinä koostumuksina. Sama templaatti tukee selaimen selaamista ja ennustettavaa tulostusta, kun taas kehystietoiset kerrokset pitävät tekstitykset, tekstin ja klipit synkronissa.
Luo seuraavat hookit, tekstitykset ja CTA:t Adstackerissa, esikatsele yhdistelmiä rakentaessasi ja vie testattavaksi valmiit variaatiot.
Olemme soveltaneet samaa esikatselu-vastaa-vientitarkkuutta myös muihin AI-videoplatform-rakennelmiin, mukaan lukien Ssemblen lyhytmuotoiset muokkaustyökalut ja VideoCapin AI-ohjattu generointiputki, jotka molemmat on skaalattu renderöintiin infrastruktuurilla, jota hallitaan pilvi-infrastruktuuripalvelujemme kautta.
Teknologiakasa: React · Next.js · Remotion · @remotion/player · AWS ECS render workers · FFmpeg
Lue lisää tiimiltämme
1. Vientipalvelu vs. Videoeditorin putki
