Chez Adstacker, une publicité vidéo est une combinaison de clips, de minutage des sous-titres, de couches de texte, de styles, d'animations, de ratios d'aspect et d'appels à l'action. Les créateurs doivent voir ces choix immédiatement, et l'exportation finale doit correspondre.
C'est pourquoi nous utilisons Remotion. Sa composition basée sur React alimente les prévisualisations éditables et fournit les mêmes règles visuelles pour la vidéo rendue. Nous définissons la création une fois et gardons les deux expériences alignées.
Le défi : la prévisualisation et l'exportation divergent souvent
Les outils créatifs rencontrent souvent un problème frustrant : la prévisualisation de l'éditeur semble correcte, mais le fichier exporté ne l'est pas. Une position de texte peut changer, une police peut s'enrouler différemment, les sous-titres peuvent apparaître au mauvais moment, ou une séquence de clips peut jouer différemment après l'exportation.
Le problème s'aggrave lorsque les utilisateurs mélangent des segments, choisissent des styles de sous-titres, ajoutent du texte d'accroche/corps/CTA et modifient le ratio d'aspect de sortie. Si chaque surface interprète ces paramètres indépendamment, de petites différences s'accumulent.
Adstacker a besoin de prévisualisations immédiates et de rendus évolutifs. La composition doit être flexible pour l'édition et prévisible en production.
Une composition partagée pour la prévisualisation et le rendu
Notre élément central est un VideoTemplate Remotion partagé. Il accepte :
- Une vidéo ou une séquence de segments vidéo
- La durée totale et la fréquence d'images
- Une taille de canevas cible pour le ratio d'aspect sélectionné
- Des couches de texte minuté, CTA et sous-titres
- Des paramètres de style et d'animation pour chaque couche
La Series de Remotion enchaîne les segments dans une seule chronologie. Sequence place les couches de texte et de sous-titres à des images spécifiques. Une variation est donc des données, pas un fichier édité unique.
Architecture
Le chemin frontal et de rendu partage le modèle, les polices, la carte de style des sous-titres et les types de couches. Un style signifie la même chose dans le navigateur et dans une publicité terminée.
Prévisualisations en direct avec le Remotion Player
Le Remotion Player fournit le canevas de prévisualisation interactif. Lorsqu'un créateur modifie un accroche, un corps, un CTA, un style de sous-titre ou un ratio d'aspect, nous transmettons des propriétés mises à jour au modèle au lieu de construire un nouveau fichier.
La prévisualisation utilise la composition réelle, pas une approximation statique. Elle montre des clips séquentiels, des sous-titres minutés, du texte animé et des dimensions de canevas sélectionnées ensemble, avec des contrôles de lecture familiers.
Pour l'édition de texte, la prévisualisation masque temporairement la couche de composition active tandis qu'un éditeur sur canevas gère l'interaction. La position stockée revient ensuite dans cette couche Remotion, sans créer de modèle visuel séparé.
Couches dynamiques, minutées à des images
Remotion nous offre une chronologie basée sur des images, donc chaque couche a une image de début et une durée plutôt qu'une estimation visuelle imprécise.
Les mots des sous-titres minutés sont regroupés en courts segments et convertis en images avant d'atteindre la composition. Chaque accroche, corps ou CTA a également une fenêtre temporelle définie, un style, une animation et une position. Le modèle ne rend que la couche pour l'image actuelle.
Cela fait d'une nouvelle variation un changement de données : Adstacker fournit une spécification de couche différente au même composant - le type d'approche composable et basée sur des modèles que nos équipes d'ingénierie de la technologie vidéo appliquent dans les pipelines média des clients.
Concevoir pour un rendu fidèle
Une prévisualisation dans le navigateur et un travailleur de rendu ne décodent pas la vidéo de la même manière. Notre modèle vérifie s'il est en mode rendu : dans le navigateur, il utilise le composant Video de Remotion pour que le Player puisse lire l'audio source ; lors du rendu, il utilise OffthreadVideo, qui est mieux adapté à l'extraction fiable d'images côté serveur.
Nous partageons également les polices et les cartes de style entre les deux contextes. Cela maintient l'enroulement des sous-titres, la taille du texte et le comportement de l'animation cohérents. Un canevas à ratio d'aspect et des superpositions limitées empêchent les couches de disparaître au-delà du bord.
Exemple réel : tester un accroche gagnant sans reconstruire chaque publicité
Imaginez une marque avec une démonstration de produit et deux appels à l'action testant trois accroches d'ouverture et deux styles de sous-titres. Le créateur peut prévisualiser une combinaison, y compris sa séquence, ses sous-titres et son texte animé, dans le ratio final.
Si l'équipe modifie le texte de l'accroche ou déplace un CTA, elle met à jour les données de la couche. Il n'y a pas de conception de prévisualisation séparée à recréer ; le pipeline de rendu utilise les mêmes règles de modèle pour l'exportation.
Les marketeurs peuvent tester plus d'idées tout en contrôlant les détails qui rendent une vidéo soignée.
Construire, prévisualiser et rendre avec confiance
Remotion aide Adstacker à traiter les publicités vidéo comme des compositions dynamiques et réutilisables. Le même modèle prend en charge l'exploration dans le navigateur et une sortie prévisible, tandis que les couches conscientes des images gardent les sous-titres, le texte et les clips synchronisés.
Créez votre prochain ensemble d'accroches, de sous-titres et de CTA dans Adstacker, prévisualisez les combinaisons au fur et à mesure que vous construisez, et exportez les variations prêtes à être testées.
Nous avons appliqué cette même discipline de prévisualisation-correspondance-exportation sur d'autres plateformes vidéo IA, y compris les outils d'édition de forme courte de Ssemble’s et le pipeline de génération piloté par IA de VideoCap, tous deux mis à l'échelle sur une infrastructure de rendu gérée via nos services d'infrastructure cloud.
Technologie utilisée : React · Next.js · Remotion · @remotion/player · AWS ECS render workers · FFmpeg
Lire plus de notre Ă©quipe
1. Service d'exportation vs. Pipeline d'éditeur vidéo
2. Construire un éditeur vidéo normal
3. Optimiser le logo de chaîne pour différentes résolutions vidéo
