コードサンプル 次のコードサンプルは、 Brightcove Player。 ダブルアスタリスク**の付いたサンプルは、部分的にまたは完全に依存しています Video Cloud 特徴。 アルファベット順のサンプルリスト ここ. アウトストリーム（広告のみ） Player このサンプルでは、ヘルパ関数のサイズを動的に調整する方法を示すヘルパーJavaScript関数を提供しています。 <div> 要素をページDOMに挿入し、 Brightcove Player そこで、広告をロードして再生し、次に削除します player スクローリング Player 広告付きビュー の中に player、水平ボリュームコントロールバーがデフォルトの垂直コントロールバーに置き換わっていることに注意してください。 水平ボリュームコントロール（1.x Player のみ） の中に player、水平ボリュームコントロールバーは、デフォルトの垂直コントロールバーを置き換えます。 垂直方向の音量 デフォルトの水平レイアウトではなく、垂直スライダを表示するように音量コントロールを設定します。 再生バーの広告インジケータ このサンプルは player 動画に関連付けられたXNUMXつの広告キューポイントが、青色のマーカーとして再生バーに表示されます。 SSAIプラグインによる広告 この例では、VMAPファイルで定義されたIMA広告を使用して、ビデオストリームにサーバーサイド広告を配信します。 プレロール、ミッドロール、ポストロール広告があります。 VMAPファイルは、広告構成で定義されています。 広告カウントダウンタイマー オーバーレイプラグインを使用して広告用のカウントダウンタイマーを作成します。 ModalDialogでのAge Gate このサンプルでは、ModalDialogを使用して最初に player。 ユーザーがモーダルウィンドウをクリックして年齢を確認すると、コントロールが表示され、ビデオが再生されます。 キューポイント表示CTA ** player は、キューポイントに基づいて表示される3つの異なるCTAを示しています。 最初のCTAは5秒の間、13秒で表示されます。 3番目のCTAは、XNUMX秒間、XNUMX秒で表示されます。 ダイナミックな行動の呼びかけ** これにより、XNUMXつの異なるCall to Action表示テクニックを確認できます。 player. 親iframeからのビデオの再生/一時停止 iframeの親ページの一部である再生ボタンまたは一時停止ボタンをクリックして、iframe内のビデオの再生/一時停止が開始されることを確認します player. エイジゲート このサンプルは、 player コントロールと再生ボタン。 ユーザーがオーバーレイをクリックして年齢を確認すると、コントロールが表示され、ビデオが再生されます。 アンミュートボタンによる自動再生 ビデオは、ビデオを実行するブラウザ/プラットフォームによって異なる動作をします。 動画が音声で自動再生される場合は、自動的に再生されます。 そうでない場合は、動画が再生されますが、ミュート解除ボタンが表示されます。 背景ビデオランダムプレイリスト** の中に player バックグラウンドビデオとして継続的に再生される再生リストからランダムに選択されたビデオが表示されます。 各ビデオの開始時に、各ビデオのタイトルと説明が表示されます。 背景ビデオプレイリスト** の中に player バックグラウンドビデオとして継続的に再生されるXNUMXつのビデオがあることがわかります。 また、各ビデオの開始時に、各ビデオのタイトルと説明が背景ビデオの上に重ねて表示されます。 フルウィンドウの背景ビデオ** このトピックでは、プレイリストを使用してバックグラウンドビデオを提供し、自動的にサイズを変更する方法を学びます player ブラウザーウィンドウのサイズが変更され、ビデオがブラウザーウィンドウ全体に表示されるようになったとき。 ビデオループの作成 ルーピングビデオを使用したい場合があります。 この例では、3回のビデオをループし、ビデオの再生を停止します。 進行スクラバーを無効にする ビデオを再生します。 プログレススクラバーを使用してビデオを進めることはできません。 その他の停止 Playerビデオ開始時のページ いずれかの動画の再生を開始します。 次に、別の場所でビデオを再生します player そして、ビデオ再生が他で停止することを確認してください player それは遊んでいた。 可変速再生 ビデオ再生を開始し、コントロールバーの再生速度ボタンを選択します（デフォルトは1x）。 別のレートを選択して、ビデオの再生速度の変化を確認してください。 読み込み中 Player 動的に このサンプルでは、追加をクリックします Player ボタンを動的に構築してロードします player、ビデオを再生します。 RequireJSと Brightcove Player このトピックでは、JavaScriptファイルとモジュールローダーであるRequireJSの使用方法について説明します。 Brightcove Player. ソースビデオを動的に変更する** 下のボタンをクリックします player ソースビデオを動的に変更します。 キオスクアプリ** player ビデオオブジェクトの配列からビデオを無限ループで再生します。 キャプションアニメーション ビデオ再生を開始します。 マウスを上に移動すると、 player、キャプションはコントロールバーの上に留まるようにアニメーション化されます。 関連リンクを表示する** このサンプルでは、ビデオの下に表示されるテキストが player。 あなたが使う StudioのMEDIA> VIDEO INFORMATIONセクション。テキストと関連リンクを提供します。 コントロールバーのビュー表示 ビデオが再生されると、コントロールバーにビデオビューが表示されます。 情報が表示されるまで少し時間がかかる場合があります Analytics API データに対して非同期に照会されます。 ホバーにサムネイルを表示する この例では、ModalDialogを使用して、ビデオ内のさまざまな点から撮影した4つのサムネイル画像を表示します。 これにより、ユーザーはビデオに何が入っているかを知ることができます。 ランダムバンパーを表示する このサンプルでは、ランダムに選択されたバンパーがプレイリストの各ビデオの前に再生されます。 この場合、バンパーは広告ですが、広告サーバーから引き出されるのではなく、 Video Cloud としょうかん。 ハイパーリンクされた会社のロゴ この例では、会社のロゴを playerのコントロールバー。 ロゴを選択すると、会社のWebサイトにリダイレクトされます。 ライトボックスカルーセル カルーセルの動画をナビゲートします。 ライトボックスコンテナでビデオを再生するサムネイルを選択します。 ライトボックスが表示された状態で、[閉じる]リンクを選択してライトボックスコンテナを非表示にします。 Scrollerのライトボックス サムネイル画像の下にスクロールバーをドラッグして、ビデオをナビゲートします。 ライトボックスコンテナでビデオを再生するビデオを選択します。 ライトボックスが表示された状態で、[閉じる]リンクを選択してライトボックスコンテナを非表示にします。 シンプルライトボックス この例では、インタラクティブビデオポスター画像を表示し、ライトボックスを Brightcove Player。 ライトボックスコンテナーでビデオを再生するには、ポスター画像を選択します。 ロゴオーバーレイプラグイン 次の例では、ロゴが左下に表示されています player。 ビデオのXNUMX秒後に、ロゴはゆっくりとフェードアウトします。 複数セッションの再生 ビデオを再生し、再生中のある時点で停止します。 ページを更新すると、動画は途中で再生を再開します。 ビデオエンドでナビゲートする 非常に短いビデオが完成すると、オーバーレイが表示され、 Brightcove ホームページ。 ザ Brightcove 提供されたOverlay Pluginが使用されるため、JavaScriptは必要ありません。 CSSを使用してオーバーレイのスタイルを設定します。 スクローリング Player ビューに スクロールして player 内と外。 とき player 完全にスクロールして表示すると、ビデオの再生が始まります。 スクロールすると player 視野外では、ビデオの再生が停止します。 オーバーレイの切り替え この例では、インタラクティブなオーバーレイの表示を切り替えることができます。 オーバーレイを表示および非表示にするには、[トグルオーバーレイ]ボタンを選択します。 カスタムイベントで巻き戻しをトリガする ビデオの再生を開始します。 次に巻き戻しビデオボタンをクリックします。 ビデオの再生が5秒後になることがわかります。 ビデオプラグインをダウンロード** コントロールバーの右側にダウンロードアイコンが表示され、ロードされたビデオの最高品質のMP4レンディションをダウンロードできます。 player. Live カスタムエラーメッセージ player ライブストリームに接続できなくなります。 ModalDialogオブジェクトが作成され、その中にカスタム画像が配置されてから、ModalDialogが表示されます。 ModalDialogが閉じている場合、デフォルトのエラーが表示されます。 Player スタイリングプレイグラウンド このトピックでは、以下に示すCodepenをスタイリングの遊び場として使用します。 codepen.ioサイトでそれを表示して変更を加え、ご自分で使用するためにCodepenを自由にフォークしてください。 水平応答プレイリスト 下に水平プレイリストが表示されます player。 ブラウザのサイズを変更すると、 player とプレイリストのサイズを変更します。 プレイリストのほとんどの視聴動画** 次の例では、 player プレイリストが右側に表示されます。 再生リストは、再生回数の多くに基づいて、最も人気のある動画を取得して Brightcove Player カタログ。 プレイリストの最新動画** 以下では player、ナレッジチームのアカウントに追加された最新の10本の動画を含む再生リストが表示されます。 Playback API ページング** この例では、 Brightcove Player にビデオを表示するには player 再生リストの最初の3本の動画と一緒に。 [次の動画]ボタンを選択して、再生リスト内の次の3つの動画を表示します。 人気のある動画オーバーレイ** オーバーレイは、ビデオを一時停止するか、ビデオが終了すると表示されます。 の要求 Analytics API 過去6時間に24で最も多く視聴された動画を取得するには、APIレスポンスが表示されます。 人気の動画プレイリスト** プレイリストは、ビデオデータが取得されるとすぐに自動的に表示されます。 の要求 Analytics API 過去6時間に24で最も多く視聴された動画を取得するには、APIレスポンスが表示されます。 プレイリストからの関連動画** この例では、再生が一時停止または終了したときに、関連するビデオサムネイルのインタラクティブオーバーレイを表示します。 タグによる関連動画（CMS API）** この例では、再生が一時停止または終了したときに、関連するビデオサムネイルのインタラクティブオーバーレイを表示します。 タグによる関連動画（Playback API）** この例では、再生が一時停止または終了したときに、関連するビデオサムネイルのインタラクティブオーバーレイを表示します。 タブ付きプレイリスト** 再生リストを切り替えるには、タブ付きナビゲーションのタブを選択します。 ビデオ再生を開始するには、プレイリスト内のビデオを選択します。 全時間ビデオビュー player 以下には、すべての時間ビューを取得するために使用されるコードがプレイリストで機能することを示すプレイリストが含まれています。 単一の動画でも機能します player. 再生前のビデオ プレイリスト対応の作成 player プレイリストにない動画から開始します。 再生リストの最後のビデオ プレイリストに3つの動画があることがわかります。 これらの3つのビデオが再生された後、プレイリストにない別のビデオが再生されます。 プレイリストにないビデオが再生された後、ビデオ再生が停止します。 再生レートアジャスター 再生速度ボタンを Brightcove Player コントロールバー。 背景ビデオ 使用 Brightcove Player Webページの背景ビデオ用。 シーク時間を得る シークバーをクリックすると、クリックした時間が下に表示されます。 player. チャプターマーカーの進捗バー 進捗バーにマーカーを作成して、定義された章を表示します。 ダイナミックカスタムエンドスクリーン カスタムエンド画面にビデオデータに関連付けられたリンクを追加します。 あなたはまだ見ていますか？ このトピックでは、 Brightcove Player 視聴者が動画の再生を終了したまま、視聴を停止したことを検出します。 拡大する Player マウスオーバー時 このトピックでは、JavaScriptとCSSを使用して小さな player マウスを上に置くと、マウスをオフにすると小さくなります。 フローティング Player このトピックでは、HTML / CSS / JavaScriptを構成して、 player 新しい位置にドラッグします。 の player ユーザーがページを上下にスクロールしても、位置は固定されたままになります。 限定再生 このトピックでは、 Brightcove Player これにより、ユーザーがXNUMX日に動画を表示できる回数が制限されます。 再生登録する このトピックでは、 Brightcove Player ユーザーがビデオを表示するにはフォームに入力する必要があります。 プレビュー後に登録する このトピックでは、 Brightcove Player ユーザーは、短いプレビューが表示された後、ビデオを表示するためにフォームに入力する必要があります。 ビデオを見るためのパスワード このトピックでは、ビデオを見るためにパスワードを要求する方法を学びます。 コントロールバーの切り替え このトピックでは、コントロールバーの表示をボタンで切り替える方法を学びます。 前へ戻るボタン このトピックでは、コントロールバーにボタンを配置してビデオを巻き戻し、指定した秒数だけ進める方法を学びます。 キャプションラベルに国旗を追加 このトピックでは、国のキャプションラベルの前に国旗を追加する方法を学びます。 トランスクリプトをダウンロード このトピックでは、キャプションWebVTTファイルを使用してダウンロード可能なトランスクリプトに変換する方法を学びます。 オーディオをダウンロードする このトピックでは、再生中のオーディオアセットの最高品質のMP4をダウンロードできるようにリンクを作成する方法を学習します。 Brightcove Player. 字幕の言語を自動的に設定する このトピックでは、ブラウザの言語に基づいてデフォルトのキャプション言語を設定する方法を学びます。 オーディオトラックの言語を自動的に設定する このトピックでは、ブラウザの言語に基づいてデフォルトのオーディオトラックの言語を設定する方法を学習します。 垂直ビデオ このトピックでは、垂直ビデオを表示する方法を学びます。 Brightcove Player.
サポート問い合わせ先
システムステータス
