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

このトピックでは、プラグイン開発者が Brightcove Player のプラグインをローカライズする方法について学びます。これは、プレーヤー自体に組み込まれているローカライズ機能を使用する場合とは異なる点に注意してください。プラグイン開発クイックスタートで説明されているとおり、アプリケーションはローカルで開発し、その後プラグインに変換します。

言語の追加

プラグインでサポートする言語を選択できます。サポートしたい各言語について、英語をキーとし、対応するローカライズ済みの言語を値とするキーと値のペアのセットを用意する必要があります。これは、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 行目: HTML の span 要素を動的に作成し、内容を設定してプレーヤーのコードに追加します。

  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>ローカライズ プラグインの例</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"
      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>

プレーヤーへのプラグインの追加

プラグインが正しく動作していることを確認したら、次にそのプラグインをプレーヤーに追加します。手順は次のとおりです。

PLAYERS モジュールを開き、新しいプレーヤーを作成するか、プラグインを追加したい既存のプレーヤーを選択します。
プレーヤーのリンクをクリックして、プレーヤーのプロパティを開きます。
左側のナビゲーションメニューで プラグイン をクリックします。
次に、プラグインの追加 > カスタムプラグイン をクリックします。
プラグイン名 には 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 allow='encrypted-media'></iframe>
    
    </body>
    </html>

ページ内で読み込まれた Brightcove プラグインのローカライズ

Brightcove プラグインを Studio で追加するのではなく、<script> を使用してページ内で読み込んだ場合、そのプラグインに関連付けられた言語翻訳は自動的には含まれません。ページ内で読み込まれた Brightcove プラグインをローカライズしたい場合は、サポートしたい各言語の言語ファイルを手動で含める必要があります。

これは、次のいずれかの方法で実現できます。

Studio でカスタムスクリプトとして言語ファイルを追加する。
プレーヤーの後、かつプラグインスクリプトの前に <script> タグで言語ファイルを読み込む。

言語ファイルの URL は、次の形式になります。

https://players.brightcove.net/<plugin-name>/<plugin-version>/lang/<language-code>.js

以下は、Quality Selection プラグインを使用した 2 番目の方法の例です。

            // プレーヤーを読み込み
              <video-js id="myPlayerID"
              data-account="175260405001"
              data-player="default"
              data-embed="default"
              controls=""
              data-video-id="584280065001"
              data-playlist-id=""
              data-application-id=""
              width="960" height="540">
            <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
            
            // Quality Selection プラグイン用の翻訳を読み込み
            <script src="https://players.brightcove.net/videojs-quality-menu/3/lang/fr.js"></script>
            <script src="https://players.brightcove.net/videojs-quality-menu/3/lang/ko.js"></script>
            <script src="https://players.brightcove.net/videojs-quality-menu/3/lang/zh-Hant.js"></script>
            
            // Quality Selection プラグインを読み込み
            <script src="https://players.brightcove.net/videojs-quality-menu/3/videojs-quality-menu.min.js"></script>