コードサンプル 次のコードサンプルは、Brightcove Player のカスタマイズと拡張機能を示しています。二重アスタリスク ** でマークされたサンプルは、Video Cloud の機能に部分的または完全に依存します。サンプルのアルファベット順のリストもここにあります。 アウトストリーム (広告のみ) プレーヤー このサンプルは、ページ DOM <div>内の要素のサイズを動的に調整し、そこに Brightcove Player を注入し、広告をロードして再生する方法を示すヘルパー JavaScript 関数を提供します。プレーヤーを削除する 広告でプレーヤーをビューにスクロールする プレーヤーでは、既定の垂直コントロールバーの代わりに水平ボリュームコントロールバーが表示されます。 水平ボリュームコントロール（1.xプレーヤーのみ） プレーヤーでは、既定の垂直コントロールバーの代わりに、水平方向のボリュームコントロールバーが表示されます。 垂直ボリューム デフォルトの水平レイアウトではなく、垂直方向のスライダーを表示するように、ボリュームコントロールを設定します。 プレイバックバーの広告インジケータ このサンプルでは、動画に関連付けられた 3 つの広告キューポイントが青いマーカーで再生バーに表示されるプレーヤーを示しています。 SSAI プラグインを使用した広告 この例では、VMAP ファイルで定義された IMA 広告を使用して、サーバー側の広告を動画ストリームに配信しています。プリロール、ミッドロール、ポストロール広告があります。VMAP ファイルは、広告設定で定義されます。 広告カウントダウンタイマー オーバーレイプラグインを使用して、広告のカウントダウンタイマーを作成します。 モーダルダイアログ付きエイジゲート このサンプルでは、ModalDialog を使用して最初にプレーヤーをカバーします。ユーザーがモーダルウィンドウをクリックして年齢を確認すると、コントロールが表示され、ビデオが再生されます。 キューポイント表示CTA ** プレーヤーには、キューポイントに基づいて 2 つの異なる CTA が表示されます。最初の CTA は 3 秒で、5 秒間表示されます。2 番目の CTA は 13 秒で 3 秒間表示されます。 動的な行動を促すフレーズ** このプレーヤーでは、3 つの異なるアクションの呼び出しの表示テクニックを見ることができます。 iframe の親からビデオを再生/一時停止 iframe の親ページの一部である再生ボタンまたは一時停止ボタンをクリックして、iframe プレーヤーでビデオの再生/一時停止を開始します。 エイジゲート このサンプルでは、プレーヤーコントロールと再生ボタンを非表示にするオーバーレイを表示します。ユーザーがオーバーレイをクリックして年齢を確認すると、コントロールが表示され、ビデオが再生されます。 ミュート解除ボタンによる自動再生 ビデオの動作は、ビデオを実行するブラウザ/プラットフォームによって異なります。ビデオがオーディオで自動再生される場合は、自動再生されます。そうでない場合は、ビデオの再生を開始しますが、ミュート解除ボタンが表示されます。 背景ビデオランダムプレイリスト** プレーヤーには、再生リストからランダムに選択された動画が表示され、バックグラウンドビデオとして継続的に再生されます。各動画の冒頭に、各動画のタイトルと説明が表示されます。 背景ビデオ再生リスト** プレーヤーには、バックグラウンドビデオとして継続的に再生される 4 つのビデオが表示されます。また、各ビデオの先頭には、各ビデオのタイトルと説明が背景ビデオの上に表示されます。 フルウィンドウの背景ビデオ** このトピックでは、再生リストを使用してバックグラウンドビデオを提供し、ブラウザーウィンドウのサイズを変更したときに自動的にプレーヤーのサイズを変更してビデオがブラウザーウィンドウいっぱいに表示されるようにする方法を学びます。 ビデオループの作成 ループビデオを使用したい場合があります。次の使用例は、ビデオを 3 回ループし、ビデオの再生を停止します。 プログレススクラバーを無効にする ビデオを再生します。プログレススクラバーを使用してビデオを進められないことに注意してください。 動画の開始時にページ上の他のプレイヤーを停止する ビデオの 1 つの再生を開始します。次に、別のプレーヤーでビデオを再生し、再生中の他のプレーヤーでビデオの再生が停止することを確認します。 プレーヤーを動的にロードする このサンプルでは、[プレーヤーの追加] ボタンをクリックして、プレーヤーを動的に構築してロードし、ビデオを再生します。 RequireJSとBrightcove Player このトピックでは、RequireJS（JavaScript ファイルとモジュールローダー）を Brightcove Player で使用する方法について説明します。 ソースビデオを動的に変更** プレーヤーの下のボタンをクリックして、ソースビデオを動的に変更します。 キオスクアプリ** プレイヤーは、無限ループでビデオオブジェクトの配列からビデオを再生します。 キャプションアニメーション ビデオの再生を開始します。マウスをプレーヤーから遠ざけると、キャプションはコントロールバーの上に留まるようにアニメートされます。 関連リンクを表示** このサンプルでは、プレーヤーの下に表示されているビデオに関連付けられたテキストが表示されます。Studio の [メディア] > [ビデオ情報] セクションを使用して、テキストと関連するリンクを指定します。 コントロールバーにビューを表示する ビデオが再生されると、コントロールバーにビデオビューが表示されます。Analytics APIが非同期的にデータに対してクエリされるため、情報が表示されるまでに若干の遅延が生じる場合があります。 ホバー時にサムネイルを表示する この例では、ModalDialog を使用して、ビデオ内のさまざまなポイントから取得した 4 つのサムネイル画像を表示します。これにより、ユーザーはビデオの中にあるものでこっそりピークを得ることができます。 ランダムバンパーを表示する このサンプルでは、ランダムに選択されたバンパーは、プレイリストの各ビデオの前に再生されます。この場合、バンパーは広告ですが、広告サーバーから描画されるのではなく、Video Cloud ライブラリで定義されている動画です。 ハイパーリンクされた会社のロゴ 次の使用例は、プレーヤーのコントロールバーに会社のロゴを表示します。ロゴを選択すると、会社のウェブサイトにリダイレクトされます。 ライトボックスカルーセル カルーセル内のビデオ間を移動します。サムネイルを選択して、ライトボックスコンテナ内のビデオを再生します。ライトボックスが表示された状態で、[閉じる] リンクを選択して、ライトボックスコンテナを非表示にします。 スクローラー付きライトボックス サムネイル画像の下にスクロールバーをドラッグして、動画内を移動します。ビデオを選択して、ライトボックスコンテナ内のビデオを再生します。ライトボックスが表示された状態で、[閉じる] リンクを選択して、ライトボックスコンテナを非表示にします。 シンプルなライトボックス この例では、Brightcove Player でライトボックスを開くインタラクティブなビデオポスター画像を表示します。ポスター画像を選択して、ライトボックスコンテナ内のビデオを再生します。 ロゴオーバーレイプラグイン 次の例では、プレーヤーの左下にロゴが表示されています。ビデオに5秒でロゴがゆっくりとフェードアウトします。 マルチセッション再生 ビデオを再生し、再生中のある時点で停止します。ページを更新すると、中断した場所でビデオの再生が再開されます。 ビデオ終了時にナビゲートする 非常に短い動画が完成すると、オーバーレイに Brightcove ホームページへのリンクが表示されます。ブライトコーブが提供するオーバーレイプラグインが使用されるため、JavaScript は必要ありません。CSS は、オーバーレイのスタイルを設定するために使用されます。 プレーヤーをビューにスクロールする プレーヤーをスクロールし、表示外にスクロールします。プレーヤーが完全にスクロールして表示すると、ビデオの再生が開始されます。プレーヤーを画面外にスクロールすると、ビデオの再生が停止します。 オーバーレイの切り替え この例では、対話型オーバーレイの表示を切り替えることができます。オーバーレイの表示/非表示を切り替えるには、[オーバーレイを切り替え] ボタンを選択します。 カスタムイベントで巻き戻しをトリガーする ビデオの再生を開始します。次に、ビデオの巻き戻しボタンをクリックします。ビデオの再生が5秒戻ることがわかります。 ビデオプラグインをダウンロード** コントロールバーの右側にダウンロードアイコンが表示され、プレーヤーにロードされたビデオの最高品質の MP4 レンディションをダウンロードできます。 ライブカスタムエラーメッセージ プレーヤーはライブストリームに接続できません。ModalDialog オブジェクトが作成され、その中にカスタムイメージが配置され、ModalDialog オブジェクトが表示されます。ModalDialog を閉じると、デフォルトのエラーが表示されます。 プレイヤースタイリングプレイグラウンド このトピックでは、以下に示すCodepenをスタイリングの遊び場として使用します。codepen.ioサイトでそれを表示して変更を加え、自分の使用のためにCodepenをフォークしてください。 水平レスポンシブプレイリスト プレーヤーの下に水平方向のプレイリストが表示されます。ブラウザのサイズを変更すると、プレーヤーとプレイリストの両方がサイズ変更されます。 再生リストで最も視聴された動画** 次の例では、右側に表示されるプレイリストを持つプレーヤーが表示されます。プレイリストには、Brightcove Player カタログを使用して、ほとんどの再生回数に基づいて最も人気のある動画を取得することによって設定されます。 再生リストの最新動画** 次のプレーヤーには、ナレッジチームのアカウントに追加された最新の 10 個の動画を含むプレイリストが表示されます。 再生APIページング** この例では、Brightcove Player を使用して、再生リストの最初の 3 つの動画とともにプレーヤーに動画を表示します。[次のビデオ] ボタンを選択して、再生リストの次の 3 つのビデオを表示します。 人気の動画オーバーレイ** 動画を一時停止するか、動画が終了すると、オーバーレイが表示されます。過去 24 時間で最も多く視聴された 6 つの動画を取得するための Analytics APIへのリクエストと、API レスポンスが表示されます。 人気の動画再生リスト** ビデオデータが取得されるとすぐに、プレイリストが自動的に表示されます。過去 24 時間で最も多く視聴された 6 つの動画を取得するための Analytics APIへのリクエストと、API レスポンスが表示されます。 再生リストの関連動画** 次の使用例は、再生が一時停止または終了したときに、関連するビデオのサムネイルを対話的にオーバーレイ表示します。 タグを介した関連動画（CMS API）** 次の使用例は、再生が一時停止または終了したときに、関連するビデオのサムネイルを対話的にオーバーレイ表示します。 タグを介した関連動画（再生API）** 次の使用例は、再生が一時停止または終了したときに、関連するビデオのサムネイルを対話的にオーバーレイ表示します。 タブ付きプレイリスト** タブ付きナビゲーションのタブを選択して、プレイリストを切り替えます。再生リスト内のビデオを選択して、ビデオの再生を開始します。 すべての時間のビデオビュー 下のプレーヤーには、すべての時間ビューを取得するために使用されるコードがプレイリストで動作することを示すプレイリストが含まれています。それはまた、単一のビデオプレーヤーで動作します。 再生リストの前のビデオ プレイリスト対応プレーヤーを作成して、プレイリストにない動画から開始します。 再生リストの最後の動画 プレイリストには3つのビデオが含まれていることがわかります。これら 3 つの動画が再生された後、プレイリストにはない別の動画が再生されます。再生リストにないビデオが再生されると、ビデオの再生が停止します。 再生レートアジャスター Brightcove Player コントロールバーに再生レートボタンを追加します。 背景ビデオ ウェブページの背景動画には Brightcove Player を使用します。 シークされた時間をゲット シークバーをクリックすると、クリックした時刻がプレイヤーの下に表示されます。 進行状況バーのチャプターマーカー プログレスバーにマーカーを作成して、定義されたチャプタを表示します。 ダイナミックカスタムエンドスクリーン カスタムエンドスクリーンにビデオデータに関連付けられたリンクを追加します。 まだ見てる？ このトピックでは、動画の再生中に視聴者が視聴を停止したことを検出する Brightcove Player の作成方法について説明します。 マウスオーバーでプレイヤーを拡大する このトピックでは、JavaScript と CSS を使用して、マウスオーバーしたときに小さなプレーヤーを拡大し、マウスをオフにしたときに小さなサイズに縮小する方法を学びます。 フローティングプレイヤー このトピックでは、プレーヤーを新しい位置にドラッグできるようにHTML/CSS/JavaScriptを設定する方法を学びます。ユーザーがページを上下にスクロールしても、プレイヤーの位置は固定されたままになります。 限定プレイ このトピックでは、ユーザーが 1 日に動画を視聴できる回数を制限する Brightcove Player の使用方法について説明します。 登録してプレイする このトピックでは、Brightcove Player の使用方法を学習します。ここでは、ユーザーが動画を表示するためにフォームに記入する必要があります。 プレビュー後に登録してプレイする このトピックでは、Brightcove Player の使用方法を学習します。ここでは、短いプレビューが表示された後に、ユーザーがフォームに入力してビデオを視聴する必要があります。 ビデオを見るためのパスワード このトピックでは、ビデオを見るためにパスワードを要求する方法を学びます。 コントロールバーの切り替え このトピックでは、ボタンを使用してコントロールバーの表示を切り替える方法を学習します。 戻る進むボタン このトピックでは、指定した秒数だけビデオを巻き戻したり進めるボタンをコントロールバーに配置する方法について説明します。 キャプションラベルに国旗を追加 このトピックでは、国のキャプションラベルの前に国旗を追加する方法について説明します。 トランスクリプトをダウンロード このトピックでは、キャプション WebVTT ファイルの使用方法と、ダウンロード可能なトランスクリプトに変換する方法について説明します。 オーディオをダウンロード このトピックでは、Brightcove Player で再生するオーディオアセットの最高品質の MP4 をダウンロードするためのリンクを作成する方法について説明します。 Automatically Set Caption Language このトピックでは、ブラウザの言語に基づいてデフォルトのキャプション言語を設定する方法を学びます。 オーディオトラック言語を自動的に設定 このトピックでは、ブラウザーの言語に基づいてデフォルトのオーディオトラック言語を設定する方法について説明します。 垂直ビデオ このトピックでは、Brightcove Player で縦書き動画を表示する方法について説明します。
