ModalDialog の実装

例

以下は ModalDialog コンポーネントの例です。この例では、プレーヤーの初期表示時にモーダルウィンドウが表示されますが、プログラムによって表示するためのメソッドも用意されています。ここでは、モーダルウィンドウ内に黄色のテキストのみが表示されます。右上の X をクリックするか、ESC を押すまで、モーダルウィンドウはプレーヤーへのすべての操作をブロックします。

ModalDialog の作成

ModalDialog を実装する方法はいくつかありますが、本ドキュメントで使用する 2 つの方法は次のとおりです。

ヘルパー関数である createModal() を使用する
ModalDialog() コンストラクターを使用する

createModal() ヘルパー関数を使用する

createModal() メソッドは、ModalDialog をより簡単に使用できるようにコードをカプセル化したものです。構文は次のとおりです。

createModal(content,options)

パラメーター	必須	説明
content	いいえ（ただし未指定の場合、モーダルには何も表示されません）	モーダルに表示するコンテンツ
options	いいえ	モーダルのその他のオプションを設定するオブジェクト（詳細は本ドキュメントの後半で説明します）

以下は、Brightcove Player で ModalDialog を作成して使用するシンプルな実装例です。

    <video-js id="myPlayerID"
      data-video-id="5079788144001"
      data-account="1507807800001"
      data-player="HJLWns1Zbx"
      data-embed="default"
      data-application-id=""
      controls=""></video-js>
    <script src="https://players.brightcove.net/1507807800001/HJLWns1Zbx_default/index.min.js"></script>
  
    <script type="text/javascript">
      videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this;
        myPlayer.createModal('ヘルパー関数を使用');
      });
    </script>

    <video-js id="myPlayerID"
      data-account="3676484087001"
      data-player="S1lOCfk6Ze"
      data-embed="default"
      data-application-id=""
      controls=""></video-js>
    <script src="https://players.brightcove.net/3676484087001/S1lOCfk6Ze_default/index.min.js"></script>
  
    <script type="text/javascript">
      videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this;
        myPlayer.createModal('ヘルパー関数を使用');
      });
    </script>

ModalDialog コンストラクターを使用する

クラスのコンストラクターを使用して ModalDialog を実装することもできます。これは、クラスを取得してからオブジェクトをインスタンス化するという 2 段階の手順になります。構文は次のとおりです。

  var ModalDialog = videojs.getComponent('ModalDialog');
  var myModal = new ModalDialog(player, options);

パラメーター	必須	説明
player	はい	モーダルを適用するプレーヤー
options	いいえ	モーダルのその他のオプションを設定するオブジェクト（詳細は次のセクションで説明します）

以下は、Brightcove Player で ModalDialog を作成して使用する実装例です。

    <video-js id="myPlayerID"
      data-video-id="5079788144001"
      data-account="1507807800001"
      data-player="B1mMJs3Ge"
      data-embed="default"
      data-application-id=""
      controls=""></video-js>
    <script src="https://players.brightcove.net/1507807800001/B1mMJs3Ge_default/index.min.js"></script>
  
    <script type="text/javascript">
      videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this,
          options = {};
          options.content = 'モーダル内のテキスト';
          options.label = 'ラベル';
  
        var ModalDialog = videojs.getComponent('ModalDialog');
        var myModal = new ModalDialog(myPlayer, options);
        myPlayer.addChild(myModal);
        myModal.open();
      });
    </script>

    <video-js id="myPlayerID"
      data-account="3676484087001"
      data-player="S1lOCfk6Ze"
      data-embed="default"
      data-application-id=""
      controls=""></video-js>
    <script src="https://players.brightcove.net/3676484087001/S1lOCfk6Ze_default/index.min.js"></script>
  
    <script type="text/javascript">
      videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this,
          options = {};
        options.content = 'モーダル内のテキスト';
        options.label = 'ラベル';
  
        var ModalDialog = videojs.getComponent('ModalDialog');
        var myModal = new ModalDialog(myPlayer, options);
        myPlayer.addChild(myModal);
        myModal.open();
      });
    </script>

この例では、ModalDialog に表示されるテキストは options.content の値で設定しています。

options オブジェクト

以下は、ModalDialog クラスで使用できる options オブジェクトのプロパティです。

プロパティ	データ型	デフォルト値	説明
content	Mixed（文字列または DOM 要素）	未定義	モーダル内に表示されるカスタマイズ可能なコンテンツ
description	String	未定義	主にアクセシビリティ用途で使用される、モーダルのテキスト説明
fillAlways	Boolean	true	通常、モーダルは初回表示時のみ自動的に内容が設定されますが、このオプションを指定すると、表示されるたびにコンテンツが再読み込みされます
label	String	未定義	主にアクセシビリティ用途で使用される、モーダルのテキストラベル
temporary	Boolean	true	`true` の場合、モーダルは 1 回のみ開くことができ、閉じられると直ちに破棄されます
uncloseable	Boolean	false	`true` の場合、通常の UI 操作ではモーダルを閉じることができませんが、プログラムによるクローズは可能です

前述のコード例では、options オブジェクトを使用して content および label プロパティを設定し、ModalDialog で利用しています。

メソッド

以下は、ModalDialog クラスに含まれるメソッドです。

メソッド	説明
close()	モーダルを閉じます
closeable()	モーダルを閉じることが可能かどうかを示す Boolean 値を返します
description()	このモーダルの説明文字列を返します（主にアクセシビリティ用途）
empty()	コンテンツ要素を空にします。この処理は、モーダルが内容で埋められるたびに自動的に実行されます
fill()	モーダルの `content` オプションを使用してコンテンツ要素を埋めます。この処理の前に、コンテンツ要素は空にされます
label()	このモーダルのラベル文字列を返します（主にアクセシビリティ用途）
open()	モーダルを開きます
opened()	現在モーダルが開いているかどうかを示す Boolean 値を返します

HTML コンテンツの使用

ここまで、モーダルに表示するコンテンツはシンプルな文字列でした。HTML 要素をコンテンツとして使用したい場合は、少し異なるアプローチが必要です。

HTML をコンテンツとして使用するポイントは、後から content に割り当てる HTML 要素を作成しておくことです。以下のコードでは、JavaScript の createElement() メソッドを使用して、他の HTML を配置できるコンテナー要素を作成しています。動的に作成した要素を、その後 content プロパティに割り当てます。コードと結果のスクリーンショットを以下に示します。

    //HTML コンテンツを配置するための div を作成
    var newElement = document.createElement('div');
    //div にデータを配置
    newElement.innerHTML = "<p style='font-size: 1em;'>段落内のテキストです</p><ul><li>リスト内の項目です</li></ul>";
    //要素を content に割り当て
    options.content = newElement;

コンテンツのスタイル設定

デフォルトでは、モーダルに表示されるテキストは白色で、左上に配置されます。以下のとおりです。

CSS を使用して、テキストの位置やスタイルを変更できます。これを行うには、ModalDialog にクラスを追加し、そのクラスのセレクターを作成して任意のスタイルを適用します。モーダルのスタイル設定は、次の手順で行います。

プログラムによってモーダルにクラスを追加します。本ドキュメントでは .vjs-my-custom-modal を使用していますが、クラス名は任意で構いません
新しく追加したクラスと、モーダルの子要素として自動的に付与されるクラスを使用してスタイルを作成します。このクラスは .vjs-modal-dialog-content です。例：
```
    .vjs-my-custom-modal .vjs-modal-dialog-content {
      color: red;
      margin-top: 40px;
      margin-left: 40px;
    }
```

上記のスタイルは、次のように表示されます。

以下は、createModal() ヘルパー関数でスタイルを適用するためのコードです。

    <head>
      <meta charset="UTF-8">
      <title>無題のドキュメント</title>
      <style>
        .video-js {
          height: 344px;
          width: 610px;
        }
        .vjs-my-custom-modal .vjs-modal-dialog-content {
          color: red;
          margin-top: 40px;
          margin-left: 40px;
        }
      </style>
    </head>
    
    <body>
    
      <video-js id="myPlayerID"
        data-video-id="5079788144001"
        data-account="1507807800001"
        data-player="HJLWns1Zbx"
        data-embed="default"
        data-application-id=""
        controls=""></video-js>
      <script src="https://players.brightcove.net/1507807800001/HJLWns1Zbx_default/index.min.js"></script>
    
      <script type="text/javascript">
        videojs.getPlayer('myPlayerID').ready(function() {
          var myPlayer = this;
          const myModal = myPlayer.createModal('モーダル内');
          myModal.addClass('vjs-my-custom-modal');
        });
      </script>

    <head>
      <meta charset="UTF-8">
      <title>無題のドキュメント</title>
      <style>
        .video-js {
          height: 344px;
          width: 610px;
        }
        .vjs-my-custom-modal .vjs-modal-dialog-content {
          color: red;
          margin-top: 40px;
          margin-left: 40px;
        }
      </style>
    </head>
    
    <body>
    
      <video-js id="myPlayerID"
        data-account="1507807800001"
        data-player="HJLWns1Zbx"
        data-embed="default"
        data-application-id=""
        controls=""></video-js>
      <script src="https://players.brightcove.net/1507807800001/HJLWns1Zbx_default/index.min.js"></script>
    
      <script type="text/javascript">
        videojs.getPlayer('myPlayerID').ready(function() {
          var myPlayer = this;
          const myModal = myPlayer.createModal('モーダル内');
          myModal.addClass('vjs-my-custom-modal');
        });
      </script>

以下は、ModalDialog コンストラクター関数でスタイルを適用するための完全なコードです。

    <head>
      <meta charset="UTF-8">
      <title>無題のドキュメント</title>
      <style>
        .video-js {
          height: 344px;
          width: 610px;
        }
        .vjs-my-custom-modal .vjs-modal-dialog-content {
          color: red;
          margin-top: 40px;
          margin-left: 40px;
        }
      </style>
    
    </head>
    
    <body>
    
      <video-js id="myPlayerID"
        data-video-id="5079788144001"
        data-account="1507807800001"
        data-player="HJLWns1Zbx"
        data-embed="default"
        data-application-id=""
        controls=""></video-js>
      <script src="https://players.brightcove.net/1507807800001/HJLWns1Zbx_default/index.min.js"></script>
    
      <script type="text/javascript">
        videojs.getPlayer('myPlayerID').ready(function() {
          var myPlayer = this,
            options = {};
            options.content = 'モーダル内';
            options.label = 'ラベル';
    
            var ModalDialog = videojs.getComponent('ModalDialog');
            var myModal = new ModalDialog(myPlayer, options);
            myModal.addClass('vjs-my-custom-modal');
            myPlayer.addChild(myModal);
            myModal.open();
        });
      </script>

    <head>
      <meta charset="UTF-8">
      <title>無題のドキュメント</title>
      <style>
        .video-js {
          height: 344px;
          width: 610px;
        }
        .vjs-my-custom-modal .vjs-modal-dialog-content {
          color: red;
          margin-top: 40px;
          margin-left: 40px;
        }
      </style>
    
    </head>
    
    <body>
    
      <video-js id="myPlayerID"
        data-account="1507807800001"
        data-player="HJLWns1Zbx"
        data-embed="default"
        data-application-id=""
        controls=""></video-js>
      <script src="https://players.brightcove.net/1507807800001/HJLWns1Zbx_default/index.min.js"></script>
    
      <script type="text/javascript">
        videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this,
          options = {};
          options.content = 'モーダル内';
          options.label = 'ラベル';
    
          var ModalDialog = videojs.getComponent('ModalDialog');
          var myModal = new ModalDialog(myPlayer, options);
          myModal.addClass('vjs-my-custom-modal');
          myPlayer.addChild(myModal);
          myModal.open();
        });
      </script>