У Adstacker відеореклама — це поєднання кліпів, синхронізації субтитрів, текстових шарів, стилів, анімацій, співвідношення сторін і закликів до дії. Автори повинні бачити ці варіанти негайно — і кінцевий експорт має відповідати попередньому перегляду.
Ось чому ми використовуємо Remotion. Його композиція на базі React забезпечує редаговані попередні перегляди та надає ті самі візуальні правила для відрендереного відео. Ми визначаємо креатив один раз і підтримуємо дві ці візуалізації узгодженими.
Виклик: попередній перегляд та експорт часто розходяться
Креативні інструменти часто стикаються з розчаровуючою проблемою: попередній перегляд в редакторі виглядає правильно, але експортований файл — ні. Позиція тексту може зміщуватися, шрифт може по-різному переноситися, субтитри можуть з'являтися не в той момент, або послідовність кліпів може відтворюватися по-іншому після експорту.
Проблема поглиблюється, коли користувачі змішують сегменти, вибирають стилі субтитрів, додають текст для "хука", "тіла" чи CTA та змінюють вихідне співвідношення сторін. Якщо кожна поверхня інтерпретує ці налаштування незалежно, невеликі відмінності накопичуються.
Adstacker потребує негайного попереднього перегляду та масштабованого рендерингу. Композиція повинна бути гнучкою для редагування та передбачуваною у виробництві.
Одна спільна композиція для попереднього перегляду та рендерингу
Нашим центральним будівельним блоком є спільний Remotion VideoTemplate. Він приймає:
- Одне відео або послідовність відеосегментів
- Загальна тривалість і частота кадрів
- Цільовий розмір полотна для вибраного співвідношення сторін
- Синхронізовані текстові шари, CTA та субтитри
- Налаштування стилю та анімації для кожного шару
Series від Remotion об'єднує сегменти в одну часову шкалу. Sequence розміщує текстові шари та шари субтитрів на конкретних кадрах. Отже, варіація — це дані, а не одноразово відредагований файл.
Архітектура
Фронтенд і шлях рендерингу використовують спільний шаблон, шрифти, карту стилів субтитрів та типи шарів. Стиль означає одне й те саме в браузері та в готовій рекламі.
Попередній перегляд у реальному часі за допомогою Remotion Player
Remotion Player надає інтерактивне полотно попереднього перегляду. Коли автор змінює "хук", "тіло", CTA, стиль субтитрів або співвідношення сторін, ми передаємо оновлені props до шаблону замість створення нового файлу.
Попередній перегляд використовує реальну композицію, а не статичну апроксимацію. Він показує послідовні кліпи, синхронізовані субтитри, анімований текст та вибрані розміри полотна разом зі звичними елементами керування відтворенням.
Для редагування тексту попередній перегляд тимчасово приховує активний шар композиції, тоді як редактор на полотні обробляє взаємодію. Збережена позиція потім повертається до цього шару Remotion — без створення окремої візуальної моделі.
Динамічні шари, синхронізовані з кадрами
Remotion надає нам часову шкалу, засновану на кадрах, тому кожен шар має початковий кадр і тривалість, а не неточне візуальне припущення.
Синхронізовані слова субтитрів групуються в короткі блоки та перетворюються на кадри, перш ніж потрапити до композиції. Кожен "хук", "тіло" або CTA також має визначене часове вікно, стиль, анімацію та позицію. Шаблон рендерить лише шар для поточного кадру.
Це робить нову варіацію зміною даних: Adstacker надає іншу специфікацію шару тому ж компоненту - такий компонований, керований шаблонами підхід наші команди з video technology engineering застосовують у медіа-конвеєрах клієнтів.
Проектування для точного відрендереного виводу
Попередній перегляд у браузері та робочий процес рендерингу не декодують відео абсолютно однаково. Наш шаблон перевіряє, чи він перебуває в режимі рендерингу: у браузері він використовує компонент Video від Remotion, щоб Player міг відтворювати вихідний звук; під час рендерингу він використовує OffthreadVideo, який краще підходить для надійного вилучення кадрів на стороні сервера.
Ми також ділимося шрифтами та картами стилів між двома контекстами. Це забезпечує послідовність переносу субтитрів, розміру тексту та поведінки анімації. Полотно зі співвідношенням сторін і затиснуті накладки запобігають зникненню шарів за межами.
Приклад з реального світу: тестування успішного "хука" без перетворення кожної реклами
Уявіть бренд з однією демонстрацією продукту та двома закликами до дії, який тестує три вступні "хуки" та два стилі субтитрів. Автор може переглянути комбінацію, включаючи її послідовність, субтитри та анімований текст, у фінальному співвідношенні.
Якщо команда змінює текст "хука" або переміщує CTA, вона оновлює дані шару. Немає окремого дизайну попереднього перегляду, який потрібно було б відтворювати; конвеєр рендерингу використовує ті ж самі правила шаблону для експорту.
Маркетологи можуть тестувати більше ідей, контролюючи деталі, які роблять відео досконалим.
Створюйте, переглядайте та рендеріть з упевненістю
Remotion допомагає Adstacker розглядати відеорекламу як динамічні, багаторазові композиції. Той самий шаблон підтримує дослідження в браузері та передбачуваний вивід, тоді як шари, що враховують кадри, синхронізують субтитри, текст та кліпи.
Створюйте свої наступні "хуки", субтитри та CTA в Adstacker, переглядайте комбінації під час створення та експортуйте варіації, готові до тестування.
Ми застосували цей самий принцип "попередній перегляд відповідає експорту" на інших розробках AI video platform, включаючи інструменти для короткометражного редагування Ssemble та конвеєр генерації на основі AI VideoCap, обидва масштабовані на рендеринговій інфраструктурі, керованій нашими cloud infrastructure services.
Стек технологій: React · Next.js · Remotion · @remotion/player · AWS ECS render workers · FFmpeg
Читайте більше від нашої команди
1. Сервіс експорту проти конвеєра відеоредактора
2. Створення звичайного відеоредактора
3. Оптимізація логотипу каналу для різних роздільних здатностей відео
