Brightcove Player サンプル：ライブ用カスタム エラー メッセージ

プレーヤー/HTML 設定

このセクションでは、プレーヤー作成時に必要な特別な設定について説明します。加えて、Videoタグ埋め込みのプレーヤー実装コード以外で、ページに追加が必要な他の HTML 要素についても説明します。

プレーヤー設定

このサンプルで作成する Brightcove プレーヤーには、特別な設定は不要です。

その他の HTML

ページに追加する他の HTML 要素はありません。

アプリケーションのフロー

このアプリケーションの基本ロジックは以下のとおりです。

• ModalDialog のインスタンスを作成し、その中にカスタム画像を配置する。
• エラーを監視し、該当するエラータイプであればカスタム ModalDialog を表示する。
• 視聴者がカスタム ModalDialog を閉じた場合は、デフォルトのエラー メッセージを表示する。

HTML の div 要素を作成する

以下のラベルが付いたコードを探します。

      // ### Create a div in which to place HTML content and place image inside ###
      

HTML の div 要素を作成し、ライブ配信が機能していない場合に表示する画像を配置します。

HTML の div 要素を配置するためのオブジェクトを作成する

以下のラベルが付いたコードを探します。

        // ### Define options object to be used for modal content ###
      

ModalDialog を作成する際に必要になります。

ModalDialog を作成し、そのコンテンツとして画像を配置する

以下のラベルが付いたコードを探します。

      // ### Create Modal with options object ###
      

これは ModalDialog インスタンスを作成してプレーヤーに追加する標準的なコードです。デフォルトでは表示されません。

ディスパッチされるエラーを監視する

以下のラベルが付いたコードを探します。

      // ### Listen for an error event ###
      

エラーがディスパッチされたら、エラーコードと duration を取得します。

エラータイプを判定する

以下のラベルが付いたコードを探します。

        // ### Check if the error code and duration mean no video has loaded ###
      

ライブストリームが再生されていないかを判定するには、次のようにします。

if (((errNo == "4" && duration == 0) || (errNo == "4" &&
      Number.isNaN(duration)))) {
        // Hide the error display
        myPlayer.errorDisplay.hide();
        // If conditions met show the custom modal
        myModal.open();
      }

errNo == "4" && duration == 0 の条件は Chrome と Firefox で有効です。2 つ目の条件 errNo == "4" && Number.isNaN(duration) は Safari と Android 上のブラウザーで必要です。

カスタム ModalDialog が閉じられた場合にデフォルト エラーを表示する

以下のラベルが付いたコードを探します。

      // ### If custom modal error closed, show the default error ###
      

この動作を実装したい場合のみ行います。modalclose イベントを監視し、そのイベント ハンドラー内でデフォルト エラーを表示します。

アプリケーションのスタイリング

CSS は、プレーヤーのサイズ指定のみです。

プラグイン コード

JavaScript を Brightcove プレーヤーのプラグインに変換する際に必要な変更は最小限です。必須の変更点として、通常の ready() メソッドの使用を、プラグイン定義のコードに置き換える必要があります。

以下は、プレーヤーで動作する JavaScript の一般的な冒頭コードです。

      videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this;
        ...
        });

最初の行を、Brightcove プレーヤー プラグインを開始する標準構文に変更します。

      videojs.registerPlugin('pluginName', function(options) {
        var myPlayer = this;
        ...
        });

前述のとおり、プラグインの JavaScript コードは、このドキュメントに対応する GitHub リポジトリで確認できます：liveCustomError.js。

プラグインをプレーヤーで使用する

プラグインの CSS と JavaScript ファイルをインターネットからアクセス可能な場所に保存したら、プレーヤーでプラグインを使用できます。Studio の PLAYERS モジュールでプレーヤーを選択し、プラグイン セクションで CSS と JavaScript ファイルの URL を追加し、必要に応じて 名前 と オプション を設定します。