Subtítulos en Remotion: SRT, tiempos por palabra y exportación de subtítulos

Imagina una demostración hipotética de un producto. La transcripción es correcta, pero el resaltado abarca una frase entera y el subtítulo permanece durante una pausa. Añadir más animación no resolverá ninguno de los dos problemas. Uno requiere tiempos por palabra; el otro exige decidir cuándo desaparece el texto.

Elige el comportamiento de los subtítulos antes que su estilo. Esta guía, basada en la documentación, trata sobre los datos de subtítulos proporcionados a Remotion y las salidas de subtítulos. Sus datos de ejemplo y su plan de inspección son ilustrativos y no se han ejecutado; no constituyen una aplicación probada ni pruebas de una implementación de Optijara.

Elige subtítulos por segmento o subtítulos con tiempos reales por palabra

Usa SRT cuando mostrar segmentos completos encaje con el vídeo

El resaltado de palabras debe tener una razón de ser. En una grabación de pantalla narrada, una frase completa puede dar a los espectadores tiempo para leer mientras observan cómo se ejecuta un comando.

La referencia de parseSrt de Remotion convierte los segmentos SRT proporcionados en elementos Caption, devueltos en el array captions de un objeto. Cada frase de su ejemplo conserva el intervalo de su segmento. El analizador no determina cuándo se pronunció cada palabra.

Usa tiempos por palabra cuando haya que resaltar palabras individuales

Usa datos por palabra cuando el resaltado ayude a seguir la explicación, por ejemplo, cuando el narrador pronuncia un término técnico. Dividir una oración en palabras de igual duración produce una programación de animación, no pruebas sobre el habla.

La estructura Caption admite ambas granularidades, por lo que el tipo no permite resolver esa cuestión. Pregunta a quien proporciona los datos si cada intervalo corresponde a un segmento o a una palabra.

Para contextualizar el uso de React en vídeo, el ejemplo histórico de vídeo programático de Mux muestra un flujo de visualización orientado a desarrolladores. No es una referencia sobre las API actuales de subtítulos ni sobre su precisión.

Importa subtítulos sin perder información textual o temporal

Comprueba los campos de Caption y la convención de espacios en blanco

Interpreta literalmente los campos documentados. text contiene el texto del subtítulo, mientras que startMs y endMs delimitan su intervalo. timestampMs contiene una única marca de tiempo o null; confidence contiene un número entre 0 y 1 o null. Una marca de tiempo representativa no puede sustituir al límite de un intervalo.

Conserva los espacios en los datos por palabra, preferiblemente antes de las palabras siguientes. Las utilidades son sensibles a los espacios en blanco: recortar cada token puede eliminar los separadores necesarios para que el texto sea legible. Mantén esa convención en cualquier adaptador, en lugar de esperar que la utilidad inserte espacios.

La referencia de Caption recomienda white-space: pre para conservarlos durante la renderización. Las frases técnicas largas siguen necesitando una comprobación de la disposición con las dimensiones previstas del vídeo. Conservar los espacios en blanco no significa que el texto quepa.

Gestiona los fallos de carga y la validación que depende de la versión

La guía de importación usa staticFile() para referenciar un SRT en public, obtiene su texto y lo pasa a parseSrt. Su patrón asíncrono mantiene la renderización en espera con useDelayRender(), llama a continueRender(handle) cuando la carga se completa correctamente y a cancelRender(error) si falla.

Comprueba response.ok antes de leer la respuesta y valida después que hayan llegado los subtítulos esperados. MDN explica que fetch no rechaza una petición únicamente por un estado de error HTTP. Una petición resuelta puede seguir dando una respuesta de subtítulos inutilizable. Canaliza también los fallos de análisis y validación hacia la cancelación, en lugar de permitir que continúe una renderización con subtítulos vacíos por accidente.

La referencia del analizador documenta strict: true a partir de la versión 4.0.530. El valor predeterminado es false, para un análisis tolerante. El modo estricto rechaza archivos mal formados o vacíos e incluye contexto sobre el segmento y la línea. Comprueba la versión instalada antes de añadirlo.

El valor confidence: 1 del ejemplo procede del analizador. No es una puntuación medida de precisión del reconocimiento de voz. El texto aún requiere una revisión con el audio. Del mismo modo, pageBreakAfter, disponible desde 4.0.517, fuerza un salto sin cambiar los tiempos, como explica la referencia de Caption.

El método Segmento, Reloj, Corte para la visibilidad de los subtítulos

Segmento, Reloj, Corte es el método editorial original de este artículo. Separa la agrupación de la correspondencia con la línea de tiempo y de la visibilidad. No es una función de Remotion ni un marco de rendimiento validado.

Segmento: agrupa el texto sin inventar la alineación

createTikTokStyleCaptions convierte los datos con espacios correctos en páginas. combineTokensWithinMilliseconds controla la duración de la agrupación. Una vez que una página supera esa duración, el siguiente subtítulo que comienza con un espacio inicia una nueva página. Este ajuste no puede proporcionar tiempos por palabra que faltan ni detectar silencios en el audio; tampoco es un control exacto del número de palabras.

Estos datos de ejemplo tipados muestran la convención de espacios. Sus tokens en minúsculas nombran las etapas del método y sus intervalos se han inventado con fines didácticos. El fragmento no se ha ejecutado y no es una aplicación completa ni una transcripción real.

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},
];

Los espacios iniciales importan. También los intervalos separados. El formato conserva la información proporcionada; no demuestra que los tiempos sean correctos.

Reloj: compara las marcas de tiempo en el mismo sistema de coordenadas

Los tokens de las páginas contienen valores absolutos fromMs y toMs en la línea de tiempo de los subtítulos proporcionados. La guía de visualización los compara con el tiempo derivado de los fotogramas. Antes de copiar ese ejemplo, define dónde comienza la línea de tiempo de tus subtítulos.

En una Sequence sencilla con un único desplazamiento temporal, useCurrentFrame() se desplaza según from, y los desplazamientos de las secuencias anidadas se acumulan, de acuerdo con la referencia de Sequence. Los recortes, los cambios de velocidad de reproducción, los bucles o las congelaciones requieren su propia correspondencia temporal. Convierte una sola vez el fotograma local resultante al tiempo de los subtítulos. Aplicar dos veces el desplazamiento crea un nuevo error de temporización.

Considera un cálculo ilustrativo a 30 fps. Supón que la secuencia comienza en el fotograma 30 de la composición, que los subtítulos usan el tiempo de la composición, que la velocidad de reproducción no cambia y que no hay anidación, recortes, bucles ni congelaciones. El fotograma local 0 corresponde a 1000 ms. El fotograma local 8 corresponde a unos 1266,67 ms y el fotograma local 9 a 1300 ms. Con una comparación que incluye el inicio y excluye el final, la primera palabra de los datos de ejemplo está inactiva en la última posición. Son resultados aritméticos, no una salida observada de Remotion.

Para los límites entre fotogramas, la convención de inspección propuesta redondea hacia arriba el resultado de multiplicar los milisegundos por los fps y dividirlo entre 1000. Registra la convención. Recalcula la correspondencia cada vez que una edición cambie la línea de tiempo de origen.

La guía de visualización usa Sequence, aunque la referencia actual ya no recomienda su uso directo para código nuevo. Los componentes más recientes pueden exponer propiedades de temporización directamente o usar Interactive.withSchema(). Comprueba la compatibilidad de la versión antes de elegir cualquiera de los dos patrones.

Corte: decide qué permanece visible durante las ediciones y las pausas

Un salto de página no significa que el texto desaparezca. La referencia de agrupación documenta breakOnSilenceAfterMilliseconds desde 4.0.514. Compara los huecos entre las marcas de tiempo de los subtítulos, no el audio. La página anterior dura hasta que comienza la siguiente, incluida la pausa.

Elige si esa página debe permanecer después de su último token hablado. Establece límites de renderización para el comportamiento elegido, incluidos los cortes de escena y el final de la composición. La guía de visualización aplica su propio límite de duración; la agrupación por sí sola no toma esta decisión.

En la demostración hipotética, marca la frase pronunciada y su acción en pantalla. Si el narrador nombra un botón mientras el cursor apunta a otra parte, revisa conjuntamente la imagen y el audio. Corrige el corte o los tiempos, o mantén visible la frase completa. No cambies las instrucciones habladas para hacerlas coincidir con una revisión posterior de la interfaz.

Conserva intactos los subtítulos proporcionados y edita una copia aparte. Registra si los tiempos se refieren a la grabación o a la composición final. Documenta la correspondencia después de eliminar habla o insertar una captura de pantalla. Anota por qué se corrigió cada frase dudosa; una nota de corrección no demuestra que se haya inspeccionado la reproducción.

Antes de añadir más animación, repasa esta lista:

• Registra el origen de la línea de tiempo de los subtítulos y cualquier correspondencia derivada de la edición.
• Comprueba si los datos de entrada tienen tiempos por segmento o por palabra; conserva sus espacios.
• Elige la duración de la agrupación independientemente del resaltado.
• Convierte el tiempo de los fotogramas al de los subtítulos exactamente una vez.
• Decide cuándo desaparecen los subtítulos durante las pausas y en los cortes, incluido el segmento final.
• Elige la salida para el destino y planifica las inspecciones de los límites.

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

Errores de los equipos: defectos en los subtítulos y correcciones específicas

Separa los problemas de entrada de los de agrupación y reloj

Corrige la etapa a la que corresponde el síntoma. Cambiar una fuente no puede crear una alineación por palabra. Ajustar la agrupación no deshará un desplazamiento aplicado dos veces.

La incidencia 10476 de GitHub ilustra esa confusión en el pasado. Quien la notificó usaba @remotion/captions@4.0.441. El responsable del mantenimiento confirmó la sensibilidad a los espacios en blanco como comportamiento establecido, reconoció errores independientes y cerró la incidencia como completada. Los nombres de opciones que allí se propusieron no son instrucciones sobre la API actual, y los defectos ya cerrados no deben presentarse como pendientes de resolver.

Usa un plan propuesto de comprobación de límites en lugar de confiar en la vista previa

Inspecciona posiciones vecinas alrededor de límites representativos. Para el ejemplo aritmético, los fotogramas de la composición propuestos para comprobar son 29, 30, 38 y 39. Cubren la entrada y la salida de la primera palabra bajo esas suposiciones. No se realizó ninguna prueba de renderización.

Este plan no contiene resultados medidos. Repite las comprobaciones después de editar, aunque una vista previa anterior pareciera correcta. La información sobre los hablantes tampoco puede sustituir a los tiempos por palabra. La guía del traspaso de hablantes a la transcripción explica la distinción entre diarización y ASR. Una pista de actividad no equivale a palabras alineadas.

Elige subtítulos incrustados, un SRT independiente o ambos

Renderiza subtítulos visibles dentro del vídeo

La guía de exportación describe los subtítulos incrustados como componentes de subtítulos renderizados dentro del vídeo. Su apariencia pasa a formar parte de los píxeles. Comprueba si eso se adapta al destino y permite que el contenido importante de la pantalla siga siendo visible.

Una pista de subtítulos seleccionable es un entregable independiente. Si necesitas un vídeo con estilo y subtítulos gestionados por separado, planifica ambas salidas.

Serializa los segmentos y emite un archivo de subtítulos independiente

La misma guía documenta serializeSrt() junto con Artifact para emitir un archivo de subtítulos durante la renderización. Para este artículo no se generó ninguno.

La referencia de serialización define lines como un array bidimensional: los elementos externos son segmentos y los internos se concatenan sin insertar espacios. Cada segmento comienza en el startMs de su primer elemento y termina en el endMs del último. Mantén intactos el orden y los delimitadores.

Un salto de línea en text crea líneas visuales dentro de un mismo segmento. En las versiones compatibles, pageBreakAfter inicia otro segmento. Ninguno de los dos crea alineación con el habla. Al convertir los tokens de páginas agrupadas de nuevo en subtítulos, conserva sus intervalos originales; la duración de visualización de una página no debe sustituir al final de la última palabra.

Revisa el SRT emitido junto con el vídeo en el destino previsto. La serialización por sí sola no dice nada sobre el éxito de la subida ni sobre la compatibilidad con la reproducción de subtítulos.

Limitaciones: los subtítulos legibles aún necesitan una revisión del audio y de la salida

La calidad de la temporización depende de los datos proporcionados y de las ediciones

Para esta guía no se instaló Remotion, no se transcribió, no se ejecutaron los datos de ejemplo ni se renderizó. No hubo llamadas a API de pago ni lectura de contenido multimedia privado. Los ejemplos numéricos son únicamente aritméticos.

Compara la transcripción con el audio real, prestando atención a los nombres técnicos y a los pasajes editados. El banco de pruebas de IA de voz multilingüe ofrece un ejemplo relacionado, específico de un idioma, sobre la comprobación de nombres y la utilidad del flujo de trabajo. Aquí no constituye una recomendación de proveedor.

La privacidad, la disposición y la accesibilidad requieren decisiones independientes

Antes de compartir audio con un servicio externo, comprueba los permisos y su tratamiento documentado de los datos. Prevé un presupuesto para la adaptación y la revisión sin dar por hecho que habrá ahorro. Comprueba las frases largas con las dimensiones previstas, especialmente donde los subtítulos puedan tapar la interfaz de la demostración.

Unos subtítulos atractivos no demuestran conformidad en materia de accesibilidad. Revisa el texto y los tiempos, incluye la información pertinente que no sea habla y evalúa la legibilidad y el formato de entrega. En el vídeo asistido por IA, la procedencia del contenido visual responde a una cuestión probatoria diferente. Mantén los registros de origen y edición separados de la revisión del audio, de modo que cada uno respalde únicamente lo que realmente demuestra.