ステップ・バイ・ステップ：Brightcove プレーヤー

このトピックでは、Brightcove プレーヤーの外観をカスタマイズするための実践的な手順を説明します。Brightcove プレーヤーの外観を変更するには、Cascading Style Sheets（CSS）を使用します。本ドキュメントでは、動画の上に初期表示される再生ボタンのデザインと位置を変更する方法を紹介します。

概要

このドキュメントでは、新しい Brightcove プレーヤーを作成し、2 種類のコード実装を使用して動画を公開する方法について、実践的に説明します。また、プログラム的に動画を再生し、プレーヤーにプラグインを追加する手順も紹介します。

このクイックスタートでは、以下の手順を行います。

  • Studio を使用してプレーヤーを作成する
  • Studio を使用してプレーヤー内で動画を公開する
  • iframe プレーヤー実装を使用する
  • Video タグ埋め込み実装を使用する
  • プログラム的に動画を再生する
  • プレーヤーにオーバーレイ プラグインを追加する

プレーヤーの作成

新しいプレーヤーを作成するには、以下の手順に従います。

  1. https://studio.brightcove.com/ にアクセスして Studio にログインします。
  2. 現在のアカウント名はページ左上の製品名（この場合 Video Cloud）の下に表示されます。プロフィールをクリックすると、現在のアカウントとその他の利用可能なアカウントが表示されます。作業するアカウントをクリックして選択します。
    現在のアカウントを選択
  3. メイン ナビゲーションの Players リンクをクリックします。
  4. プレーヤーを追加 ボタンをクリックします。
  5. 名前 と 簡単な説明 を入力します。このクイックスタートでは、プレーヤー名を Sample Player とします。
    プレーヤー作成ダイアログ
  6. 保存 をクリックします。
  7. 新しく作成したプレーヤーが一覧に表示されることを確認します。
    プレーヤー一覧

プレーヤーで動画を公開する

次に、Media モジュール内で作成したプレーヤーを使用して動画を公開します。プレーヤーに動画を関連付けて公開すると、3 種類の実装形式でプレーヤーを確認できます。

動画をプレーヤーで公開するには、以下の手順に従います。

  1. Studio のメイン ナビゲーションで Media アイコンをクリックし、Media モジュールに移動します。
  2. 公開したい動画の行をクリックし、公開と埋め込み > Web プレーヤー を選択します。
    動画を選択
  3. プレーヤーを選択 ドロップダウンメニューから、新しく作成したプレーヤーを選択します。
    公開 UI
  4. プレーヤーの3つの実装形式（iframe、Videoタグ（インページ埋め込み）、およびブラウザでプレビュー URL）を利用できます。このウィンドウは後ほど何度もコードをコピーするため、閉じないでください。
    公開 UI

JSON エディターを使用してプレーヤーに動画を追加します。動画コンテンツを設定するには、以下の手順に従います。

  1. Sample Player のリンクをクリックして、プレーヤーのプロパティページを開きます。
  2. 左側のナビゲーションメニューで JSON エディタ をクリックします。
  3. JSON の下から2番目の中括弧の後にカンマを追加します。
  4. 最後の閉じ括弧の直前に以下のコードを追加し、プレーヤーに動画とポスターを設定します。もちろん、自分の動画とポスターに置き換えることもできます。 
    "media": { "sources": [{
   "src": "//solutions.brightcove.com/bcls/assets/videos/BirdsOfAFeather.mp4", "type": "video/mp4"
   }],
   "poster": {
   "highres": "//solutions.brightcove.com/bcls/assets/images/BirdsOfAFeather.jpg"
   }
   }
  5. JSON は以下のように表示されるはずです（追加部分は黄色でハイライトされています）。
    JSON エディター
  6. 保存 をクリックします。
  1. 公開 をクリックし、変更の公開 を選択してプレーヤーを公開します。
  2. 同じダイアログで、変更を公開した後、iframe または Videoタグの実装コードをコピーできます。実装コードは、プレーヤーの情報 の設定で保存された サイズ（レスポンシブ または 固定）、アスペクト比、および 寸法 を反映します。
  3. 両方の実装コードをテキスト ファイルにコピーし、後で使用できるようにします。

iframe コードを使用する

  1. HTML ページを作成し、前の手順で取得した iframe コードを body に貼り付けます。
  2. このページを閲覧すると、動画は設定した サイズ（レスポンシブ または 固定）、アスペクト比、寸法 が反映されて表示されます。

Video タグ埋め込みコードを使用する

このセクションでは、Video タグ（インページ埋め込み）コード実装を使用します。

  1. Video Cloud Studio の公開ダイアログに戻ります。
  2. Videoタグ コードを表示し、サイズ の 固定 ラジオボタンをクリックします。
  3. HTML ページを作成し、上記の Video タグ（インページ埋め込み）コードを body に貼り付けます。
  4. 次のように表示されるコード（読みやすくするために改行を追加）を確認し、属性を確認します。 
         <video-js data-account="1507807800001"
      data-player="EUYJo0AOB"
      data-embed="default"
      controls=""
      data-video-id="6071787405001"
      data-playlist-id=""
      data-application-id=""
      width="640" height="360"></video-js>
    <script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>
    • data-account ：アカウント番号
    • data-player ：Brightcove プレーヤーの ID
    • data-embed ：プレーヤーが親埋め込みの場合は default、もしくは親プレーヤーの ID。埋め込み（親／子プレーヤー）に関する詳細は Embed APIs ガイド を参照してください。
    • controls ：プレーヤー コントロールを表示するかどうかのブール値（タグに controls 属性が含まれている場合は表示、含まれていない場合は非表示）
    • data-video-id ：Video Cloud の動画 ID（プレイリスト ID を指定する場合は使用しない）
    • data-playlist-id ：Video Cloud のプレイリスト ID（動画 ID を指定する場合は使用しない）
    • data-application-id ：単一のプレーヤーを再利用しつつ、サイトやアプリケーションごとにアナリティクスを区別するための識別子。詳細は プレーヤー埋め込みコードへのアプリケーション ID の追加 を参照。
    • width & height ：プレーヤーの寸法を設定します。
    • <script> タグ：インページコードを使用する場合は必ず対応する script タグが付きます。参照される JavaScript ファイルには、そのプレーヤーに関連するすべての JavaScript と CSS が含まれます。
  5. 次のように表示されるコードを確認し、属性を確認します。 
         <video data-account="1507807800001"
     data-player="H15p1gTkg"
     data-embed="default"
     data-application-id
     controls=""></video>
     <script src="https://players.brightcove.net/1507807800001/H15p1gTkg_default/index.min.js"></script>
    • data-account ：アカウント番号
    • data-player ：Brightcove プレーヤーの ID
    • data-embed ：プレーヤーが親埋め込みの場合は default、もしくは親プレーヤーの ID。埋め込み（親／子プレーヤー）に関する詳細は Embed APIs ガイド を参照してください。
    • class ：インページ埋め込みコードに関連付けられた標準の Brightcove プレーヤー CSS クラス
    • controls ：プレーヤー コントロールを表示するかどうかのブール値（タグに controls 属性が含まれている場合は表示、含まれていない場合は非表示）
    • <script> tag ：該当プレーヤーに関連するすべての JavaScript と CSS
  6. このページを閲覧すると、動画は設定した サイズ（固定）、アスペクト比、寸法 が反映されて表示されます。

プログラムで動画を再生する

Brightcove プレーヤーには豊富な API が用意されています。このセクションでは、play() メソッドを使用してプログラム的に動画の再生を開始します。

  1. video タグに id 属性を追加し、値を myPlayerID に設定します。 
         <video id="myPlayerID"
  2. 閉じる body タグの直前に、script ブロックを挿入します。 
         <script> </script>
     </body>
  3. スクリプト ブロック内で、on() メソッドを使用して loadedmetadata イベントを監視します。イベントがディスパッチされると、無名のイベント ハンドラー関数が呼び出されます。 
    videojs.getPlayer('myPlayerID').on('loadedmetadata', function() {
       
    });
  4. 関数内で、this として参照されるプレーヤー インスタンスを変数 myPlayer に代入します。 
         var myPlayer = this;
  5. ほとんどのブラウザでは音声付き動画の自動再生が許可されないため、muted() メソッドで動画をミュートし、自動再生を確実に行うことを推奨します。 
         myPlayer.muted(true);

    自動再生の詳細については、Autoplay Considerations を参照してください。

  6. プレーヤーの play() メソッドを使用して動画の再生を開始します。 
         myPlayer.play();
  7. スクリプト ブロックが次のようになっていることを確認します。 
         <script> 
       videojs.getPlayer('myPlayerID').on('loadedmetadata', function() { 
         var myPlayer = this;
         myPlayer.muted(true);
         myPlayer.play();
       });
     </script>
  8. 変更を保存し、ブラウザでページを更新して動画が自動再生されることを確認します。音声トラック付きの動画を選択した場合でも、ブラウザの仕様により自動再生では音声は再生されません（Brightcove の制限ではありません）。

プラグインを追加する

Brightcove プレーヤーには、プレーヤーを拡張するために利用できる多数のプラグインがあります。 その一つが Overlay プラグインです。本セクションでは、前のセクションで完成させた Videoタグコードにこのプラグインを追加します。プラグインの詳細は オーバーレイプラグインの表示 ドキュメントをご覧ください。

プラグインを使用する場合、プラグイン実装となる JavaScript のパスを指定する必要があります。プラグインによっては、必要に応じて CSS へのリンクも指定する必要があります。

  1. 閉じる head タグの直前に、オーバーレイ プラグインの CSS の場所を指す次の link 記述を挿入します。 
         <link href="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css" rel='stylesheet'> </head>
  2. 先ほど追加したスクリプトブロックの直前に、オーバーレイ プラグインの機能を実装する実体の JavaScript である次の script タグを追加します。 
         <script src="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js"></script> <script>
     videojs.getPlayer('myPlayerID').on('loadedmetadata', function() {
  3. play() メソッドを使用している箇所の直後に、プレーヤーの overlay() メソッドを呼び出し、JSON 設定オブジェクトを渡す準備として引数に波括弧を追加します。 
         myPlayer.overlay({ });
  4. 複数のオーバーレイ オブジェクトを配列としてプラグインに渡すことで、さまざまなタイミングや位置に異なるコンテンツを表示できます。ここでは、テキストを 1 つだけ表示し、動画の再生中のみ表示、ポーズ時は非表示にします。さらに、オーバーレイをプレーヤーの右側中央に表示します。これを実装するため、次のオーバーレイ オブジェクトを設定パラメータとして追加します。 
         overlays: [{ 
      content: 'This event-triggered overlay message appears when the video is playing', 
      start: 'play',
      end: 'pause',
      align: 'right'
    }]
  5. スクリプト ブロックが次のようになっており、オーバーレイ プラグインが正しく呼び出され、設定されていることを確認します。 
         <script> 
      videojs.getPlayer('myPlayerID').on('loadedmetadata', function() {
        var myPlayer = this;
        myPlayer.muted(true);
        myPlayer.play();
        myPlayer.overlay({
          overlays: [{
            content: 'This event-triggered overlay message appears when the video is playing', 
            start: 'play',
            end: 'pause',
            align: 'right'
          }]
        });
      });
    </script>
  6. 変更を保存し、ブラウザでページを更新して動画が自動再生されることを確認します。動画の開始時にオーバーレイが表示され、ポーズするとオーバーレイが消えることがわかります。
  7. 参考として、ページ全体の HTML コードは以下のとおりです。
        <!doctype html> 
    <html>
    <head>
      <meta charset="UTF-8">
      <title>Untitled Document</title>
      <link href="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css" rel='stylesheet'> </head>
    <body>
      <video-js id="myPlayerID"
        data-account="1752604059001"
        data-player="UEoNyhSA6"
        data-embed="default"
        controls=""
        data-video-id="4607357817001"
        data-playlist-id=""
        data-application-id=""
        width="960" height="540"></video>
      <script src="https://players.brightcove.net/1752604059001/UEoNyhSA6_default/index.min.js"></script> 
      
      <script src="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js"></script> 
      <script>
        videojs.getPlayer('myPlayerID').on('loadedmetadata', function() { 
          var myPlayer = this;
          myPlayer.muted(true);
          myPlayer.play();
          myPlayer.overlay({
            overlays: [{
              content: 'This event-triggered overlay message appears when the video is playing', 
              start: 'play',
              end: 'pause',
              align: 'right'
            }]
          });
        });
      </script>
    </body>
    </html>
         <!doctype html> <html>
     <head>
     <meta charset="UTF-8">
     <title>Untitled Document</title>
     <style>
     .video-js {
     height: 344px;
     width: 610px;
     }
     </style>
     <link href="https://players.brightcove.net/videojs-overlay/lib/videojs-overlay.css" rel='stylesheet'> </head>
     <body>
     <video id="myPlayerID"
     data-account="3676484087001"
     data-player="78ef7d78-18d9-4459-a6da-d94e46163076"
     data-embed="default"
     controls></video>
     <script src="https://players.brightcove.net/3676484087001/78ef7d78-18d9-4459-a6da-d94e46163076_default/index.min.js"></script> <script src="https://players.brightcove.net/videojs-overlay/lib/videojs-overlay.js"></script> <script>
     videojs.getPlayer('myPlayerID').on('loadedmetadata', function () { var myPlayer = this;
     myPlayer.play();
     myPlayer.overlay({
     overlays: [{
     content: 'This event-triggered overlay message appears when the video is playing', start: 'play',
     end: 'pause'
     }]
     });
     });
     </script>
     </body>
     </html>