En Adstacker, un anuncio de video es una combinación de clips, tiempos de subtítulos, capas de texto, estilos, animaciones, relaciones de aspecto y llamadas a la acción. Los creadores necesitan ver esas opciones de inmediato, y la exportación final debe coincidir.
Por eso utilizamos Remotion. Su composición basada en React permite vistas previas editables y proporciona las mismas reglas visuales para el video renderizado. Definimos la creatividad una vez y mantenemos ambas experiencias alineadas.
El desafío: la vista previa y la exportación a menudo se desincronizan
Las herramientas creativas suelen enfrentarse a un problema frustrante: la vista previa del editor se ve correcta, pero el archivo exportado no. La posición de un texto puede cambiar, una fuente puede ajustarse de manera diferente, los subtítulos pueden aparecer en el momento equivocado, o una secuencia de clips puede reproducirse de forma distinta después de la exportación.
El problema se agrava cuando los usuarios mezclan segmentos, eligen estilos de subtítulos, añaden texto para el hook/body/CTA y cambian la relación de aspecto de salida. Si cada interfaz interpreta estas configuraciones de forma independiente, las pequeñas diferencias se acumulan.
Adstacker necesita vistas previas inmediatas y una renderización escalable. La composición debe ser flexible para la edición y predecible en producción.
Una composición compartida para la vista previa y la renderización
Nuestro componente central es un VideoTemplate compartido de Remotion. Acepta:
- Un video o una secuencia de segmentos de video
- La duración total y la velocidad de fotogramas
- Un tamaño de lienzo objetivo para la relación de aspecto seleccionada
- Capas de texto, CTA y subtítulos cronometrados
- Configuración de estilo y animación para cada capa
La función Series de Remotion encadena segmentos en una única línea de tiempo. Sequence coloca capas de texto y subtítulos en fotogramas específicos. Por lo tanto, una variación es un dato, no un archivo editado único.
Arquitectura
El frontend y la ruta de renderización comparten la plantilla, las fuentes, el mapa de estilos de subtítulos y los tipos de capas. Un estilo significa lo mismo en el navegador y en un anuncio terminado.
Vistas previas en vivo con el Remotion Player
El Remotion Player proporciona el lienzo interactivo de vista previa. Cuando un creador cambia un hook, body, CTA, estilo de subtítulo o relación de aspecto, pasamos las props actualizadas a la plantilla en lugar de construir un nuevo archivo.
La vista previa utiliza la composición real, no una aproximación estática. Muestra clips secuenciales, subtítulos cronometrados, texto animado y dimensiones de lienzo seleccionadas juntas, con controles de reproducción familiares.
Para la edición de texto, la vista previa oculta temporalmente la capa de composición activa mientras un editor en lienzo gestiona la interacción. La posición almacenada luego vuelve a esa capa de Remotion, sin crear un modelo visual separado.
Capas dinámicas, sincronizadas con los fotogramas
Remotion nos proporciona una línea de tiempo basada en fotogramas, por lo que cada capa tiene un fotograma de inicio y una duración, en lugar de una estimación visual imprecisa.
Las palabras de los subtítulos cronometrados se agrupan en fragmentos cortos y se convierten en fotogramas antes de llegar a la composición. De manera similar, cada hook, body o CTA tiene una ventana de tiempo, estilo, animación y posición definidos. La plantilla renderiza solo la capa para el fotograma actual.
Esto convierte una nueva variación en un cambio de datos: Adstacker suministra una especificación de capa diferente al mismo componente - el tipo de enfoque componible y basado en plantillas que nuestros equipos de ingeniería de tecnología de video aplican en las pipelines de medios de los clientes.
Diseño para una salida renderizada fiel
Una vista previa en el navegador y un render worker no decodifican el video exactamente de la misma manera. Nuestra plantilla verifica si está en modo de renderización: en el navegador, utiliza el componente Video de Remotion para que el Player pueda reproducir el audio fuente; al renderizar, utiliza OffthreadVideo, que es más adecuado para una extracción de fotogramas confiable en el lado del servidor.
También compartimos fuentes y mapas de estilo entre los dos contextos. Esto mantiene la consistencia en el ajuste de subtítulos, el tamaño del texto y el comportamiento de la animación. Un lienzo con relación de aspecto y superposiciones restringidas evitan que las capas desaparezcan más allá del borde.
Ejemplo real: probar un hook ganador sin reconstruir cada anuncio
Imagina una marca con una demostración de producto y dos llamadas a la acción probando tres hooks de apertura y dos estilos de subtítulos. El creador puede previsualizar una combinación, incluyendo su secuencia, subtítulos y texto animado, en la relación final.
Si el equipo cambia el texto del hook o mueve un CTA, actualiza los datos de la capa. No hay un diseño de vista previa separado que recrear; la pipeline de renderizado utiliza las mismas reglas de plantilla para la exportación.
Los profesionales del marketing pueden probar más ideas mientras controlan los detalles que hacen que un video se vea pulido.
Crea, previsualiza y renderiza con confianza
Remotion ayuda a Adstacker a tratar los anuncios de video como composiciones dinámicas y reutilizables. La misma plantilla admite la exploración en el navegador y una salida predecible, mientras que las capas conscientes de los fotogramas mantienen los subtítulos, el texto y los clips sincronizados.
Crea tu próximo conjunto de hooks, subtítulos y CTAs en Adstacker, previsualiza las combinaciones a medida que las construyes y exporta las variaciones que estén listas para probar.
Hemos aplicado esta misma disciplina de "la vista previa coincide con la exportación" en otras implementaciones de plataformas de video con AI, incluyendo las herramientas de edición de formato corto de Ssemble y la pipeline de generación impulsada por AI de VideoCap, ambas escaladas en una infraestructura de renderizado gestionada a través de nuestros servicios de infraestructura en la nube.
Technology stack: React · Next.js · Remotion · @remotion/player · AWS ECS render workers · FFmpeg
Lee más de nuestro equipo
1. Servicio de Exportación vs. Pipeline del Editor de Video
2. Construyendo un Editor de Video Normal
3. Optimizando el Logotipo del Canal para Diferentes Resoluciones de Video
