Zuletzt aktualisiert: 10. September

Untertitel mit unserem neuen Robot einfach in Videos einbrennen

Samuel Ogundipe

Technischer Redakteur · Lagos, Nigeria ·

Wenn Sie ein Produkt entwickelt haben, möchten Sie wahrscheinlich, dass die Leute davon erfahren und es auch nutzen. Und wenn Sie etwas an Verbraucher verkaufen, sind Videoanzeigen auf Websites ein sehr wirkungsvoller Weg dorthin.

Bei der Produktion von Videoanzeigen – und das gilt natürlich auch ganz allgemein – machen oft die kleinsten Dinge den größten Unterschied. Selbst etwas scheinbar so Nebensächliches wie das Hinzufügen von Untertiteln zu Ihrem Video kann der schmale Grat zwischen einer erfolgreichen und einer gescheiterten Werbung sein.

Im Laufe der Zeit hat sich gezeigt, dass Werbevideos mit Untertiteln höhere Interaktionsraten erzielen als solche ohne. Da Browser Videos häufig stummgeschaltet starten, sind Untertitel eine hervorragende Möglichkeit, die Aufmerksamkeit des Publikums zu gewinnen und Ihre Botschaft zu vermitteln.

Nun gibt es zwei Wege, ein Video mit Untertiteln zu versehen: Sie können Closed Captions oder Open Captions verwenden. Closed bedeutet, dass die Untertitel erst sichtbar sind, wenn der Betrachter sie aktiviert. Open Captions, also „eingebrannte“, „hart codierte“ oder „ins Bild gebrannte“ Untertitel, sind dagegen für alle Betrachter jederzeit sichtbar und lassen sich nicht deaktivieren. Die Untertitel bestehen aus Pixeln im eigentlichen Video selbst.

Closed Captions haben zwar viele Vorteile (der Betrachter kann die passende Sprache wählen oder darauf verzichten), doch auch für Open Captions gibt es interessante Anwendungsfälle. Auf einen davon möchte ich hier besonders eingehen: das Ausspielen von Werbung in einem Szenario, in dem Sie sich nicht immer auf die Kompatibilität des Players verlassen können, Ihre Botschaft aber dennoch sicher ankommen soll.

Untertitel manuell in ein Video einzubrennen, kann sehr mühsam sein, besonders wenn Sie ein großes Archiv an Videos mit Untertiteln versehen müssen. Zum Glück steht Ihnen das Team von Transloadit zur Seite! Wir freuen uns, Ihnen unseren brandneuen, glänzenden Robot /video/subtitle vorzustellen.

Unser Robot /video/subtitle lässt sich mit anderen Robots kombinieren, um leistungsstarke Workflows zu erstellen, die genau auf Ihren Anwendungsfall zugeschnitten sind.

Der Subtitle Robot, der einem Video Untertitel hinzufügt.

Untertitel in Videos einbrennen

Wenn Sie Untertitel in ein Video einbrennen möchten, besteht der erste Schritt darin, unserem Robot sowohl das Video als auch die Untertiteldatei bereitzustellen. Dafür gibt es zahlreiche Wege; ich zeige Ihnen die folgenden zwei:

Mit dem Robot /http/import
Mit dem Robot /upload/handle

Den /http/import-Robot verwenden

Sehen wir uns an, wie Sie mit dem Robot /http/import Untertitel in ein Beispielvideo einbrennen.

Zum Einstieg benötigen wir ein Video und eine Untertiteldatei. Falls Sie noch keine Untertiteldatei haben, erstellen Sie eine Datei namens subtitle.srt und fügen Sie Folgendes hinzu:

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

Im obigen Codeblock haben wir Untertitel erstellt, die zwischen dem Beginn eines Videos und der 22-Sekunden-Marke laufen. Als Nächstes stellen wir die Datei über eine öffentliche URL bereit, damit unser Robot /http/import sie importieren kann.

Jetzt können wir unsere Assembly Instructions erstellen und dabei sowohl unsere Video- als auch unsere Untertiteldateien zum Einbrennen übergeben. Werfen Sie einen Blick auf die Assembly Instructions unten:

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

Ersetzen Sie https://YOUR_DOMAIN/subtitle.srt durch die öffentliche URL, unter der Sie Ihre Untertiteldatei bereitgestellt haben.

Im obigen Codeblock haben wir mit dem Robot /http/import zwei verschiedene Dateien importiert und anschließend einen Step namens subtitled deklariert, in dem wir angegeben haben, welche der importierten Dateien das Video und welche die Untertiteldatei ist, also welche Datei der Robot /video/subtitle im Parameter use erhält. Als Nächstes exportieren wir die Ergebnisse in unseren S3-Bucket. s3_cred verweist auf die Template-Zugangsdaten, die ich zuvor sicher hinterlegt habe und die sowohl den Bucket-Namen als auch die Zugangsschlüssel enthalten.

Den /upload/handle-Robot verwenden

Alternativ können wir mit dem Robot /upload/handle entweder die Video- oder die Untertiteldatei zu Transloadit bringen. Mehrere Upload-Punkte müssen wir dabei nicht definieren, da der Robot /upload/handle mehrere Uploads in einer Instanz verarbeiten kann. Die Dateien bilden unterschiedliche Felder in einem Multipart-Upload. Deshalb müssen wir in unserem Step namens subtitled festlegen, welche Felder unser Video und welche unsere Untertiteldatei enthalten.

Unsere Assembly Instructions sollten hier so aussehen:

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

Die Eigenschaft fields innerhalb von use wählt Eingabefelder anhand ihres Attributs name aus. Damit das funktioniert, müssten wir unserem Formular ein <input type="file" name="subtitle" /> hinzufügen (und eines mit name="video"). Im Node.js-SDK übergeben Sie benannte Dateien an createAssembly, indem Sie files: { video: './file.mp4', subtitle: './subtitle.srt' } zusammen mit Ihrem params verwenden.

Ergebnisse ansehen

So sah unser Video aus, bevor wir Untertitel eingebrannt haben:

Und so sieht es nach dem Einbrennen der Untertitel aus:

Fazit

Wie ich in dieser Einführung hoffentlich zeigen konnte, muss das Einbrennen von Untertiteln in Videodateien überhaupt nicht schwierig oder zeitaufwendig sein, wenn Sie unseren Robot /video/subtitle verwenden. Mit Transloadit müssen Sie sich nie um FFmpeg, das Skalieren einer Maschinenflotte oder die Anbindung an andere Medienverarbeitungs-Jobs kümmern. Diesen Teil perfektionieren wir seit neun Jahren, damit Sie sich auf Ihr Geschäft konzentrieren können.

Viel Spaß beim Einbrennen! 🔥 Und wenn Sie Fragen, Anmerkungen oder Bedenken haben, lassen Sie es uns wissen!