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

In this topic you will learn how to localize Brightcove Player. The names of the control elements do not appear as you hover over them. More importantly, the localized names of the control elements would be used by a screen reader. In this document you will use the player's HTML structure to confirm the elements' names have be localized.

ドキュメントの構造

まず、インページ埋め込み実装をローカライズするプロセスを示し、次にiframe実装を示します。この文書は、プレーヤーを囲むページのコンテンツをローカライズしたい場合に、ローカライズされた語彙を編集または追加する方法を示しています。

言語を含める

ローカリゼーションの最初のタスクは、ローカリゼーションに使用する言語を含めることです。あなたはで利用可能な言語を見ることができますVideo.js言語ページ、ここに表示されます。

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

ローカリゼーションをサポートする言語を決定したら、それらを含めるようにプレーヤーを構成する必要があります。これは、プレーヤー管理 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

言語が設定されたプレーヤー構成の例は、次のようになります。

言語を設定する

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

ブラウザには完全に標準化されたロケール検出がないので、少し複雑になる可能性があります。広義には、ブラウザは次の順序で目的の言語を決定します。

lang<html>埋め込みページに要素の属性があるかどうかを確認します。
ブラウザー固有のロケール設定を確認します。
英語にフォールバック。

iframe クエリパラメータ

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

結果

この文書の冒頭段落で述べたように、ローカライズされたプレーヤーの結果は容易に見られません。ローカリゼーションが成功しているかどうかを確認するには、大きな再生ボタンを調べます。ブラウザのデバッグツールを使用してボタンを検査します。

ボタンのテキストが表示されるまでHTMLにドリルダウンします。これは、ローカライズされていないバージョンでは動画を再生します。

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

iframeの実装

Brightcove Playerの iframe 実装のローカライズは、ページ内埋め込みバージョンのローカライズと同じです。あなたがする必要があるのは、必要な言語を含めて、ブラウザで優先言語を設定することだけです。これらの手順については、このマニュアルの前半で詳しく説明しています。変更するコードはありません。

言語を変更/追加

Video.js 言語ページにある特定のローカリゼーションを変更したり、追加したりする場合は、非常に簡単です。指定した翻訳をコピーし、必要に応じて変更することができます。例えば、以下は、こんにちとさよならをリストに追加したドイツ語翻訳です。(簡潔にするために、すべての制御要素の変換が含まれているわけではありません)。

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

この JavaScript は、HTML ページ自体にあるか、<script>タグにソースとして含めるか、Studio を使用してスクリプトをプレーヤーの設定に追加することができます。ファイルへの URL は、プレーヤーのプロパティの [ プラグイン] セクションに追加されます。使用ファイルを追加する次に示すように、JavaScriptファイルを追加するためのボタン：

メソッドに関係なく、 addLanguage ()メソッドの呼び出しは、プレーヤーが初期化される前に実行する必要があります。たとえば、コードがHTMLページにある場合は、次のようにします。

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

var myPlayer = bc("myPlayerID");

追加された語彙が言語ファイルに含まれると、プレーヤーの語彙を使用できますlocalize()それにアクセスする方法。次のコードスニペットは、のローカライズされた単語を示していますこんにちは 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>