ステップバイステップ:Brightcove Player
概要
このドキュメントでは、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ページを作成し、貼り付けます高度な(ページ内埋め込み)上から本文へのコード。
- 次のようなコードを調べ、属性に注意してください。
<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() { });
- 関数のローカル変数を作成します。
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>
- 変更を保存し、ブラウザでページを更新して、ビデオの再生が自動的に開始されるのを確認します。ビデオが開始すると、オーバーレイが表示されます。ビデオを一時停止して、オーバーレイが削除されたことを確認します。
- レビューのために、ページ全体の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>