プラグインのローカライズ

In this topic you will learn how a plugin developer can localize a Brightcove Player plugin. Note that this is NOT the same as using the built-in localization for the player itself. As is suggested in the プラグインのローカライズクイックスタートからプラグイン開発まで、アプリケーションはローカルで開発され、プラグインに変換されます。

言語を追加する

プラグインでサポートする言語を選択できます。サポートする言語ごとに、英語をキーとして、対応するローカライズされた言語を値として持つ、キーと値のペアのセットが必要です。これを行うには、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>