Programmgesteuerte Lokalisierung von Brightcove Player

In diesem Thema erfahren Sie, wie Sie Brightcove Player lokalisieren. Die Namen der Steuerelemente werden nicht angezeigt, wenn Sie mit dem Mauszeiger über sie fahren. Noch wichtiger ist, dass die lokalisierten Namen der Steuerelemente von einem Bildschirmlesegerät verwendet werden können. In diesem Dokument verwenden Sie die HTML-Struktur des Players, um zu bestätigen, dass die Namen der Elemente lokalisiert wurden.

Dokumentstruktur

Zuerst wird der Prozess zum Lokalisieren der In-Page-Embed-Implementierung und dann die Iframe-Implementierung angezeigt. Das Dokument schließt mit einer Demonstration, wie lokalisiertes Vokabular bearbeitet oder ergänzt wird, wenn Sie Inhalte auf der den Player umgebenden Seite lokalisieren möchten.

Sprache (n) einschließen

Die erste Aufgabe für die Lokalisierung besteht darin, die Sprache (n) anzugeben, die Sie für die Lokalisierung verwenden möchten. Sie können die verfügbaren Sprachen unter sehen Video.js Sprachseite , hier gezeigt.

  • ar.json - Arabisch
  • de.json - Deutsch
  • en.json - Englisch
  • es.json - Spanisch
  • fr.json - Französisch
  • ja.json - Japanisch
  • ko.json - Koreanisch
  • zh-Hans.json - Mandarin-Chinesisch, vereinfachte Schrift
  • zh-Hant.json - Mandarin-Chinesisch, wie in traditioneller Schrift geschrieben

Der Inhalt der deutschen (De-) Datei ist unten dargestellt. Die Datei zeigt die Wörter / Phrasen, die automatisch übersetzt werden.

deutsche github datei

Nachdem Sie festgelegt haben, welche Sprachen für die Lokalisierung unterstützt werden sollen, müssen Sie Ihren Player so konfigurieren, dass sie diese enthalten. Sie tun dies mit dem Player Management API. Sie können den in der folgenden Curl-Anweisung gemusterten Code verwenden, um beim Erstellen des Players Sprachunterstützung hinzuzufügen:

curl \
  --header "Content-Type: application/json" \
  --user $EMAIL \
  --request POST \
  --data '{
      "name": "Localization Example",
      "configuration": {
        "languages": [
          "de",
          "es"
        ],
        "media": {
          "sources": [{
            "src":"http://solutions.brightcove.com/bcls/assets/videos/Tiger.mp4",
            "type":"video/mp4"
          }]
        }
      }
    }' \
    https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players

Wenn der Player bereits vorhanden ist und Sie Sprachunterstützung hinzufügen möchten, können Sie den Player mithilfe des in der folgenden Curl-Anweisung gemusterten Codes aktualisieren:

curl \
  --header "Content-Type: application/json" \
  --user $EMAIL \
  --request PATCH \
  --data '{
      "languages": [
        "de",
        "es"
      ]
    }' \
  https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players/$PLAYER_ID/configuration
Jetzt veröffentlichen Sie den Player, um die Änderungen am veröffentlichten Player vorzunehmen. Geben Sie den folgenden Befehl ein: 
curl \
--header "Content-Type: application/json" \
--user $EMAIL \
--request POST \
https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players/$PLAYER_ID/publish

Eine Beispiel-Player-Konfiguration mit festgelegten Sprachen sieht wie folgt aus:

Spielerkonfiguration

Sprache einstellen

Um die lokalisierten Steuerelementnamen zu verwenden, kann der Benutzer die bevorzugte Sprache im Browser festlegen. Die genauen Schritte variieren je nach Browser und Betriebssystem (eine ausführliche Anleitung finden Sie im nächsten Absatz). Wenn die bevorzugte Sprache des Browsers Englisch ist oder eine Sprache nicht verfügbar ist, sehen Sie den Standardtext oder den englischen Text.

Browser verfügen nicht über eine perfekt standardisierte Gebietsschemaerkennung, daher kann dies etwas kompliziert sein. Im Allgemeinen versuchen Browser, die gewünschte Sprache in dieser Reihenfolge zu bestimmen:

  1. Überprüfen Sie, ob die Einbettungsseite eine hat lang Attribut auf der <html> Element.
  2. Überprüfen Sie die browserspezifischen Gebietsschemakonfigurationen.
  3. Auf Englisch zurückgreifen.

iframe-Abfrageparameter

Wenn Sie die iframe-Implementierung des Players verwenden, können Sie die Sprache für diesen Player festlegen, indem Sie einen Abfrageparameter in den Player einfügen src Attribut. Zum Beispiel zu dem vorhandenen Abfrageparameter hinzugefügt, der die Video-ID enthält ?videoId=4607746980001 können Sie die Sprache mit einstellen &language= gefolgt vom Sprachcode. Hier ist zum Beispiel eine Iframe-Player-Implementierung, die die Sprache auf Deutsch setzt:

iframe-Lokalisierungsparameter

Ergebnisse

Wie im ersten Absatz dieses Dokuments erwähnt, sind die Ergebnisse eines lokalisierten Spielers nicht leicht zu sehen. Um die erfolgreiche Lokalisierung zu überprüfen, können Sie die Big-Play-Taste überprüfen. Verwenden Sie die Debugging-Tools eines Browsers, um die Schaltfläche zu überprüfen.

Überprüfen Sie die Wiedergabetaste

Führen Sie einen Drilldown in den HTML-Code durch, bis Sie den Text für die Schaltfläche sehen, der in der nicht lokalisierten Version angezeigt wird Video abspielen.

englische Lokalisierung

Nachdem Sie die oben gezeigten Schritte ausgeführt haben, wird der Player lokalisiert. Im folgenden Screenshot ist die Schaltfläche für Deutsch lokalisiert.

deutsche Lokalisierung

iframe-Implementierung

Das Lokalisieren der Iframe-Implementierung von Brightcove Player entspricht dem Lokalisieren der In-Page Embed-Version. Sie müssen lediglich die gewünschten Sprachen angeben und die bevorzugte Sprache im Browser festlegen. Beide Verfahren werden weiter oben in diesem Dokument beschrieben. Es gibt keinen Code zum Ändern.

Sprache ändern / hinzufügen

Wenn Sie die angegebenen Lokalisierungen ändern oder ergänzen möchten, finden Sie unter Video.js Sprachseite es ist ganz einfach zu tun. Sie können die angegebenen Übersetzungen kopieren und dann nach Ihren Wünschen ändern. Zum Beispiel sind unten die deutschen Übersetzungen mit Hallo und Auf Wiedersehen zur Liste hinzugefügt. (For brevity's sake, not all the control elements translations are included.)

videojs.addLanguage("de", {
  "Play": "Wiedergabe",
  "Pause": "Pause",
  "Current Time": "Aktueller Zeitpunkt",
  "Hello": "Guten Tag",
  "Goodbye": "Auf Wiedersehen"
});

Dieses JavaScript kann sich in der HTML-Seite selbst befinden und als Quelle in a enthalten sein <script> Tag, oder fügen Sie das Skript mit Studio zur Konfiguration des Players hinzu. Die URL zur Datei wird im hinzugefügt Plugins Abschnitt der Eigenschaften des Spielers. Verwenden Sie die Fügen Sie eine Datei hinzu Schaltfläche zum Hinzufügen der JavaScript-Datei, wie hier gezeigt:

Skript in Studio hinzufügen

Sobald sich das hinzugefügte Vokabular in der Sprachdatei befindet, können Sie das des Players verwenden localize() Methode, um darauf zuzugreifen. Das folgende Codeausschnitt zeigt das lokalisierte Wort für Hallo wird auf der HTML-Seite verwendet, gefolgt von einem Screenshot der Ergebnisse.

  <p id="textTarget">In here: </p>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      document.getElementById("textTarget").innerHTML += myPlayer.localize("Hello");
    });
  </script>
Seitentextlokalisierung