Brightcove Player をプログラム的にローカライズする
ドキュメントの構造
まず、インページ埋め込み実装をローカライズするプロセスを示し、次に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ファイルを追加するためのボタン:
追加された語彙が言語ファイルに含まれると、プレーヤーの語彙を使用できます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>