Incrusta subtítulos en videos fácilmente con nuestro nuevo Robot

Samuel Ogundipe

Redactor técnico · Lagos, Nigeria · Mostrar bio

Si creaste un producto, lo más probable es que quieras que la gente lo conozca y empiece a usarlo también. Y si tu negocio consiste en vender algo a los consumidores, colocar anuncios en video en sitios web es una manera muy eficaz de lograrlo.

Cuando se trata de crear anuncios en video (y esto, por supuesto, vale en general), los detalles más pequeños suelen marcar la mayor diferencia. Incluso algo en apariencia tan poco importante como agregar subtítulos a tu video podría ser esa delgada línea entre un anuncio exitoso y uno fallido.

Con el tiempo se ha demostrado que los videos publicitarios con subtítulos tienen tasas de interacción más altas⁠ en comparación con los que no los tienen. Como los navegadores suelen iniciar los videos en silencio, los subtítulos son una excelente manera de captar la atención del público y transmitir tu mensaje.

Ahora bien, hay dos maneras de subtitular un video: puedes usar Closed Captions u Open Captions. «Closed» indica que no son visibles hasta que el espectador los activa. Los Open Captions, en cambio, también llamados «burned-in», «hard-coded» o «baked on», son visibles para todos los espectadores en todo momento y no se pueden desactivar. Los subtítulos están formados por píxeles del propio video.

Si bien los Closed Captions tienen muchas ventajas (el espectador puede seleccionar el idioma que le corresponde o decidir no usarlos), también hay casos de uso interesantes para los Open Captions. Uno en particular en el que quiero centrarme aquí es la publicación de anuncios en un escenario en el que no siempre puedes confiar en la compatibilidad del reproductor, pero aun así quieres asegurarte de que tu mensaje llegue.

Incrustar subtítulos en un video manualmente puede ser un gran dolor de cabeza, sobre todo si tienes un gran catálogo de videos que subtitular. Por suerte, ¡el equipo de Transloadit te cubre las espaldas! Nos enorgullece presentarte nuestro flamante y reluciente Robot /video/subtitle.

Nuestro Robot /video/subtitle se puede usar en combinación con otros Robots para crear flujos de trabajo potentes y adaptados a tu caso de uso.

Incrustar subtítulos en videos

Si quieres incrustar subtítulos en un video, el primer paso sería proporcionar tanto el video como el archivo de subtítulos a nuestro Robot. Aunque hay muchísimas maneras de hacerlo, demostraré las dos siguientes:

• Usar el Robot /http/import
• Usar el Robot /upload/handle

Usar el Robot /http/import

Veamos cómo incrustar subtítulos en un video de ejemplo con el Robot /http/import.

Para empezar, necesitamos un video y un archivo de subtítulos. Si aún no tienes un archivo de subtítulos, crea un archivo llamado subtitle.srt y agrega:

1
00:00:00,000 --> 00:00:22,000
Hi! : )
These subtitles were 'burned' into this video,
by supplying an SRT and an MP4 file to our /video/subtitle Robot.
Kind regards from Transloadit! : )

En el bloque de código anterior, creamos subtítulos que se mostrarán entre el comienzo de un video y la marca de los 22 segundos. A continuación, haremos que el archivo esté disponible mediante una URL pública, para que nuestro Robot /http/import pueda importarlo.

Ahora podemos crear nuestras Assembly Instructions, proporcionando tanto nuestro archivo de video como el de subtítulos que se van a incrustar. Echa un vistazo a las Assembly Instructions de abajo:

{
  "steps": {
    "mp4_imported": {
      "robot": "/http/import",
      "url": "https://transloadit.com/assets/video/blog/2018-11-09-intro-to-the-subtitle-bot-no-sub.mp4"
    },
    "srt_imported": {
      "robot": "/http/import",
      "url": "https://YOUR_DOMAIN/subtitle.srt"
    },
    "subtitled": {
      "robot": "/video/subtitle",
      "preset": "ipad-high",
      "use": {
        "steps": [
          { "name": "mp4_imported", "as": "video" },
          { "name": "srt_imported", "as": "subtitles" }
        ]
      }
    },
    "exported": {
      "use": ["subtitled"],
      "robot": "/s3/store",
      "credentials": "s3_cred"
    }
  }
}

Reemplaza https://YOUR_DOMAIN/subtitle.srt por la URL pública donde alojaste tu archivo de subtítulos.

En el bloque de código anterior, usamos el Robot /http/import para importar dos archivos distintos y luego declaramos un Step subtitled, donde especificamos cuál de los archivos importados es el video y cuál es el archivo de subtítulos, es decir, el Robot /video/subtitle y su parámetro use. A continuación, exportamos los resultados a nuestro bucket de S3. El s3_cred hace referencia a la credencial de Template que guardé de forma segura previamente, y contiene tanto el nombre del bucket como las claves de acceso.

Usar el Robot /upload/handle

Como alternativa, podríamos usar el Robot /upload/handle para llevar el video o el archivo de subtítulos a Transloadit. No definimos varios puntos de subida, ya que el Robot /upload/handle puede gestionar varias subidas en una sola instancia. Los archivos forman campos distintos en una subida multipart. Por eso, en nuestro Step subtitled, necesitamos definir qué campos contienen nuestro video y nuestro archivo de subtítulos.

Aquí, nuestras Assembly Instructions deberían verse así:

{
  "steps": {
    ":original": {
      "robot": "/upload/handle"
    },
    "subtitled": {
      "robot": "/video/subtitle",
      "preset": "ipad-high",
      "use": {
        "steps": [
          { "name": ":original", "fields": "video", "as": "video" },
          { "name": ":original", "fields": "subtitle", "as": "subtitles" }
        ]
      }
    },
    "exported": {
      "use": ["subtitled"],
      "robot": "/s3/store",
      "credentials": "s3_cred"
    }
  }
}

La propiedad fields dentro de use selecciona los campos de entrada por su atributo name. Por lo tanto, para que esto funcione, tendríamos que agregar un <input type="file" name="subtitle" /> a nuestro formulario (y otro con name="video"). En el SDK de Node.js, pasa archivos con nombre a createAssembly usando files: { video: './file.mp4', subtitle: './subtitle.srt' } junto con tu params.

Ver los resultados

Así se veía nuestro video antes de incrustarle los subtítulos:

Y así quedó después de incrustar los subtítulos:

Conclusión

Como espero haber mostrado en esta introducción, incrustar subtítulos en archivos de video no tiene por qué ser difícil ni llevar mucho tiempo si usas nuestro Robot /video/subtitle. Con Transloadit, nunca tienes que preocuparte por lidiar con FFmpeg, escalar una flota de máquinas o integrarlo con otros trabajos de procesamiento de medios. Llevamos los últimos nueve años perfeccionando esa parte, para que tú puedas concentrarte en tu negocio.

¡Feliz incrustación de subtítulos! 🔥 Y si tienes preguntas, comentarios o inquietudes, ¡háznoslo saber!