Brightcove Player をプログラムでローカライズする

このトピックでは、Brightcove Player をローカライズする方法を学びます。コントロール要素の名前は、マウスオーバー時には表示されませんが、より重要なのは、ローカライズされたコントロール要素の名称がスクリーンリーダーで使用される点です。本ドキュメントでは、プレーヤーの HTML 構造を使用して、要素名が正しくローカライズされていることを確認します。

ドキュメント構成

まず、Videoタグ埋め込み実装におけるローカライズ手順を示し、次に iframe 実装について説明します。最後に、プレーヤーを囲むページ コンテンツをローカライズしたい場合に、ローカライズ済みの語彙を編集または追加する方法を紹介します。

言語を含める

ローカライズの最初の作業は、使用する言語を含めることです。利用可能な言語は、以下に示す Video.js language page で確認できます。

  • ar.json - アラビア語
  • de.json - ドイツ語
  • en.json - 英語
  • es.json - スペイン語
  • fr.json - フランス語
  • ja.json - 日本語
  • ko.json - 韓国語
  • zh-Hans.json - 中国語（簡体字）
  • zh-Hant.json - 中国語（繁体字）

以下は、ドイツ語（de）ファイルの内容例です。このファイルには、自動的に翻訳される単語やフレーズが示されています。

german github file

ローカライズでサポートする言語を決定したら、それらを含めるようにプレーヤーを設定する必要があります。これは Player Management API を使用して行います。プレーヤー作成時に言語サポートを追加するには、次の curl ステートメントを参考にしたコードを使用できます。

    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

プレーヤーがすでに存在しており、言語サポートを追加したい場合は、次の curl ステートメントを参考にしたコードを使用してプレーヤーを更新できます。

    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
次に、変更を公開済みプレーヤーに反映させるため、プレーヤーを公開します。以下のコマンドを実行してください。 
    curl \
    --header "Content-Type: application/json" \
    --user $EMAIL \
    --request POST \
    https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players/$PLAYER_ID/publish

言語が設定されたプレーヤー設定の例は、次のとおりです。

player configuration

言語を設定する

ローカライズされたコントロール名を使用するには、ユーザーがブラウザーで優先言語を設定する必要があります。具体的な手順はブラウザーや OS によって異なります（大まかなガイダンスは次の段落で説明します）。ブラウザーの優先言語が英語、または利用できない言語の場合は、デフォルト、つまり英語のテキストが表示されます。

ブラウザーのロケール検出は完全に標準化されているわけではないため、少し複雑になる場合があります。一般的に、ブラウザーは次の順序で使用する言語を判断します。

  1. 埋め込みページの <html> 要素に lang 属性が設定されているかを確認する。
  2. ブラウザー固有のロケール設定を確認する。
  3. 英語にフォールバックする。

iframe クエリ パラメーター

プレーヤーの iframe 実装を使用している場合は、src 属性にクエリ パラメーターを含めることで、そのプレーヤーの言語を設定できます。たとえば、?videoId=4607746980001 のように既存の動画 ID を指定するクエリ パラメーターに加えて、&language= に続けて言語コードを指定します。以下は、言語をドイツ語に設定した iframe プレーヤー実装の例です。

iframe localization parameter

結果

本ドキュメントの冒頭で述べたとおり、ローカライズされたプレーヤーの結果は一見して分かりにくい場合があります。ローカライズが正しく行われたかを確認するには、大きな再生ボタンを確認してください。ブラウザーのデバッグ ツールを使用して、このボタンを調査します。

inspect play button

HTML をたどっていくと、ボタンのテキストが表示されます。ローカライズされていないバージョンでは、このテキストは Play Video です。

english localization

上記の手順を実行すると、プレーヤーはローカライズされます。次のスクリーンショットでは、ボタンがドイツ語にローカライズされています。

german localization

iframe 実装

Brightcove Player の iframe 実装のローカライズは、Videoタグ埋め込み版のローカライズと同じです。必要なのは、使用したい言語を含め、ブラウザーで優先言語を設定することだけです。これらの手順はいずれも、本ドキュメントの前半で詳しく説明しています。変更するコードはありません。

言語の変更／追加

Video.js language page に用意されている既存のローカライズを変更、または追加したい場合も、非常に簡単に行えます。既存の翻訳をコピーし、必要に応じて修正するだけです。たとえば、以下はドイツ語の翻訳に Hello と Goodbye を追加した例です（簡潔にするため、すべてのコントロール要素の翻訳は含めていません）。

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

この JavaScript は、HTML ページ内に直接記述することも、<script> タグで読み込むことも、または Studio を使用してプレーヤーの設定にスクリプトとして追加することもできます。ファイルの URL は、プレーヤー プロパティの プラグイン セクションに追加します。以下に示すように、ファイルの追加 ボタンを使用して JavaScript ファイルを追加してください。

add script in Studio

追加した語彙が言語ファイルに含まれていれば、プレーヤーの localize() メソッドを使用して参照できます。以下のコード スニペットでは、Hello に対応するローカライズ済みの単語を HTML ページ内で使用しています。あわせて、結果のスクリーンショットも示します。

        <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>
page text localization