Nouveau Robot pour incruster facilement des sous-titres en vidéo

Samuel Ogundipe

Rédacteur technique · Lagos, Nigeria · Afficher la bio

Si vous avez créé un produit, il y a de fortes chances que vous vouliez le faire connaître et que les gens commencent à l’utiliser. Et si vous vendez quelque chose aux consommateurs, diffuser des publicités vidéo sur des sites web est un moyen très efficace d’y parvenir.

Lorsqu’il s’agit de créer des publicités vidéo (et c’est bien sûr vrai de manière générale), les plus petits détails peuvent souvent faire la plus grande différence. Même un élément aussi anodin en apparence que l’ajout de sous-titres à votre vidéo pourrait marquer la frontière ténue entre une publicité réussie et une publicité ratée.

Au fil du temps, il a été démontré que les vidéos publicitaires sous-titrées affichent des taux d’engagement plus élevés⁠ que celles qui n’en ont pas. Comme les navigateurs lancent souvent les vidéos sans le son, les sous-titres sont un excellent moyen de capter l’attention du public et de faire passer votre message.

Il existe deux façons de sous-titrer une vidéo : les sous-titres fermés ou les sous-titres ouverts. « Fermés » signifie que les sous-titres ne sont pas visibles tant que le spectateur ne les a pas activés. Les sous-titres ouverts, dits aussi « incrustés », « codés en dur » ou « gravés », sont en revanche visibles par tous les spectateurs en permanence et ne peuvent pas être désactivés. Les sous-titres sont alors constitués des pixels de la vidéo elle-même.

Si les sous-titres fermés présentent de nombreux avantages (le spectateur peut choisir la langue qui lui convient ou décider de ne pas les afficher), les sous-titres ouverts ont aussi des cas d’usage intéressants. Celui sur lequel j’aimerais me concentrer ici est la diffusion de publicités dans un contexte où l’on ne peut pas toujours compter sur la compatibilité du lecteur, mais où l’on veut tout de même s’assurer que le message passe.

Incruster manuellement des sous-titres dans une vidéo peut vite devenir un vrai casse-tête, surtout si vous avez une grande archive de vidéos à sous-titrer. Heureusement, l’équipe de Transloadit est là pour vous ! Nous sommes fiers de vous présenter notre tout nouveau et rutilant Robot /video/subtitle.

Notre Robot /video/subtitle peut être combiné à d’autres Robots pour créer de puissants flux de travail adaptés à votre cas d’usage.

Incruster des sous-titres dans des vidéos

Pour incruster des sous-titres dans une vidéo, la première étape consiste à fournir à la fois la vidéo et le fichier de sous-titres à notre Robot. Il existe une multitude de façons de le faire ; je vais vous présenter les deux suivantes :

• Utiliser le Robot /http/import
• Utiliser le Robot /upload/handle

Utiliser le Robot /http/import

Voyons comment incruster des sous-titres dans une vidéo d’exemple à l’aide du Robot /http/import.

Pour commencer, il nous faut une vidéo et un fichier de sous-titres. Si vous n’avez pas encore de fichier de sous-titres, créez un fichier nommé subtitle.srt et ajoutez-y :

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! : )

Dans le bloc de code ci-dessus, nous avons créé des sous-titres qui s’affichent entre le début d’une vidéo et le repère des 22 secondes. Ensuite, nous allons rendre le fichier accessible via une URL publique, afin que notre Robot /http/import puisse l’importer.

Nous pouvons maintenant créer nos Assembly Instructions, en fournissant à la fois notre vidéo et notre fichier de sous-titres à incruster. Jetez un œil aux Assembly Instructions ci-dessous :

{
  "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"
    }
  }
}

Remplacez https://YOUR_DOMAIN/subtitle.srt par l’URL publique où vous avez hébergé votre fichier de sous-titres.

Dans le bloc de code ci-dessus, nous avons utilisé le Robot /http/import pour importer deux fichiers différents, puis déclaré un Step subtitled qui utilise le Robot /video/subtitle : dans ce Step, le paramètre use de ce Robot indique lequel des fichiers importés est la vidéo et lequel est le fichier de sous-titres. Ensuite, nous exportons les résultats vers notre bucket S3. Ici, s3_cred fait référence à l’ensemble d’informations d’identification de Template que j’ai enregistré auparavant en toute sécurité, et qui contient à la fois le nom du bucket et les clés d’accès.

Utiliser le Robot /upload/handle

Nous pourrions aussi utiliser le Robot /upload/handle pour transmettre la vidéo ou le fichier de sous-titres à Transloadit. Nous ne définissons pas plusieurs points de téléversement, car le Robot /upload/handle peut gérer plusieurs téléversements en une seule instance. Les fichiers constituent différents champs d’un téléversement multipart. C’est pourquoi, dans notre Step subtitled, nous devons définir quels champs contiennent notre vidéo et notre fichier de sous-titres.

Ici, nos Assembly Instructions devraient ressembler à ceci :

{
  "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 propriété fields de use sélectionne les champs de saisie selon leur attribut name. Pour que cela fonctionne, il faudrait donc ajouter un <input type="file" name="subtitle" /> à notre formulaire (et un autre avec name="video"). Dans le SDK Node.js, transmettez des fichiers nommés à createAssembly à l’aide de files: { video: './file.mp4', subtitle: './subtitle.srt' }, en plus de vos params.

Voir les résultats

Voici à quoi ressemblait notre vidéo avant l’incrustation des sous-titres :

Et la voici après l’incrustation des sous-titres :

Conclusion

Comme j’espère l’avoir montré dans cette introduction, incruster des sous-titres dans des fichiers vidéo n’a pas besoin d’être difficile ni chronophage avec notre Robot /video/subtitle. Avec Transloadit, vous n’avez jamais à vous soucier de FFmpeg, de la mise à l’échelle d’un parc de machines ou de l’intégration de l’incrustation des sous-titres à d’autres Jobs de traitement multimédia. Nous peaufinons cette partie depuis neuf ans, pour que vous puissiez vous concentrer sur votre activité.

Bonne incrustation ! 🔥 Et si vous avez des questions, des commentaires ou des préoccupations, n’hésitez pas à nous en faire part !