サポート サポート問い合わせ先 | システムステータス システムステータス
ページ内容

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

    このトピックでは、プラグイン開発者が 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。 これを行うには、次の手順を実行します。

    1. Video Cloud Studioで PLAYERS モジュールと新しいのいずれかを作成します player または見つけます player プラグインを追加する場所。
    2. リンクをクリックすると player を開く playerのプロパティ。
    3. ナビゲーションヘッダーの プラグイン 左側のナビゲーションメニュー。
    4. 次に、をクリックします。 プラグインを追加する.
    5.   プラグイン名 入力します pluginLocalize.
    6.   JavaScriptを URL、入力:
      http://solutions.brightcove.com/bcls/brightcove-player/localization/localize-plugin.js
    7.   CSS URL、入力:
      http://solutions.brightcove.com/bcls/brightcove-player/localization/localize-plugin.css
    8. このプラグインのオプションを入力する必要はありません。
    9. フォームが次のように表示されていることを確認します。
      ローカライズプラグインを追加
    10. ナビゲーションヘッダーの 保存.
    11. 公開するには player、クリック 公開と埋め込み>変更の公開.
    12. 開いているダイアログを閉じるには、 閉じる.

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

    ローカライズプラグインを追加しました。

    プラグインは、 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>

    ページの最終更新日:28年2020月XNUMX日