プラグインのローカライズ
言語を追加する
プラグインでサポートする言語を選択できます。サポートする言語ごとに、英語をキーとして、対応するローカライズされた言語を値として持つ、キーと値のペアのセットが必要です。これを行うには、Videojs ' addLanguage()
メソッドを使用します。次のコードは、ドイツ語の翻訳をページに追加する方法を示しています。
videojs.addLanguage('de', {
"Hello": "Guten Tag",
"Goodbye": "Auf Wiedersehen",
});
コンテンツのローカライズ
ローカリゼーションプロセスで使用したい言語や語彙を追加したら、localize()
プレーヤーのメソッドを使用して実際のローカライゼーションを実行できます。以下は、HTMLに注入され<span>
、videoタグの末尾に追加される文字列を示しています。
textSpan = document.createElement('span');
textSpan.className = "localizeStyle"
textSpan.innerHTML = myPlayer.localize("Hello") + "/" + myPlayer.localize("Goodbye");
myPlayer.el().appendChild(textSpan);
localize()
このメソッドは英語のキーワードを文字列引数として受け取りmyPlayer.localize("Hello")
、ブラウザーの優先言語がを使用できます。この場合、ローカライズされた単語が置き換えられます。
表示言語を設定する
ローカライズされたテキストを表示するには、ユーザーがブラウザで優先言語を設定する必要があります。正確な手順は、ブラウザとOSによって異なります。
ブラウザの優先言語が英語の場合、または使用できない言語の場合は、デフォルトのテキスト(英語)が表示されます。
ブラウザの優先言語が使用可能な言語に設定されている場合、次のようにローカライズされたバージョンが表示されます。
プラグインコード
ステップバイステップで文書化されているように:プラグイン開発、プラグインを含むファイルにコードを入れて。
- 27,37行:Brightcove Player プラグインを定義する標準的な構文。後で参照するために、プラグインの名前は PluginLocalize です。
- 28~31行目線:ドイツ語のローカリゼーションを追加します。
- 32~36行目線:
span
HTML要素を動的に作成し、それを移入し、プレーヤーコードに追加します。
videojs.registerPlugin('pluginLocalize', function() {
videojs.addLanguage('de', {
"Hello": "Guten Tag",
"Goodbye": "Auf Wiedersehen",
});
var myPlayer = this,
textSpan = document.createElement('span');
textSpan.className = "localizeStyle"
textSpan.innerHTML = myPlayer.localize("Hello") + "/" + myPlayer.localize("Goodbye");
myPlayer.el().appendChild(textSpan);
});
テストの目的で、embed_in_page プレーヤー実装を使用するページで、プラグインをローカルで使用します。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Localize Plugin Example</title>
<link href="localize-plugin.css" rel="stylesheet">
</head>
<body>
<video-js id="myPlayerID"
data-account="1752604059001"
data-player="9a2e3f23-d63b-43c3-aae9-21f11548e812"
data-embed="default"
data-video-id="3851389913001"
class="video-js" controls></video-js>
<script src="https://players.brightcove.net/1752604059001/9a2e3f23-d63b-43c3-aae9-21f11548e812_default/index.min.js"></script>
<script type="text/javascript" src="localize-plugin.js"></script>
<script>videojs.getPlayer('myPlayerID').pluginLocalize();</script>
</body>
</html>
プラグインをプレーヤーに追加する
プラグインが正常に機能していることを確認したら、プラグインをプレーヤーに追加する必要があります。これを行うには、次の手順を実行します。
- を開きますプレイヤーモジュールを作成し、新しいプレーヤーを作成するか、プラグインを追加するプレーヤーを見つけます。
- プレーヤーのリンクをクリックして、プレイヤーのプロパティを開きます。
- 左側のナビゲーションメニューで [ プラグイン ] をクリックします。
- 次に、プラグインを追加 > カスタムプラグインをクリックします。
- [ プラグイン名 ] に、と入力します
pluginLocalize
。 - JavaScript の URL には、次のように入力します。
http://solutions.brightcove.com/bcls/brightcove-player/localization/localize-plugin.js
- CSS の URL には、次のように入力します。
http://solutions.brightcove.com/bcls/brightcove-player/localization/localize-plugin.css
- このプラグインのオプションを入力する必要はありません。
- フォームが次のように表示されることを確認してください。
- [ 保存] をクリックします。
- プレーヤーを公開するには、[ パブリッシュと埋め込み] > [変更の公開] の順にクリックします。
- 開くダイアログを閉じるには、[ 閉じる] をクリックします。
保存して公開したら、のプラグイン名をクリックして構成を変更できます。プラグインリスト。
プラグインはプレーヤーの一部になりました。これにより、他のサポートコードなしで iframe プレーヤーの実装を使用し、プラグインの機能を利用できます。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Localize Plugin - iframe</title>
</head>
<body>
<iframe src='https://players.brightcove.net/1752604059001/9a2e3f23-d63b-43c3-aae9-21f11548e812_default/index.html'
allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
</body>
</html>