概要
この Outstream 広告プレーヤーのサンプルでは、動画以外の要素がある Web ページに Brightcove Player を動的に読み込む方法を示しています。動画広告は、プレーヤーが再生する唯一のコンテンツです。通常、このサンプルに示すように、プレーヤーはページレイアウト内で展開されますが、ページの特殊領域またはオーバーレイとして表示することもできます。広告を再生すると、プレーヤーは消えます。
プレーヤーの例
このサンプルでは、ページ DOM <div>
内の要素のサイズを動的に調整し、そこに Brightcove Player を注入し、広告をロードして再生し、プレーヤーを削除する方法を示すヘルパー JavaScript 関数を提供します。再生される広告は、広告タグまたは VAST XML ドキュメントで設定されます。プレーヤーはデフォルトで自動再生とミュートに設定されています。これは、一部のブラウザで動作する唯一の方法です。選択した場合は、これらの設定を変更できます。
このサンプルは、そのまま使用することも、コピーして変更してカスタムページデザインで作業することもできます。
ペンを見る18065-ad-only-plugin Brightcove Learning Services( bcls1969) オンCodePen。
ソースコード
CodePen を使用する
上記のCodePenを効果的に使用するためのヒントは次のとおりです。
- [ 結果]ボタンをクリックして、プレーヤーの実際の表示を切り替えます。
- HTML/CSS/JSボタンをクリックして、いずれかのコードタイプを表示します。
- このドキュメントの後半では、アプリケーションで使用されるロジック、フロー、およびスタイル設定については、 Player/HTML設定、アプリケーションフロー、およびアプリケーションのスタイル設定で説明されます。セクション。これらのセクションの情報に沿って従う最も良い方法は、次のとおりです。
- CodePen の [ EDIT ON CODEPEN]ボタンをクリックし、1 つのブラウザ/ブラウザタブでコードを使用できるようにします。
- CodePen で、表示するコードを調整します。CodePen 内の異なるコードセクションの幅を変更できます。
- を見るプレーヤー/ HTML構成、アプリケーションフローおよび/またはアプリケーションのスタイリング別のブラウザ/ブラウザタブのセクション。これで、コードの説明に従い、同時にコードを表示できるようになります。
アプリケーションフロー
このアプリケーションの背後にある基本的なロジックは次のとおりです。
-
このサンプルは、
<div>
記事内に隠し要素を配置したテキストアーティクルスタイルの Web ページを示しています。タイマーが消えた後、この隠しdivが展開され、プレイヤーはその内部に表示されます。 - プレイヤーはインラインVASTを使用して広告を再生します。広告タグ adsResponse を使用する場合は、これをコメントアウトし、広告タグセクションのコメントを解除することができます。
- 広告の再生が終了すると、プレーヤーはアンロードされ、DOM から削除されます。
プレーヤー/HTML構成
このセクションでは、プレーヤーの作成時に必要な特別な設定について詳しく説明します。さらに、ページ内埋め込みプレーヤー実装コード以外に、ページに追加する必要があるその他の HTML 要素についても説明します。
プレーヤーの設定
このサンプル用に作成した Brightcove Player には、特別な設定は必要ありません。
その他のHTML
HTML ファイルには、次の項目が含まれます。
<div>
id
選択した値に割り当てられた属性を持つ要素。JavaScript コードによって、<div>
このエレメント内に Brightcove Player が作成されます。<div id="adPlayerDiv"></div>
-
Brightcove Playerに関連付けられている JavaScript ファイル。これは次のようになります。
<script src="https://players.brightcove.net/your account id/default_default/index.min.js"></script>
-
IMA3 プラグインの JavaScript および CSS ファイル。これは、GoogleのIMA3 HTML5 SDKとの広告統合のためのものです。
<link href="https://players.brightcove.net/videojs-ima3/3/videojs.ima3.min.css" rel="stylesheet"/> <script src="https://players.brightcove.net/videojs-ima3/3/videojs.ima3.min.js"></script>
-
adonly.js という名前のヘルパーライブラリ。このファイルは、ブライトコーブのプレーヤーオリジンからホストされ、CDN 経由で配信されるため、変更なしで使用できます。選択した場合、この JavaScript コードをガイドとして使用して、独自のローダースクリプトを作成し、独自のサーバーでホストすることができます。このファイルは、プレーヤーの設定に含めることもできます。
<script src="https://players.brightcove.net/3723496277001/files/adonly.js"></script>
CDNでホストされた縮小版は、ページ内に直接含めることを選択した場合にも利用できます。
<script src="https://players.brightcove.net/3723496277001/files/adonly.min.js"></script>
パブリック関数
adonly.js ライブラリには、公開される 2 つのパブリック関数があります。
expandAndInjectAdOnlyPlayer()
:<div>
を展開し、広告のみのプレイヤーをインジェクトします。injectAdOnlyPlayer()
:広告専用プレーヤーを指定した<div>
(アニメーションなし)に注入します。
オプション
expandAndInjectAdOnlyPlayer()
この関数は、次のパラメータを取ります。
muted
- オプション。値: 真、偽。デフォルト: true
autoplay
- オプション。値: 真、偽。デフォルト: true
adTag
- 広告タグ
adsResponse
- インラインの VAST 文字列。指定すると、広告タグが上書きされます。ADTag または adsResponse のいずれかを指定する必要があります
div
- 広告プレーヤーを注入するdiv
height
- divを拡張したいピクセル単位の高さ
animationDuration
- divの高さの拡大をアニメーション化するのにかかる時間はミリ秒単位でどれくらいですか
injectAdOnlyPlayer()
この関数は、高さとアニメーションの継続時間を除いて、同じパラメータを取ります。
アプリケーションのスタイリング
このサンプルでは、IMA3 プラグインが提供する CSS スタイルを使用しています。
プラグインコード
このサンプルでは、既にプラグインとして構築されている JavaScript コードを使用しています。このコードは、このドキュメントの対応する GitHub レポ: adonly.js で見ることができます。
ロード時間の最適化
このサンプルでは、Brightcove Player を使用し、実行時に IMA プラグインを含めます。このサンプルはそのまま使用できますが、アカウントのプレーヤーコードを変更することもできます。
ロード時間を少し最適化するには、プレーヤーの設定に IMA プラグインを含める必要があります。これを行うには、次のドキュメントを参照してください。