play()
pause()
とメソッドは、プレーヤーの位置に基づいてビデオを開始および停止するために呼び出されます。プレーヤーの例
プレーヤーをスクロールして表示の内外に移動します。プレーヤーが完全にスクロールすると、動画または広告が再生されます。プレーヤーを画面外にスクロールすると、動画または広告の再生が停止します。この例では、プリロール、スキップ可能な5秒のミッドロール、ポストロールがあります。
ペンを見る18352-スクロール-プレーヤー-ビュー-広告 Brightcove Learning Services( @ rcrooks1969) オンCodePen。
ソースコード
CodePen を使用する
上記のCodePenを効果的に使用するためのヒントは次のとおりです。
- [ 結果]ボタンをクリックして、プレーヤーの実際の表示を切り替えます。
- HTML/CSS/JSボタンをクリックして、いずれかのコードタイプを表示します。
- このドキュメントの後半では、アプリケーションで使用されるロジック、フロー、およびスタイル設定については、 Player/HTML設定、アプリケーションフロー、およびアプリケーションのスタイル設定で説明されます。セクション。これらのセクションの情報に沿って従う最も良い方法は、次のとおりです。
- CodePen の [ EDIT ON CODEPEN]ボタンをクリックし、1 つのブラウザ/ブラウザタブでコードを使用できるようにします。
- CodePen で、表示するコードを調整します。CodePen 内の異なるコードセクションの幅を変更できます。
- を見るプレーヤー/ HTML構成、アプリケーションフローおよび/またはアプリケーションのスタイリング別のブラウザ/ブラウザタブのセクション。これで、コードの説明に従い、同時にコードを表示できるようになります。
API/プラグインリソースを使用
API メソッド | Brightcove Playerプラグイン |
---|---|
遊ぶ () | IMA3 プラグイン |
一時停止 () | |
オン () |
このコードで使用される主要な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]