Programmgesteuertes Hinzufügen von Untertiteln zu Videos

Überblick

Ihren Videos können Untertitel hinzugefügt werden, um Personen, die darauf zugreifen möchten, zusätzliche oder interpretive Informationen zur Verfügung zu stellen. Untertitel sind notwendig, damit Gehörlose und Schwerhörige auf den Audioteil von Videopräsentationen zugreifen können. Um Untertitel für ein Video im Brightcove Player anzuzeigen, müssen Sie die folgenden Aufgaben ausführen:

• Erstellen Sie eine Untertiteldatei für Ihr Video
• Ändern Sie den Publishing-Code des Players, um ein <Track> Tag einzuschließen
• Stylen Sie die Untertitel
• Verwenden Sie Code, um Untertitel hinzuzufügen

Erstellen von Untertiteldateien

Um einem Video Beschriftungen hinzuzufügen, müssen Sie zuerst eine Untertiteldatei erstellen. Der Brightcove Player verlangt, dass Beschriftungen im Web Video Text Tracks Format (WebVTT) enthalten sind. (Wenn Sie Beschriftungen in ein Dynamic Delivery-Konto aufnehmen, können Sie DFXP- oder SRT-Untertitel hinzufügen, die automatisch in WebVTT-Untertitel konvertiert werden.) Das WebVTT-Dateiformat ist im Klartext und enthält Zeittextdaten gefolgt von der gewünschten Beschriftung oder Untertiteltext. Ein Teil einer WebVTT-Datei ist unten dargestellt.

WEBVTT

00:00:00.000 --> 00:00:07.080 align:middle line:90%

00:00:07.080 --> 00:00:10.280 align:middle line:84%
Hi, I'm Bob Bailey, a Learning
Specialist with Brightcove.

00:00:10.280 --> 00:00:12.780 align:middle line:84%
In this video, you'll learn
about how Video Cloud Studio is

00:00:12.780 --> 00:00:14.940 align:middle line:84%
organized and get a
brief overview of what

00:00:14.940 --> 00:00:17.490 align:middle line:90%
you can accomplish using it.

Weitere Informationen zum WebVTT-Format finden Sie unter diesem Link. Sie sollten eine separate Untertiteldatei für jede Sprache haben, die Sie unterstützen müssen. Während es viele Tools von Drittanbietern gibt, mit denen Sie Untertiteldateien erstellen können, hat Brightcove mehrere Partner, die Transkriptions-, Untertitelungs- und Übersetzungsdienste anbieten. Eine vollständige Liste der Brightcove-Partner finden Sie im Partnerbereich unserer Website.

Wenn Sie Dynamic Delivery-Videos verwenden, können Sie auch SRT- oder DFXP-Untertitel aufnehmen, und Brightcove konvertiert sie automatisch in WebVTT. Siehe die Aufnahme von WebVTT-Dateien (Textspuren/Untertitel) Dokument für weitere Informationen.

Einschließlich eines <Track> Tag

Um eine WebVTT-Untertiteldatei (en) einem Brightcove Player zuzuordnen, müssen Sie den In-Page-Einbettungscode so ändern, dass er ein <track> Tag für jede Untertiteldatei enthält, die Sie haben. Zum Beispiel:

<track kind="captions" src="<location of caption file>" srclang="en" label="English">

Das <track> Tag wird verwendet, um Untertitel, Untertiteldateien oder andere Dateien mit Text anzugeben, die bei der Wiedergabe des Mediums sichtbar sein sollten. Die Schritte dazu sind nachstehend beschrieben.

1. Generiere den Advanced (In-Page) Einbettungscode für deinen Spieler. Dies kann mit dem Medienmodul erfolgen.
   Ihr Code sollte ungefähr so aussehen:

   <video-js 
   	id="myPlayerID" 
       data-video-id="4230322585001" 
       data-account="20318290001" 
       data-player="default" 
       data-embed="default" 
       data-application-id 
       controls="" 
       width="640" height="360">
   </video-js>
   <script src="https://players.brightcove.net/20318290001/default_default/index.min.js"></script>

   <video-js 
   	id="myPlayerID" 
       data-account="20318290001" 
       data-player="d508c6e1-efa7-4aad-ba91-1a8db9761b8c" 
       data-embed="default" 
       data-application-id 
       controls="" 
       width="640" height="360">
   </video-js>
   <script src="https://players.brightcove.net/20318290001/default_default/index.min.js"></script>

2. Fügen Sie <track> Tags innerhalb des <video-js> Tags hinzu, die auf den Speicherort aller Untertiteldateien zeigen. Player Studio bietet Publishern derzeit keine Möglichkeit, WebVTT-Untertiteldateien hochzuladen. Die URL für den Speicherort der Untertiteldatei muss weniger als 250 Zeichen lang sein.
   
   Im folgenden Beispiel wurden englische, japanische und französische Untertiteldateien angegeben. Eine vollständige Liste der Sprachcodes finden Sie in der HTML-Sprachcode-Referenz.

   <video-js 
   	id="myPlayerID" 
       data-video-id="4230322585001" 
       data-account="20318290001" 
       data-player="default" 
       data-embed="default" 
       data-application-id 
       controls="" 
       width="640" height="360">
     <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs.vtt" srclang="en" label="English">
     <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs-jp.vtt" srclang="ja" label="Japanese">
     <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs-fr.vtt" srclang="fr" label="French">
   </video-js>
   <script src="https://players.brightcove.net/20318290001/default_default/index.min.js"></script>

   <video-js id="myPlayerID" 
   	data-account="20318290001" 
       data-player="d508c6e1-efa7-4aad-ba91-1a8db9761b8c" 
       data-embed="default" 
       data-application-id 
       controls="" 
       width="640" height="360">
     <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs.vtt" srclang="en" label="English">
     <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs-jp.vtt" srclang="ja" label="Japanese">
     <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs-fr.vtt" srclang="fr" label="French">
   </video-js>
   <script src="https://players.brightcove.net/20318290001/default_default/index.min.js"></script>
   

3. (Optional) Damit Untertitel automatisch angezeigt werden, wenn das Video abgespielt wird, müssen Sie einige Änderungen an Ihrer Seite vornehmen. Sie müssen das default Attribut dem <track> Tag hinzufügen, damit die Sprache angezeigt und festgelegt und eine kleine Menge Code hinzufügen kann. Beachten Sie, dass das default Attribut nur auf einem <track> Tag erscheinen sollte. Damit beispielsweise die englischen Bildunterschriften angezeigt werden, wenn das Video abgespielt wird, wird das <track> Tag wie folgt geändert:

   <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs.vtt" srclang="en" label="English" default>
   <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs-jp.vtt" srclang="ja" label="Japanese">
   <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs-fr.vtt" srclang="fr" label="French">

   Der Code, der benötigt wird, um die vorgesehenen Untertitel automatisch zu starten, lautet:

   <script type="text/javascript">
     videojs.getPlayer('myPlayerID').ready(function () {
       var myPlayer = this;
       myPlayer.one("play", function () {
         //If you want to start English as the caption automatically
         myPlayer.textTracks()[1].mode = "showing";
       });
     });
   </script>

4. Veröffentlichen Sie die Seite mit dem Player. Wenn ein Spieler mit zugehörigen Beschriftungen veröffentlicht wird, erscheint eine CC-Schaltfläche im Player Chrome.

   

5. Drücke den CC um eine Untertitelsprache auszuwählen und die Untertitel anzuzeigen.

   

Beschriftungen stylen

In diesem Abschnitt erfahren Sie, wie Sie Beschriftungen programmgesteuert gestalten können. Informationen zum Gestalten von Untertiteln durch Ändern der WebVTT-Datei und auch der Benutzeroberfläche im Player finden Sie unter Bildunterschriften gestalten dokumentieren.

Zwei Methoden sind der Schlüssel zum programmgesteuerten Stylen von Beschriftungen, die sind:

• player.textTrackSettings.setValues(): Legt Stile dynamisch auf die Beschriftungen eines Players fest
• player.textTrackSettings.saveSettings(): Speichert Einstellungen im LocalStorage des Browsers

setValues (ObjectOfStyles)

Es gibt eine begrenzte Anzahl von Stilen, die Sie für Beschriftungen ändern können, die unten aufgeführt sind. Ein Beispiel für die Verwendung dieser Stile ist im folgenden Code dargestellt und zeigt Beschriftungen an, wie im Screenshot gezeigt:

videojs.getPlayer('myPlayerID').ready(function () {
    var myPlayer = this;
    myPlayer.  textTrackSettings.setValues({
      backgroundColor: "#FF0",
      color: "#00F",
      fontFamily: "monospaceSansSerif",
      fontPercent: 1.5,
      windowColor: "#0FF",
      windowOpacity: "0.5"
    }) ;
});

In der folgenden Tabelle sind die Beschriftungsstile aufgeführt, die Sie ändern können, und die gültigen Werte für diese Stile:

Für die obigen Werte, die Farben verwenden, werden hier die gültigen Farbwerte angezeigt:

Einstellungen speichern()

Eine andere Methode, die beim Stylen von Untertiteln hilfreich sein könnte, ist player.textTrackSettings.saveSettings(). Diese Methode speichert die des Browsers lokaler Speicher die aktuellen Einstellungen des Beschriftungsstils. Der folgende Screenshot von Chrome's Application Tab zeigt den lokalen Speicher für die Seite, die den Player bedient, und den Namen des Schlüssels, die vjs-text-track-Einstellungen und die zugehörigen Werte.

Mit dieser Methode haben Sie die Möglichkeit, die Beschriftungsstile über die Benutzeroberfläche des Players zu konfigurieren, dann die Einstellungen zu speichern und die zu verwendenden Werte zu kopieren player.textTrackSettings.setValues(), wie oben gezeigt.

Implementieren mit Code

Es ist möglich, programmgesteuert Textspuren für Beschriftungen hinzuzufügen. Die Schlüsselmethode für diese Funktionalität ist addRemoteTextTrack(), deren Syntax lautet:

playerObject.addRemoteTextTrack({
  kind: string,
  language: string,
  label: string,
  src: string
});

wo:

• kind- Typ der Textspur, dazu verwenden Sie „Untertitel“
• language- Sprachcode mit zwei Buchstaben, zum Beispiel „en“
• label- Die Sprachbezeichnung, die in der Untertitel-Benutzeroberfläche angezeigt wird, zum Beispiel „Englisch“
• src- URL zur in WebVTT formatierten Untertiteldatei

Der Funktionsaufruf gibt ein Objekt vom Typ zurück vjs.TextTrack.

Beispiel Verwendung:

var frTrack = myPlayer.addRemoteTextTrack({
  kind: 'captions',
  language: 'fr',
  label: 'French',
  src: 'https://solutions.brightcove.com/bcls/captions/adding_captions_to_videos_french.vtt'
});

Sie müssen warten, bis das loadedmetadata Ereignis ausgelöst wird, bevor Sie die addRemoteTextTrack() Methode verwenden. Das folgende Beispiel zeigt den Skriptblock zum Hinzufügen englischer und französischer Beschriftungen zu einem Video.

<script type="text/javascript">
  videojs.getPlayer('myPlayerID').ready(function () {
    var myPlayer = this;
    myPlayer.one("loadedmetadata", function () {
      var enTrack = myPlayer.addRemoteTextTrack({
        kind: 'captions',
        language: 'en',
        label: 'English',
        src: 'https://solutions.brightcove.com/bcls/captions/adding_captions_to_videos.vtt'
      });
      var frTrack = myPlayer.addRemoteTextTrack({
        kind: 'captions',
        language: 'fr',
        label: 'French',
        src: 'https://solutions.brightcove.com/bcls/captions/adding_captions_to_videos_french.vtt'
      });
    });
  });
</script>

Die ergänzende Methode textTracks() ermöglicht es Ihnen, alle Textspuren abzurufen, die einem Player zugewiesen sind. Die Methode gibt ein Objekt vom Typ zurück vjs.TextTrackList.

Live-Streaming mit Untertiteln

Bis zu diesem Zeitpunkt wurden die Dokumentbeschriftungen als separate Datei geliefert und mit einem Video über das <track> -Element verknüpft. Diese Art von Untertiteln wird manchmal als bezeichnet außerhalb der Bandbreite. Die alternative Methode beinhaltet das Einbetten der Untertiteldaten direkt in den Videoinhalt, häufig Live-Videostreams, und wird manchmal aufgerufen In-Band Bildunterschriften.

Brightcove Live unterstützt derzeit 608 Beschriftungen im Band (in h.264-Headern). Wenn sich Beschriftungen innerhalb des h.264-Eingangssignals befinden (korrekt im user_data Paket signalisiert), werden diese an die h.264-Ausgänge weitergeleitet.

Wenn Sie einen Broadcast-Elementar-Live-Encoder verwenden, können Sie Beschriftungen von SDI (EIA-608/CEA-608) oder anderen Quellen (SCTE-20, SCC, Teletext, DVB-Sub, Hilfs-, ARIB, TTML, SCTE-27, STL, SRT, SMI) abrufen und sie in den h.264-Stream abrufen, den Sie uns senden. Andere Sendegeber können wahrscheinlich dasselbe tun, aber wir haben sie nicht formell getestet.

WebVTT-Untertitel werden für Live-Streams nicht unterstützt.

Brightcove Player unterstützt In-Band-Untertitel und daher Live mit Bildunterschriften, die in HLS integriert sind, daher werden keine Plugins benötigt. Die Implementierung von Brightcove Player funktioniert überall dort, wo native HLS nicht verwendet wird. Wenn native HLS verwendet wird, ist die Unterstützung für In-Band-Untertitel vom Betriebssystem und Browser abhängig. Zum Beispiel unterstützt die native HLS von iOS volle Unterstützung für In-Band-Untertitel.

Einschränkungen

• Untertitel werden auf den folgenden Gerätetypen und Betriebssystemen unterstützt.
  • iOS 9 +
  • Android 4+
  • Internet Explorer 8+
  • Die neuesten Chrome-, Safari- und Firefox-Browser auf Desktops
• Da Safari die nativen Funktionen zum Gestalten von Untertiteln verwendet, ist die Untertiteleinstellungen Menüoption ist im nicht verfügbar CC Menü in Safari-Browsern (sowohl iOS als auch macOS).
• Wie bereits weiter oben im Dokument erwähnt und hier wiederholt, empfehlen wir für Betrachter auf iOS-Geräten, bei der Anzeige von Videos mit Untertiteln und Werbung explizit einen Titel auszuwählen und die Untertitel nicht auf Auto (empfohlen) einzustellen, wenn das Video abgespielt wird. Wenn Sie die Einstellung Auto (empfohlen) verwenden, werden möglicherweise falsche Untertitel für Anzeigen angezeigt. Beachten Sie, dass die Verwendung der Einstellung Auto (empfohlen) die Anzeige der Untertitel für das eigentliche Video nicht beeinflusst. Zuschauer sehen Videobeschriftungen für Anzeigen, aber sobald das Video abgespielt (Pre-Rolls) oder fortgesetzt wird (Mid-Rolls), werden die Untertitel wie erwartet angezeigt. Beachten Sie auch, dass diese "Auto"-Option aufgrund einer Betriebssystembeschränkung von Apple nicht entfernt werden kann. Apple-Geräte verwenden ihren eigenen Player, daher ist eine Anpassung der Untertiteloptionen nicht möglich.