プログラムによるローカライズ Brightcove Player

このトピックでは、ローカライズする方法を学習します Brightcove Player。コントロール要素にカーソルを合わせても名前が表示されないので、文字通り、これを見るのは難しいです。ただし、制御要素のローカライズされた名前はスクリーンリーダーで使用されます。このドキュメントでは、 playerの名前をローカライズしたことを確認するためのHTML構造。

文書構造

最初にページはめ込み埋め込み実装をローカライズするプロセスを示し、次にiframe実装を示します。ドキュメントは、周囲のページのコンテンツをローカライズしたい場合に、ローカライズされた語彙を編集または追加する方法を示すことで終わります。 player.

言語を含める

ローカライゼーションの最初の作業は、ローカリゼーションに使用する言語を含めることです。利用可能な言語は、 Video.js言語ページここに示されている。

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

ローカリゼーションをサポートする言語を決定したら、設定を行う必要があります player それらを含める。これは、 Player Management API。次のcurlステートメントでパターン化されたコードを使用して、作成時に言語サポートを追加できます player:

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

もし player すでに存在し、言語サポートを追加したい場合は、次のcurlステートメントでパターン化されたコードを使用して、 player:

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

今、あなたは公開します player パブリッシュに変更を加える player。次のコマンドを入力します。

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

例 player 言語が設定された構成は次のようになります。

言語を設定する

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

ブラウザは完全に標準化されたロケール検出を持っていないので、少し複雑になる可能性があります。概して、ブラウザは、この順序で所望の言語を決定する。

埋め込みページに lang の属性 <html> 要素。
ブラウザ固有のロケール設定を確認してください。
英語に落ちる

iframeクエリパラメータ

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

成果

このドキュメントの最初の段落で述べたように、ローカライズされた結果 player 簡単には見えません。ローカライズの成功を確認するには、大きな再生ボタンを調べます。ブラウザのデバッグツールを使用してボタンを検査します。

非ローカライズ版のボタンのテキストが表示されるまで、HTMLをドリルダウンします。 ビデオを再生する.

上記の手順を実行した後、 player ローカライズされます。次のスクリーンショットでは、ボタンはドイツ語にローカライズされています。

iframe実装

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

言語を変更する/追加する

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

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

このJavaScriptは、HTMLページ自体に含まれている可能性があります。 <script> タグですが、最善の方法は、スクリプトを単に playerの構成 Studio。ファイルへのURLが プラグイン のセクション playerのプロパティ。使用 ファイルを追加する ボタンをクリックして、次のようにJavaScriptファイルを追加します。

追加された語彙が言語ファイルに含まれると、 player's 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>