Sous-titres Remotion : SRT, synchronisation mot à mot et exportation

Imaginez une démonstration de produit hypothétique. La transcription est correcte, mais la mise en évidence porte sur une phrase entière et le sous-titre reste affiché pendant une pause. Ajouter des animations ne résoudra aucun de ces problèmes. Le premier exige des repères temporels par mot ; le second exige de décider quand le texte doit disparaître.

Choisissez le comportement des sous-titres avant leur style. Ce guide fondé sur la documentation traite des sous-titres fournis à Remotion et des formats de sortie. Son jeu de données et son plan d'inspection sont illustratifs et n'ont pas été exécutés. Il ne s'agit ni d'une application testée ni de preuves issues d'un déploiement d'Optijara.

Choisir des sous-titres par segment ou réellement synchronisés mot à mot

Utiliser le SRT quand l'affichage de segments entiers convient à la vidéo

La mise en évidence des mots doit avoir une utilité. Dans un enregistrement d'écran commenté, une expression complète peut laisser aux spectateurs le temps de lire pendant qu'ils regardent une commande s'exécuter.

La référence de parseSrt de Remotion décrit la conversion des segments SRT fournis en éléments Caption, renvoyés dans le tableau captions d'un objet. Chaque phrase de son exemple conserve l'intervalle de son segment. Le parseur ne détermine pas à quel moment chaque mot a été prononcé.

Utiliser des repères temporels par mot pour mettre chaque mot en évidence

Utilisez des données par mot lorsque la mise en évidence aide à suivre l'explication, par exemple quand la personne qui commente prononce un terme technique. Diviser une phrase en mots de durée égale produit un calendrier d'animation, pas une preuve des moments où ces mots sont prononcés.

La structure Caption accepte les deux granularités ; le type ne permet donc pas de trancher. Demandez au fournisseur si chaque intervalle correspond à un segment ou à un mot.

Pour situer l'utilisation de React dans la vidéo, l'exemple historique de vidéo programmée de Mux présente un processus de visualisation destiné aux développeurs. Il ne constitue pas une référence pour les API actuelles de sous-titrage ni pour la précision des sous-titres.

Importer des sous-titres sans perdre le texte ni les informations temporelles

Vérifier les champs Caption et la convention d'espacement

Lisez les champs documentés au sens strict. text contient le sous-titre, tandis que startMs et endMs délimitent son intervalle. timestampMs contient un horodatage unique ou null ; confidence contient un nombre de 0 à 1 ou null. Un horodatage représentatif ne peut pas remplacer une borne d'intervalle.

Conservez les espaces dans les données par mot, de préférence avant les mots suivants. Les utilitaires tiennent compte des espaces : supprimer ceux qui entourent chaque unité de texte peut éliminer les séparateurs nécessaires à la lisibilité. Respectez cette convention dans chaque adaptateur au lieu de compter sur l'utilitaire pour insérer des espaces.

La référence de Caption recommande white-space: pre pour les préserver lors du rendu. Les longues expressions techniques nécessitent toujours une vérification de la mise en page aux dimensions prévues pour la vidéo. La préservation des espaces ne garantit pas que le texte tienne dans l'espace disponible.

Gérer les échecs de chargement et la validation selon la version

Le guide d'importation utilise staticFile() pour référencer un SRT dans public, récupère son texte et le transmet à parseSrt. Son mécanisme asynchrone suspend le rendu avec useDelayRender(), appelle continueRender(handle) après un chargement réussi et appelle cancelRender(error) en cas d'échec.

Vérifiez response.ok avant de lire la réponse, puis validez la présence des sous-titres attendus. MDN explique que fetch ne rejette pas une requête sur la seule base d'un statut d'erreur HTTP. Une requête résolue peut tout de même fournir une réponse inutilisable pour les sous-titres. Faites également aboutir les échecs d'analyse et de validation à une annulation, plutôt que de laisser reprendre le rendu avec des sous-titres vides par erreur.

La référence du parseur documente strict: true à partir de la version 4.0.530. La valeur par défaut est false, pour une analyse tolérante. Le mode strict rejette les fichiers mal formés ou vides en indiquant le contexte du segment et de la ligne. Vérifiez votre version installée avant de l'ajouter.

La valeur confidence: 1 de l'exemple provient du parseur. Ce n'est pas un score mesuré de précision de la reconnaissance vocale. Le texte doit encore être vérifié à l'écoute. De même, pageBreakAfter, disponible à partir de 4.0.517, impose un saut sans modifier les repères temporels, comme l'explique la référence de Caption.

La méthode Segment, Horloge, Coupe pour la visibilité des sous-titres

Segment, Horloge, Coupe est une méthode éditoriale originale proposée dans cet article. Elle sépare le regroupement, la correspondance entre les chronologies et la visibilité. Ce n'est ni une fonctionnalité de Remotion ni un cadre de performance validé.

Segment : regrouper le texte sans inventer d'alignement

createTikTokStyleCaptions transforme des données correctement espacées en pages. combineTokensWithinMilliseconds contrôle la durée du regroupement. Dès qu'une page dépasse cette durée, le sous-titre suivant qui commence par un espace ouvre une nouvelle page. Ce paramètre ne peut ni fournir des repères temporels par mot manquants ni détecter le silence dans le son ; il ne contrôle pas non plus un nombre exact de mots.

Ce jeu de données typé montre la convention d'espacement. Ses unités de texte en minuscules nomment les étapes de la méthode, et ses intervalles sont inventés à des fins pédagogiques. Le fragment n'a pas été exécuté et ne constitue ni une application complète ni une transcription réelle.

import type {Caption} from '@remotion/captions';

const illustrativeCaptions: Caption[] = [
  {text: 'cue', startMs: 1000, endMs: 1300, timestampMs: null, confidence: null},
  {text: ' clock', startMs: 1300, endMs: 1500, timestampMs: null, confidence: null},
  {text: ' cut', startMs: 1500, endMs: 1900, timestampMs: null, confidence: null},
];

Les espaces initiaux comptent. Les intervalles distincts aussi. La mise en forme préserve les informations fournies ; elle n'établit pas l'exactitude des repères temporels.

Horloge : comparer les horodatages dans le même système de coordonnées

Les unités de texte des pages portent des valeurs absolues fromMs et toMs dans la chronologie des sous-titres fournis. Le guide d'affichage les compare à un temps calculé à partir des images. Avant de copier cet exemple, définissez le point de départ de votre chronologie de sous-titres.

Pour une Sequence simple qui applique uniquement un décalage, useCurrentFrame() est décalé de from, et les séquences imbriquées cumulent leurs décalages, selon la référence de Sequence. Le rognage, les changements de vitesse de lecture, les boucles ou les arrêts sur image exigent leur propre correspondance temporelle. Convertissez une seule fois l'image locale obtenue en temps des sous-titres. Appliquer le décalage deux fois crée une nouvelle erreur de synchronisation.

Prenons un calcul illustratif à 30 images par seconde. Supposons que la séquence commence à l'image 30 de la composition, que les sous-titres utilisent le temps de la composition, que la vitesse de lecture reste inchangée et qu'il n'y ait ni imbrication, ni rognage, ni boucle, ni arrêt sur image. L'image locale 0 correspond à 1000 ms. L'image locale 8 correspond à environ 1266,67 ms, et l'image locale 9 à 1300 ms. Avec une comparaison qui inclut le début et exclut la fin, le premier mot du jeu de données est inactif à cette dernière position. Il s'agit de résultats arithmétiques, pas d'une sortie observée de Remotion.

Pour les bornes situées entre deux images, la convention d'inspection proposée arrondit à l'entier supérieur le nombre de millisecondes multiplié par la fréquence d'images et divisé par 1000. Consignez cette convention. Recalculez la correspondance chaque fois qu'un montage modifie la chronologie source.

Le guide d'affichage utilise Sequence, bien que la référence actuelle ne recommande plus son utilisation directe pour du nouveau code. Les composants plus récents peuvent exposer directement des propriétés temporelles ou utiliser Interactive.withSchema(). Vérifiez la compatibilité de votre version avant de choisir l'une ou l'autre approche.

Coupe : décider de ce qui reste visible pendant les montages et les pauses

Un saut de page ne signifie pas que le texte disparaît. La référence du regroupement documente breakOnSilenceAfterMilliseconds à partir de 4.0.514. Ce paramètre compare les écarts entre les horodatages des sous-titres, pas le son. La page précédente dure jusqu'au début de la suivante, pause comprise.

Décidez si cette page doit rester affichée après sa dernière unité de texte prononcée. Fixez des bornes de rendu correspondant au comportement choisi, en tenant compte des coupes entre scènes et de la fin de la composition. Le guide d'affichage applique son propre plafond de durée ; le regroupement seul ne prend pas cette décision.

Dans la démonstration hypothétique, repérez la phrase prononcée et l'action associée à l'écran. Si la personne qui commente nomme un bouton alors que le curseur pointe ailleurs, examinez l'image et le son ensemble. Corrigez la coupe ou les repères temporels, ou gardez l'expression entière visible. Ne modifiez pas les instructions prononcées pour les faire correspondre à une version ultérieure de l'interface.

Conservez les sous-titres fournis intacts et modifiez une copie distincte. Indiquez si les repères temporels se rapportent à l'enregistrement ou à la composition finale. Documentez la correspondance après avoir supprimé de la parole ou inséré une capture d'écran. Notez pourquoi chaque expression contestée a été corrigée ; une note de correction ne prouve pas que la lecture a été inspectée.

Avant d'ajouter d'autres animations, suivez cette liste de vérification :

• Consignez l'origine de la chronologie des sous-titres et toute correspondance liée au montage.
• Vérifiez si les données d'entrée contiennent des repères temporels par segment ou par mot ; conservez leurs espaces.
• Choisissez la durée de regroupement indépendamment de la mise en évidence.
• Convertissez le temps des images en temps des sous-titres exactement une fois.
• Décidez quand les sous-titres disparaissent pendant les pauses et aux coupes, y compris pour le dernier segment.
• Choisissez le format de sortie destiné à la plateforme cible et planifiez les inspections aux bornes.

{"playbook":"cue-clock-cut","cue":"preserve-granularity-and-spaces","clock":"map-caption-time-once","cut":"bound-visibility","inspectionStatus":"proposed-unexecuted"}

Les erreurs des équipes : défauts de sous-titrage et corrections ciblées

Distinguer les problèmes d'entrée de ceux de regroupement et d'horloge

Corrigez l'étape responsable du symptôme. Changer de police ne peut pas créer un alignement mot à mot. Ajuster le regroupement ne peut pas annuler un décalage appliqué deux fois.

Le ticket GitHub 10476 illustre cette confusion dans un contexte historique. Son auteur utilisait @remotion/captions@4.0.441. La personne chargée de la maintenance a confirmé que la prise en compte des espaces était un comportement établi, reconnu des bogues distincts et fermé le ticket comme terminé. Les noms d'options qui y étaient proposés ne sont pas des instructions pour l'API actuelle, et les défauts clôturés ne doivent pas être présentés comme non résolus.

Utiliser un plan proposé de vérification aux bornes plutôt que se fier à l'aperçu

Inspectez les positions voisines de bornes représentatives. Pour l'exemple arithmétique, les vérifications proposées portent sur les images 29, 30, 38 et 39 de la composition. Elles couvrent l'apparition et la disparition du premier mot dans ces hypothèses. Aucun test de rendu n'a été effectué.

Ce plan ne contient aucun résultat mesuré. Répétez les vérifications après les montages, même si un aperçu précédent semblait correct. Les informations sur les locuteurs ne peuvent pas non plus remplacer les repères temporels par mot. Le guide de passage des locuteurs à la transcription explique cette distinction pour la diarisation et l'ASR. Une piste d'activité ne fournit pas de mots alignés.

Choisir des sous-titres incrustés, un SRT séparé ou les deux

Intégrer les sous-titres visibles au rendu vidéo

Le guide d'exportation décrit les sous-titres incrustés comme des composants de sous-titrage rendus dans la vidéo. Leur apparence fait partie des pixels. Vérifiez si ce format convient à la destination et laisse visibles les contenus importants à l'écran.

Une piste de sous-titres sélectionnable est un livrable distinct. Si vous avez besoin d'une vidéo mise en forme et de sous-titres gérés séparément, prévoyez les deux sorties.

Sérialiser les segments et produire un fichier de sous-titres distinct

Le même guide documente serializeSrt() avec Artifact pour produire un fichier de sous-titres pendant le rendu. Aucun fichier de ce type n'a été généré pour cet article.

La référence de la sérialisation définit lines comme un tableau à deux dimensions : les éléments du tableau externe sont des segments, et les éléments internes se concatènent sans insertion d'espaces. Chaque segment commence au startMs de son premier élément et se termine au endMs de son dernier élément. Conservez l'ordre et les séparateurs.

Un saut de ligne dans text crée des lignes visuelles au sein d'un même segment. Sur les versions compatibles, pageBreakAfter ouvre un autre segment. Aucun des deux ne crée d'alignement sur la parole. Lorsque vous reconvertissez en sous-titres les unités de texte regroupées en pages, conservez leurs intervalles d'origine ; la durée d'affichage d'une page ne doit pas remplacer la fin du dernier mot.

Vérifiez le SRT produit avec la vidéo sur la destination prévue. La sérialisation seule ne dit rien de la réussite du téléversement ni de la prise en charge de la lecture des sous-titres.

Limites : des sous-titres lisibles exigent encore une vérification du son et des sorties

La qualité de la synchronisation dépend des données fournies et des montages

Aucune installation de Remotion, transcription, exécution du jeu de données ou opération de rendu n'a été effectuée pour ce guide. Aucun appel d'API payant ni aucune lecture de média privé n'a eu lieu. Les exemples numériques sont uniquement arithmétiques.

Comparez la transcription au son réel, en prêtant attention aux noms techniques et aux passages montés. Le banc d'essai multilingue d'IA vocale propose un exemple connexe, propre à certaines langues, de vérification des noms et de l'utilité du processus. Il ne constitue pas ici une recommandation de fournisseur.

Confidentialité, mise en page et accessibilité exigent des décisions distinctes

Avant de partager du son avec un service externe, vérifiez l'autorisation et les modalités documentées de traitement des données. Prévoyez un budget pour l'adaptation et la vérification sans supposer d'économies. Vérifiez les longues expressions aux dimensions prévues, surtout lorsque les sous-titres risquent de masquer l'interface présentée.

Des sous-titres attrayants n'établissent pas la conformité en matière d'accessibilité. Vérifiez le texte et la synchronisation, incluez les informations pertinentes autres que la parole et évaluez la lisibilité ainsi que le format de diffusion. Pour la vidéo assistée par l'IA, la provenance des contenus visuels répond à une autre question de preuve. Conservez les traces des sources et des montages séparément de la vérification du son, chaque élément ne devant étayer que ce qu'il établit réellement.