Brightcove Playerサンプル：

プレーヤーの例

プレーヤーをスクロールして表示の内外に移動します。プレーヤーが完全にスクロールすると、動画または広告が再生されます。プレーヤーを画面外にスクロールすると、動画または広告の再生が停止します。この例では、プリロール、スキップ可能な5秒のミッドロール、ポストロールがあります。

ペンを見る18352-スクロール-プレーヤー-ビュー-広告 Brightcove Learning Services（ @ rcrooks1969） オンCodePen。

ソースコード

GitHubで完全なソリューションを表示します。

API/プラグインリソースを使用

このコードで使用される主要なJavaScriptイベントはですonscroll。このイベントは送出され、windowこのコードでは要素がスクロールされるたびに処理されます。

プレーヤー/HTML構成

このセクションでは、プレーヤーの作成時に必要な特別な設定について詳しく説明します。さらに、ページ内埋め込みプレーヤー実装コード以外に、ページに追加する必要があるその他の HTML 要素についても説明します。

プレーヤーの設定

自動再生の問題を回避するために、muted属性はプレイヤーに追加されました。詳細については、「自動再生に関する考慮事項」ドキュメントを参照してください。

その他のHTML

<script> HTMLタグは、JQueryライブラリとIMA3プラグインのためのJavaScriptをインポートするために使用されます。HTML headのセクションでは、IMA3 の CSS は HTML <link>タグを使用してインポートされます。

アプリケーションフロー

このアプリケーションの背後にある基本的なロジックは次のとおりです。

• IMA3 プラグインを設定します。
• スクロールイベントをリッスンします。
• スクロールイベントが処理されると、プレーヤーがビューポート内にあるかどうかを確認します。
• ビューポートのプレーヤーの場合は、ビデオを再生し、再生されていない場合は、ビデオを一時停止します。
• 広告イベントをトラッキングして、通常の Brightcove Player または広告プレーヤーが現在使用されているかどうかを確認します。

IMA3 プラグインの設定

ラベルが付いたコードを見つけます。

// ### Configure IMA3 plugin

IMA3 プラグインは、プリロール、ミッドロール、ポストロールを再生する VMAP 設定を使用するように構成されています。

ウィンドウ要素上のスクロールイベントをリッスンする

ラベルが付いたコードを見つけます。

// ### Execute every time page is scrolled ###

この 1 行のコードは、checkIfVideoInView()window.onscrollすべてのイベントディスパッチでメソッドを呼び出します。

スクロールイベントを処理する

ラベルが付いたコードを見つけます。

// ### Called on scroll, check if in view and the play/pause ###

checkIfVideoInView()イベントハンドラ関数は、通常、プレーヤーがビューポート内にあるかどうかをチェックし、ビデオを再生または一時停止します。コードによって、使用されているプレーヤー、通常のプレーヤーまたは広告プレーヤーを特定することが重要です。isAdPlayingブール値は（コードの一番下にあるイベントハンドラー内）広告イベントに基づいてトグルされ、条件付き（三項）演算子を使用してcurrentPlayer変数を正しいプレーヤーにします。isScrolledIntoView()このメソッドは、プレーヤーがビューポートにあるかどうかをチェックするために、if ステートメントで使用されます。当然のことながら、isScrolledIntoView()このメソッドはブール値を返します。

プレイヤーがビューポートに完全に入っているかどうかを確認する

ラベルが付いたコードを見つけます。

// ### Checks if player is in view ###

ブール値を返すこの関数は、プレイヤーがビューポートに完全に存在しているかどうかを判断するために、jQueryを使用しています。

どのプレイヤーが使用されているかを追跡する

ラベルが付いたコードを見つけます。

// ### Set Boolean value for if ad is playing ###

多数の広告イベントが監視され、それに応じてブール値が設定されます。

アプリケーションのスタイリング

唯一のCSSはプレーヤーのサイズを設定します。

プラグインコード

通常、JavaScript を Brightcove Player プラグインに変換する場合は、公称の変更が必要です。必要な変更の 1 つは、ready()メソッドの標準使用をプラグインを定義するコードに置き換えることです。

ここでは、プレーヤーで動作するJavaScriptコードへの非常に一般的に使用されるスタートです：

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  ...
});

最初の行を変更して、標準の構文を使用して Brightcove Player プラグインを起動します。

videojs.registerPlugin('pluginName', function(options) {
  var myPlayer = this;
  ...
});   

前述のように、このドキュメントの対応する GitHub レポ: scroll-into-view-ads.js には、プラグインの JavaScript コードが表示されます。

プレーヤーでプラグインを使用する

プラグインの CSS ファイルと JavaScript ファイルをインターネットでアクセス可能な場所に保存したら、プレーヤーでプラグインを使用できます。Studio の PLAYERSモジュールでは、プレーヤーを選択し、[ プラグイン ] セクションで CSS ファイルと JavaScript ファイルに URL を追加し、名前を追加することもできます。オプションが必要な場合は、[Options] と [Options]