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

このトピックでは、プラグイン開発者が Brightcove Player プラグイン。これは、組み込みのローカリゼーションを使用するのと同じではないことに注意してください。 player そのもの。

で提案されているようにプラグイン開発のクイックスタート、アプリケーションはローカルで開発され、プラグインに変換されます。

言語を追加する

プラグインでサポートする言語を選択できます。サポートしたい言語ごとに、英語のキーと対応するローカライズされた言語を値として持つ一連のキーと値のペアが必要です。これを行うにはVideojs ' addLanguage() 方法。次のコードは、ドイツ語の翻訳をページに追加する方法を示しています。

videojs.addLanguage('de', {
  "Hello": "Guten Tag",
  "Goodbye": "Auf Wiedersehen",
});

コンテンツをローカライズする

ローカリゼーションプロセスで使用したい言語と語彙を追加したら、 player's localize() メソッドを使用して実際のローカリゼーションを実行します。以下は、HTMLに挿入される文字列を示しています <span>動画タグの末尾に追加されます。

  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：HTMLを動的に作成します。 span 要素、それを移入し、それを player コード。

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を利用するページでプラグインをローカルで使用します player インプリメンテーション。

<!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>

プラグインを追加 player

プラグインが正しく機能していることを確認したら、プラグインを player。これを行うには、次の手順を実行します。

Video Cloud Studioで PLAYERS モジュールと新しいのいずれかを作成します player または見つけます player プラグインを追加する場所。
リンクをクリックすると player を開く playerのプロパティ。
ナビゲーションヘッダーの プラグイン 左側のナビゲーションメニュー。
次に、をクリックします。 プラグインを追加する.
　 プラグイン名 入力します 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

このプラグインのオプションを入力する必要はありません。
フォームが次のように表示されていることを確認します。
ナビゲーションヘッダーの保存.
公開するには player、クリック 公開と埋め込み>変更の公開.
開いているダイアログを閉じるには、 閉じる.

保存して公開したら、のプラグイン名をクリックして設定を変更できます プラグイン リスト。

プラグインは、 player。これにより、iframeを使用できます player 他のサポートコードなしで実装し、プラグインの機能を利用できるようにします。

<!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>