ב-Adstacker, מודעת וידאו היא שילוב של קליפים, תזמון כתוביות, שכבות טקסט, סגנונות, אנימציות, יחסי גובה-רוחב וקריאות לפעולה. יוצרים צריכים לראות את הבחירות הללו מיד – והייצוא הסופי חייב להיות תואם.
לכן אנו משתמשים ב-Remotion. הקומפוזיציה מבוססת ה-React שלה מפעילה תצוגות מקדימות הניתנות לעריכה ומספקת את אותם כללים ויזואליים לווידאו המרונדר. אנו מגדירים את הקריאייטיב פעם אחת ושומרים על שתי החוויות מיושרות.
האתגר: תצוגה מקדימה וייצוא לעיתים קרובות מתרחקים זה מזה
כלי יצירה נתקלים בדרך כלל בבעיה מתסכלת: התצוגה המקדימה של העורך נראית תקינה, אך הקובץ המיוצא אינו כזה. מיקום טקסט עלול לזוז, גופן עשוי לרדת שורה באופן שונה, כתוביות עלולות להופיע ברגע הלא נכון, או רצף קליפים עשוי להתנגן באופן שונה לאחר הייצוא.
הבעיה גדלה כאשר משתמשים מערבבים סגמנטים, בוחרים סגנונות כתוביות, מוסיפים טקסט של hook/body/CTA, ומשנים את יחס הגובה-רוחב של הפלט. אם כל משטח מפרש את ההגדרות הללו באופן עצמאי, הבדלים קטנים מצטברים.
Adstacker זקוקה לתצוגות מקדימות מיידיות ולרינדור סקלבילי. הקומפוזיציה חייבת להיות גמישה לעריכה וצפויה בסביבת פרודקשן.
קומפוזיציה משותפת אחת לתצוגה מקדימה ורינדור
אבן הבניין המרכזית שלנו היא VideoTemplate משותף של Remotion. הוא מקבל:
- וידאו אחד או רצף של מקטעי וידאו
- המשך הכולל וקצב הפריימים
- גודל קנבס יעד עבור יחס הגובה-רוחב הנבחר
- שכבות טקסט מתוזמנות, CTA וכתוביות
- הגדרות סגנון ואנימציה לכל שכבה
ה-Series של Remotion מחבר מקטעים לתוך ציר זמן אחד. Sequence ממקם שכבות טקסט וכתוביות בפריימים ספציפיים. לכן, וריאציה היא נתונים, ולא קובץ ערוך חד פעמי.
ארכיטקטורה
ה-frontend ונתיב הרינדור חולקים את התבנית, הגופנים, מפת סגנונות הכתוביות וסוגי השכבות. סגנון משמעותו זהה בדפדפן ובמודעה מוגמרת.
תצוגות מקדימות חיות עם ה-Remotion Player
ה-Remotion Player מספק את קנבס התצוגה המקדימה האינטראקטיבי. כאשר יוצר משנה hook, body, CTA, סגנון כתוביות או יחס גובה-רוחב, אנו מעבירים props מעודכנים לתבנית במקום לבנות קובץ חדש.
התצוגה המקדימה משתמשת בקומפוזיציה האמיתית, לא בקירוב סטטי. היא מציגה קליפים רצופים, כתוביות מתוזמנות, טקסט מונפש וממדי קנבס נבחרים יחד, עם פקדי הפעלה מוכרים.
עבור עריכת טקסט, התצוגה המקדימה מסתירה זמנית את שכבת הקומפוזיציה הפעילה בזמן שעורך בתוך הקנבס מטפל באינטראקציה. המיקום השמור זורם אז בחזרה לשכבת ה-Remotion הזו – מבלי ליצור מודל ויזואלי נפרד.
שכבות דינמיות, מתוזמנות לפריימים
Remotion מספקת לנו ציר זמן מבוסס פריימים, כך שלכל שכבה יש פריים התחלה ומשך במקום ניחוש ויזואלי לא מדויק.
מילים בכתוביות מתוזמנות מקובצות למקטעים קצרים ומומרות לפריימים לפני שהן מגיעות לקומפוזיציה. באופן דומה, לכל hook, body או CTA יש חלון זמן מוגדר, סגנון, אנימציה ומיקום. התבנית מרנדרת רק את השכבה עבור הפריים הנוכחי.
זה הופך וריאציה חדשה לשינוי נתונים: Adstacker מספקת מפרט שכבה שונה לאותו רכיב - סוג הגישה הניתנת להרכבה, מונעת התבניות, שצוותי video technology engineering שלנו מיישמים בכל צינורות המדיה של לקוחותינו.
עיצוב עבור פלט מרונדר נאמן למקור
תצוגה מקדימה בדפדפן ו-render worker אינם מפענחים וידאו באותה צורה בדיוק. התבנית שלנו בודקת אם היא במצב רינדור: בדפדפן, היא משתמשת ברכיב ה-Video של Remotion כדי שה-Player יוכל לנגן את אודיו המקור; בעת רינדור, היא משתמשת ב-OffthreadVideo, שמתאים יותר לחילוץ פריימים אמין בצד השרת.
אנו גם חולקים גופנים ומפות סגנון בין שני ההקשרים. זה שומר על עטיפת כתוביות, גודל טקסט והתנהגות אנימציה עקביים. קנבס ביחס גובה-רוחב ושכבות-על תלויות מונעים משכבות להיעלם מעבר לקצה.
דוגמה מהעולם האמיתי: בדיקת hook מנצח מבלי לבנות מחדש כל מודעה
תארו לעצמכם מותג עם הדגמת מוצר אחת ושתי קריאות לפעולה, הבודק שלושה hooks פותחים ושני סגנונות כתוביות. היוצר יכול לצפות בתצוגה מקדימה של שילוב, כולל הרצף, הכתוביות והטקסט המונפש שלו, ביחס הסופי.
אם הצוות משנה את טקסט ה-hook או מזיז CTA, הוא מעדכן את נתוני השכבה. אין צורך ליצור מחדש עיצוב תצוגה מקדימה נפרד; צינור הרינדור משתמש באותם כללי תבנית לייצוא.
משווקים יכולים לבדוק יותר רעיונות תוך כדי שליטה בפרטים שהופכים וידאו למלוטש.
בנה, צפה בתצוגה מקדימה ורנדר בביטחון
Remotion עוזרת ל-Adstacker להתייחס למודעות וידאו כקומפוזיציות דינמיות וניתנות לשימוש חוזר. אותה תבנית תומכת בסקירה בדפדפן ובפלט צפוי, בעוד שכבות מודעות פריימים שומרות על סנכרון כתוביות, טקסט וקליפים.
צרו את סט ה-hooks, הכתוביות וה-CTAs הבא שלכם ב-Adstacker, צפו בתצוגה מקדימה של השילובים תוך כדי בנייה, וייצאו את הווריאציות שמוכנות לבדיקה.
יישמנו את אותה דיסציפלינת 'תצוגה מקדימה תואמת ייצוא' גם בבניית AI video platform אחרות, כולל כלי העריכה לקטעים קצרים של Ssemble וצינור יצירת הווידאו מונע ה-AI של VideoCap, כאשר שניהם מפותחים על תשתית רינדור המנוהלת באמצעות שירותי תשתית הענן שלנו.
מחסנית טכנולוגית: React · Next.js · Remotion · @remotion/player · AWS ECS render workers · FFmpeg
