Localisation par programmation de Brightcove Player

Dans cette rubrique, vous apprendrez à localiser Brightcove Player. Les noms des éléments de contrôle n'apparaissent pas lorsque vous les survolez. Plus important encore, les noms localisés des éléments de contrôle seraient utilisés par un lecteur d'écran. Dans ce document, vous utiliserez la structure HTML du lecteur pour confirmer que les noms des éléments ont été localisés.

Structure du document

Tout d'abord, le processus de localisation de l'implémentation In-Page Embed est affiché, puis l'implémentation iframe. Le document se termine en montrant comment modifier ou ajouter du vocabulaire localisé si vous souhaitez localiser du contenu sur la page entourant le lecteur.

Inclure la (les) langue (s)

La première tâche de localisation consiste à inclure la ou les langues que vous souhaitez utiliser pour la localisation. Vous pouvez voir les langues disponibles sur le Page de langue de Video.js , montré ici.

ar.json - Arabe
de.json - Allemand
en.json - Anglais
es.json - Espagnol
fr.json - Français
ja.json - Japonais
ko.json - Coréen
zh-Hans.json - Chinois mandarin, écriture simplifiée
zh-Hant.json - Chinois mandarin, tel qu'il est écrit en caractères traditionnels

Le contenu du fichier allemand (de) est indiqué ci-dessous. Le fichier affiche les mots / phrases qui seront traduits automatiquement.

Une fois que vous avez décidé des langues à prendre en charge pour la localisation, vous devez configurer votre lecteur pour les inclure. Vous faites cela en utilisant le API de gestion des joueurs. Vous pouvez utiliser un code basé sur l'instruction curl suivante pour ajouter la prise en charge de la langue lors de la création du lecteur:

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

Si le lecteur existe déjà et que vous souhaitez ajouter la prise en charge de la langue, vous pouvez utiliser le code modelé sur l'instruction curl suivante pour mettre à jour le lecteur:

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

Vous allez maintenant publier le lecteur pour apporter les modifications au lecteur publié. Entrez la commande suivante :

curl \
--header "Content-Type: application/json" \
--user $EMAIL \
--request POST \
https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players/$PLAYER_ID/publish

Un exemple de configuration de lecteur avec des langues définies apparaît comme suit:

Définir la langue

Pour utiliser les noms de contrôle localisés, l'utilisateur peut définir la langue préférée dans le navigateur. Les étapes exactes varient en fonction du navigateur et du système d'exploitation (des conseils généraux sont donnés dans le paragraphe suivant). Si la langue préférée du navigateur est l'anglais, ou si une langue n'est pas disponible, le texte par défaut, ou anglais, s'affiche.

Les navigateurs n'ont pas de détection des paramètres régionaux parfaitement standardisés, de sorte que cela peut être un peu compliqué. Globalement, les navigateurs cherchent à déterminer la langue souhaitée dans cet ordre :

Vérifiez si la page d'intégration a un lang attribut sur le <html> élément.
Vérifiez les configurations locales spécifiques au navigateur.
Revenez à l'anglais.

paramètre de requête iframe

Si vous utilisez l'implémentation iframe du lecteur, vous pouvez définir la langue de ce lecteur en incluant un paramètre de requête dans le src attribut. Ajouté au paramètre de requête existant qui a l'ID vidéo, par exemple ?videoId=4607746980001 , vous pouvez définir la langue en utilisant &language= suivi du code de langue. Par exemple, voici une implémentation du lecteur iframe définissant la langue sur l'allemand:

Résultats

Comme mentionné dans le premier paragraphe de ce document, les résultats d'un lecteur localisé ne sont pas facilement visibles. Pour vérifier la localisation réussie, vous pouvez inspecter le gros bouton de lecture. Utilisez les outils de débogage d'un navigateur pour inspecter le bouton.

Explorez le code HTML jusqu'à ce que vous voyiez le texte du bouton, qui dans la version non localisée est Lire la vidéo.

Après avoir suivi les étapes indiquées ci-dessus, le lecteur sera localisé. Dans la capture d'écran suivante, le bouton est localisé pour l'allemand.

implémentation iframe

La localisation de l'implémentation iframe de Brightcove Player revient à localiser la version intégrée sur la page. Tout ce que vous avez à faire est d'inclure les langues souhaitées et de définir la langue préférée dans le navigateur. Ces deux procédures sont détaillées plus haut dans ce document. Il n'y a pas de code à modifier.

Modifier / Ajouter à la langue

Si vous souhaitez modifier ou compléter les localisations données trouvées sur le Page de langue de Video.js c'est assez facile à faire. Vous pouvez copier les traductions données puis les modifier comme vous le souhaitez. Par exemple, voici les traductions allemandes avec Bonjour et Au revoir ajouté à la liste. (Par souci de concision, toutes les traductions des éléments de contrôle ne sont pas incluses.)

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

Ce JavaScript peut se trouver dans la page HTML elle-même, inclus en tant que source dans un <script> ou ajoutez le script à la configuration du lecteur à l'aide de Studio. L'URL du fichier est ajoutée dans le Plugins section des propriétés du joueur. Utilisez le Ajouter un fichier bouton pour ajouter le fichier JavaScript, comme indiqué ici:

Quelle que soit la méthode, l'appel au addLanguage() La méthode DOIT être effectuée avant que le lecteur ne soit initialisé. Par exemple, si le code se trouve dans la page HTML, procédez comme suit:

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

var myPlayer = bc("myPlayerID");

Une fois que le vocabulaire ajouté est dans le fichier de langue, vous pouvez utiliser le lecteur localize() méthode pour y accéder. L'extrait de code suivant montre le mot localisé pour Bonjour utilisé dans la page HTML, suivi d'une capture d'écran des résultats.

  <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>