ステップバイステップ：ブライトコーブプレイヤー

概要

このドキュメントでは、Brightcove Player を作成し、2 つの異なるコード実装を使用して、新しく作成したプレーヤーを使用して動画を公開する方法の実践的な概要を説明します。また、プログラムでビデオの再生を開始し、プラグインをプレーヤーに追加します。

このクイックスタートでは、次のタスクを実行します。

Studioを使用してプレーヤーを作成する
Studio を使用してプレーヤーでビデオを公開する
iframeプレーヤーの実装を使用する
インページ埋め込みの実装を使用する
プログラムでビデオを再生する
オーバーレイプラグインをプレーヤーに追加する

プレイヤーの作成

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

https://studio.brightcove.com/ でStudioにログインします。
現在のアカウント名は、ページの右上隅に表示されます。複数のアカウントをお持ちの場合は、当座預金リンクして、プレーヤーを作成するアカウントを選択します。
ナビゲーションヘッダーの[プレーヤー]リンクをクリックします。
[ 新規プレーヤー ] ボタンをクリックします。
プレイヤーの名前と短い説明を入力します。このクイックスタートでは、プレイヤー名は次のようになりますサンプルプレーヤー。
[ 保存] をクリックします。
新しく作成したプレーヤーがプレーヤーのリストに表示されることを確認します。

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

メディアモジュールで新しく作成したプレーヤーでビデオを公開します。ビデオをプレーヤーに関連付けると、ビデオを公開し、プレーヤーでビデオを表示するための 3 つの実装にアクセスできるようになります。

プレーヤーでビデオを公開するには、次の手順に従います。

Studioで、をクリックしてメディアモジュールに移動します。メディアメインメニューのリンク。
プレーヤーで公開するオーディオトラックがない動画の行をクリックし、[公開して埋め込む] > [Web に公開] の順にクリックします。
注:ビデオにオーディオトラックがある場合、自動的には再生されません。これは、ドキュメントの後半で再生します。ユーザー操作なしで再生する動画の詳細については、ドキュメント「自動再生に関する考慮事項」を参照してください。
からプレーヤーを選択するドロップダウンメニューで、新しく作成したプレーヤーを選択します。
これで、プレーヤーの3つの実装にアクセスできます。標準 (iframe)、詳細設定 (ページ内)、ブラウザーでのプレビュー URL。このクイックスタートの後半で何度もコードをコピーするため、このウィンドウを閉じないでください。

JSONエディターを使用して、プレーヤーにビデオを追加します。ビデオコンテンツを構成するには、次の手順に従います。

サンプルプレーヤーのリンクをクリックして、プレーヤーのプロパティページを開きます。
左側のナビゲーションメニューで [ JSON エディタ ] をクリックします。
JSON の 2 番目から最後の中括弧の後ろにカンマを置きます。
最後の閉じ括弧のすぐ上に、以下を追加して、ビデオとポスターをプレーヤーに割り当てます。もちろん、あなたはあなた自身のビデオとポスターを代用することができます。
```
 "media": { "sources": [{
 "src": "//solutions.brightcove.com/bcls/assets/videos/BirdsOfAFeather.mp4", "type": "video/mp4"
 }],
 "poster": {
 "highres": "//solutions.brightcove.com/bcls/assets/images/BirdsOfAFeather.jpg"
 }
 }
```
JSONは次のように表示されます（追加されたテキストは黄色で強調表示されます）。
[ 保存 ] をクリックします。

クリック公開と埋め込みその後変更を公開するプレーヤーを公開します。
変更を公開したのと同じダイアログで、標準（iframe）または詳細（ページ内埋め込み）プレーヤーの実装コードをコピーすることもできます。実装コードにはサイジングが反映されることに注意してください ( レスポンシブ または 修正済み )、 アスペクト比 そして寸法 [ プレイヤー情報 ] オプションで行い、保存した選択肢。
後で使用するために、両方のコード実装タイプをテキストファイルにコピーします。

標準コードを使用する

HTMLページを作成し、貼り付けます標準（iframe）前のステップのコードを本文に挿入します。
このページを閲覧すると、ビデオがサイジングを反映していることがわかります ( レスポンシブ または 修正済み )、アスペクト比と寸法の選択が行われた。

高度な埋め込みを使用するコード

このセクションでは、高度な（ページ内埋め込み）コード実装を使用します。

Video Cloud Studio のパブリッシュダイアログに戻ります。
を見る高度コードを入力してクリックします修理済みラジオボタンサイジング。
レスポンシブサイジングには、プレーヤーをレスポンシブにする HTML が含まれています。このアクティビティでは、プレーヤーコードに重点を置いているため、より単純な固定サイズを使用します。
HTMLページを作成し、貼り付けます高度な（ページ内埋め込み）上から本文へのコード。
次のようなコードを調べ、属性に注意してください。
```
 <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 PlayerのID
- data-embed :defaultプレーヤーが親埋め込みの場合、または親プレーヤーの ID。埋め込み（親/子プレイヤー）の詳細については、Embed API ガイドを参照してください。
- controls :プレイヤーコントロールが存在する場合（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 が含まれています
次のようなコードを調べ、属性に注意してください。
```
 <video data-account="1507807800001"
 data-player="H15p1gTkg"
 data-embed="default"
 data-application-id
 class="video-js"
 controls></video>
 <script src="https://players.brightcove.net/1507807800001/H15p1gTkg_default/index.min.js"></script>
```
- data-account :アカウント番号
- data-player :Brightcove PlayerのID
- data-embed :defaultプレーヤーが親埋め込みの場合、または親プレーヤーの ID です。埋め込み (親/子プレイヤー) の詳細については、Embed API ガイドを参照してください。
- class :ページ内埋め込みコードに関連付けられた標準の Brightcove Player CSS クラス
- controls :プレーヤーコントロールが存在する場合 ( controlsタグに含まれる属性)、または表示されない ( controls属性がタグ)
- <script> tag :特定のプレーヤーに関連付けられているすべての関連付けられているJavaScriptとCSS
このページを閲覧すると、ビデオがサイジングを反映していることがわかります ( 修正済み )、アスペクト比と寸法の選択が行われた。

プログラムでビデオを再生する

Brightcove Playerで使用できるリッチな API があります。このセクションでは、play()メソッドを使用して、プログラムでビデオの再生を開始します。

追加しますidに属性videoの値を持つタグmyPlayerID。
```
 <video id="myPlayerID" 
```
クロージングのすぐ上bodyタグ、挿入scriptブロック。
```
 <script> </script>
 </body>
```
スクリプトブロックで、on()聞く方法loadedmetadataイベント。イベントがディスパッチされると、匿名のイベントハンドラー関数が呼び出されます。
```
 videojs.getPlayer('myPlayerID').on('loadedmetadata', function() { });
```
Note:Brightcove Player のスタートアップイベントの詳細については、『プレイヤーイベントについて』ドキュメントの「スタートアップイベント」セクションを参照してください。
関数のローカル変数を作成します。myPlayer、として参照されるプレーヤーインスタンスを割り当てますthis、その変数に。
```
 var myPlayer = this;   
```
ほとんどのブラウザでは、オーディオトラックを含むビデオの自動再生が許可されなくなったため、muted()この方法を使用してビデオをミュートし、ビデオが自動再生されるようにすることをお勧めします。
```
 myPlayer.muted(true);   
```
自動再生の問題の詳細については、「自動再生の考慮事項」を参照してください。
play()プレーヤーの方法を使用してビデオを開始します。
```
 myPlayer.play();
```

スクリプトブロックが次のように表示されることを確認します。

 <script> 
   videojs.getPlayer('myPlayerID').on('loadedmetadata', function() { 
     var myPlayer = this;
     myPlayer.muted(true);
     myPlayer.play();
   });
 </script>

変更を保存し、ブラウザでページを更新して、ビデオの再生が自動的に開始されるのを確認します。オーディオトラックを含むビデオを選択した場合、ビデオを再生するには [再生] ボタンをクリックする必要があります。

プラグインの追加

Brightcove Player には、プレーヤーを強化するために利用できる多くのプラグインがあります。そのようなプラグインの1つがオーバーレイプラグインです。このセクションでは、前のセクションで終了した高度なコードにそのプラグインを追加します。プラグインの詳細については、オーバーレイプラグインを表示資料。

プラグインを使用する場合は、プラグインの実装である JavaScript へのパスを指定する必要があります。プラグインで必要な場合は、CSS へのリンクを提供する必要があります。

クロージングのすぐ上headタグを付けて、オーバーレイプラグインのCSSの場所を指す次のリンクステートメントを挿入します。
```
 <link href="https://players.brightcove.net/videojs-overlay/lib/videojs-overlay.css" rel='stylesheet'> </head>
```
前に追加したスクリプトブロックのすぐ上に、次を追加しますscriptオーバーレイプラグイン機能を実装する実際のJavaScriptコードであるタグ。
```
 <script src="https://players.brightcove.net/videojs-overlay/lib/videojs-overlay.js"></script> <script>
 videojs.getPlayer('myPlayerID').on('loadedmetadata', function() {
```
直後play()メソッドが使用されている場合は、プレーヤーを呼び出しますoverlay()メソッドを指定し、JSON構成オブジェクトを渡す準備をするためのパラメーターとして中括弧を追加します。
```
 myPlayer.overlay({ });
```
複数のオーバーレイオブジェクトを配列としてプラグインに渡して、さまざまな時間にさまざまな場所にさまざまなコンテンツを表示できます。この場合、1 つのオーバーレイオブジェクトが渡され、テキストが表示され、ビデオの再生時にのみ表示されます。ビデオが一時停止されると、オーバーレイは表示されません。これを実装するには、次のオーバーレイオブジェクトを構成パラメーターとして追加します。
```
 overlays: [{ 
  content: 'This event-triggered overlay message appears when the video is playing', 
  start: 'play',
  end: 'pause'
}]
```

スクリプトブロックが次のように表示され、オーバーレイプラグインが呼び出されて正しく構成されていることを確認します。

 <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'
      }]
    });
  });
</script>

変更を保存し、ブラウザでページを更新して、ビデオの再生が自動的に開始されるのを確認します。ビデオが開始すると、オーバーレイが表示されます。ビデオを一時停止して、オーバーレイが削除されたことを確認します。
Note:ここでのオーバーレイプラグインショーの実装は、特定のHTMLページのプレーヤーでのみ使用されます。コードを繰り返しコピーして貼り付けることなく、プレーヤーが使用されている場所や回数に関係なく、プラグインをプレーヤーの一部に追加することができます。ステップバイステップを参照してください。プラグインの開発では、実装に対する開発者指向のアプローチを参照するか、Studio を使用してプラグインをプレイヤーに実装する方法については「Player プラグインの設定」ドキュメントを参照してください。

レビューのために、ページ全体の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-video-id="4093372393001"
    data-account="1507807800001"
    data-player="H15p1gTkg"
    data-embed="default"
    data-application-id
    class="video-js"
    controls></video>
  <script src="https://players.brightcove.net/1507807800001/H15p1gTkg_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.muted(true);
      myPlayer.play();
      myPlayer.overlay({
        overlays: [{
          content: 'This event-triggered overlay message appears when the video is playing', 
          start: 'play',
          end: 'pause'
        }]
      });
    });
  </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"
 class="video-js"
 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>

ページコンテンツ

ステップバイステップ:Brightcove Player

概要

プレイヤーの作成

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

標準コードを使用する

高度な埋め込みを使用するコード

プログラムでビデオを再生する

プラグインの追加

ページコンテンツ

ステップバイステップ:Brightcove Player

概要

プレイヤーの作成

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

標準コードを使用する

高度な埋め込みを使用する コード

プログラムでビデオを再生する

プラグインの追加

高度な埋め込みを使用するコード