ドメイン制限メッセージの表示

このトピックでは、ドメイン制限により動画の再生が許可されていない場合に、適切なエラーメッセージを表示する方法を説明します。デフォルトでは、Brightcove プレーヤーは動画がドメイン制限されていることをユーザーに通知しません。

概要

ドメイン制限を使用して、動画を視聴できる場所を制限することができます。プレーヤーのコンテンツ制限を設定するドキュメントでは、Video Cloud を使用してドメイン制限を適用する方法を説明しています。現在ご覧のドキュメントでは、プレーヤーがドメイン制限を使用していることをユーザーに通知するためのコード実装方法を解説します。

デフォルトでは、Brightcove プレーヤーはユーザーが視聴しようとしている動画がドメイン制限されたプレーヤー内であることを通知しません。プレーヤーは単に黒い画面を表示します。コンソールを表示すると、以下のように表示されます。

これはあまり役に立ちませんが、Network タブを確認し、動画 ID に対応する Name をクリックして Preview タブを確認すると、より有益なエラーが表示されます。

このドキュメントでは、視聴しようとしている動画がドメイン制限されていることをユーザーに伝えるための戦略を実装します。

プレーヤーのカタログにおけるエラーオブジェクト

ユーザーフレンドリーなメッセージを作成する鍵は、Brightcove プレーヤーの catalog に含まれる error オブジェクトです。ドメイン制限のエラー例を、ブラウザーのコンソールのスクリーンショットで以下に示します。オブジェクトに data プロパティがあり、その中に配列が含まれていることに注目してください。配列には、カタログが動画の読み込み中に直近で遭遇したエラーが保持されます。この例では、配列の要素がドメイン制限の問題を報告しています。

bc-catalog-error の処理

通常の script ブロック内の ready() セクションでエラーを処理すると、問題を引き起こす可能性があります。たとえば、bc-catalog-error イベントがプレーヤーの準備完了前にディスパッチされ、ready() セクションでエラーを監視していると、エラーを処理できない場合があります。コード上は問題がないように見えても、ブラウザー依存の問題である可能性があるため注意が必要です。これらの理由から、本ドキュメントのエラー処理コードでは、ready() セクション内ではなく、別のコードブロックで one() イベント処理メソッドを使用して bc-catalog-error を監視します。

HTML にメッセージを表示

発生したエラーの構造とその場所を理解したら、JavaScript を使用してユーザー向けの説明的なエラーを表示できます。基本的な実装手順は次のとおりです。

メッセージを表示するためのターゲット要素を作成する。
プレーヤーが操作可能な状態であることを確認する。
エラーが発生しているかを確認する。
発生していれば、そのエラーがドメイン制限によるものか確認する。
該当する場合、ユーザーにメッセージを表示する。

以下のコードは、これらの手順を実装したものです。

8 行目: テキストを挿入するための HTML 要素（ここでは段落）を追加し、ターゲット指定用に要素へ id を付与します。
13 行目: one() メソッドを使用して、bc-catalog-error イベントのリスナーを 1 回だけ追加します。
16 行目: if 文で何らかのエラーが発生していることを確認します。
17 行目: Brightcove プレーヤーのカタログのエラーオブジェクトから、特定のエラー情報を変数に代入します。
18 行目: 特定のエラー情報が存在し、かつエラーの種類がドメイン制限であることを if 文で確認します。
19 行目: 12 行目で作成した HTML 要素に、適切なテキストメッセージを挿入します。

        <video-js id="myPlayerID"
          data-video-id="3495887198001"
          data-account="1507807800001"
          data-player="4c8eb732-ba76-485c-a906-407365721633"
          data-embed="default"
          controls=""></video-js>
      
          <p id="textTarget"></p>
      
        <script src="https://players.brightcove.net/1507807800001/4c8eb732-ba76-485c-a906-407365721633_default/index.min.js"></script>
      
        <script type="text/javascript">
          videojs.getPlayer('myPlayerID').one('bc-catalog-error', function(){
            var myPlayer = this,
              specificError;
            if (myPlayer.catalog.error !== undefined) {
              specificError = myPlayer.catalog.error.data[0];
              if (specificError !== undefined & specificError.error_subcode == "DOMAIN") {
                document.getElementById("textTarget").innerHTML = "The video you are trying to watch cannot be viewed as it is domain restricted.";
              };
            };
          });
      
          videojs.getPlayer('myPlayerID').ready(function() {
            var myPlayer = this;
            console.log('in ready');
          });
        </script>

次のスクリーンショットは、プレーヤーの下にメッセージが表示されている例です。

errors プラグインによるメッセージ表示

ドメイン制限された場合に、プレーヤー内にメッセージを表示したいことがあるかもしれません。その場合は errors プラグインを利用できます。errors プラグインはプレーヤーに自動的に読み込まれるため、明示的な読み込み操作は不要です。ここで説明する内容以外の details は、Display Error Messages Plugin ドキュメントを参照してください。

43 行目: one() メソッドを使用して、bc-catalog-error イベントのリスナーを 1 回だけ追加します。
46–53 行目: プレーヤーの error() メソッドを呼び出し、表示する errors 情報を定義した JSON を引数として渡します。エラーコードに -3 を選択しているのは任意であり、標準のエラーコード（現在 1–5）は使用しないという点のみがガイダンスです。
57 行目: カスタムエラー情報を表示するために error() メソッドを呼び出します。ドメイン制限エラーの発生判定ロジックは前述と同じです。引数として渡すオブジェクトで、表示するエラーメッセージを指定します。

        <script type="text/javascript">
          videojs.getPlayer('myPlayerID').one('bc-catalog-error', function(){
            var myPlayer = this,
              specificError;
            myPlayer.errors({
              'errors': {
                '-3': {
                  'headline': 'The video you are trying to watch cannot be viewed because of domain restrictions.',
                  'type': 'DOMAIN'
                }
              }
            });
            if (typeof(myPlayer.catalog.error) !== 'undefined') {
              specificError = myPlayer.catalog.error.data[0];
              if (specificError !== 'undefined' & specificError.error_subcode == "DOMAIN") {
                myPlayer.error({code:'-3'});
              };
            };
          });
      
          videojs.getPlayer('myPlayerID').ready(function() {
            var myPlayer = this;
          });
        </script>

次のスクリーンショットは、定義したエラーを errors プラグインが表示している例です。

一般的なエラー表示

上記 2 つのセクションは、地域制限された動画を制限地域から視聴した際に生成されるエラーの表示に特化しています。中には、ドメイン制限ほど詳細情報を提供しないエラーもあります。そのタイプのエラーオブジェクト例を以下に示します。data フィールドが空である点に注目してください。ドメイン制限のエラーではここに重要なエラー情報が含まれていました。

以下のコードは、詳細度にかかわらず catalog.error から情報を表示する方法を示しています。高レベルでは、コードは次の処理を行います。

カタログエラーが発生しているかを確認する。
エラーオブジェクト内の data フィールドに特定エラー情報が含まれているかを確認し、含まれていない場合は一般的なエラーメッセージを HTML に挿入する。
特定エラー情報があり、かつドメイン制限に関連している場合は、適切なメッセージを HTML に挿入する。
特定エラー情報があり、ドメイン制限に関連していない場合は、その特定エラーのメッセージを HTML に挿入する。

        <script type="text/javascript">
          videojs.getPlayer('myPlayerID').one('bc-catalog-error', function(){
            var myPlayer = this,
              specificError;
            if (myPlayer.catalog.error != undefined) {
              specificError = myPlayer.catalog.error.data[0];
              if (specificError == undefined) {
                document.getElementById("textTarget").innerHTML = "The following error has occurred: <strong>" + myPlayer.catalog.error.message + "</strong>";
              } else if (specificError.error_subcode == "DOMAIN") {
                document.getElementById("textTarget").innerHTML = "The video you are trying to watch cannot be viewed because of domain restrictions.";
              } else {
                document.getElementById("textTarget").innerHTML = "The following error has occurred: " + specificError.message;
              };
            };
          });
      
          videojs.getPlayer('myPlayerID').ready(function() {
            var myPlayer = this;
          });
        </script>

次のスクリーンショットは、HTML に一般的なエラーメッセージが表示されている様子です。もちろん、前のセクションで示したように errors プラグインを使用してメッセージを表示することも可能です。