Brightcove Playerサンプル：アウトストリーム (広告のみ)

概要

この Outstream 広告プレーヤーのサンプルでは、動画以外の要素がある Web ページに Brightcove Player を動的に読み込む方法を示しています。動画広告は、プレーヤーが再生する唯一のコンテンツです。通常、このサンプルに示すように、プレーヤーはページレイアウト内で展開されますが、ページの特殊領域またはオーバーレイとして表示することもできます。広告を再生すると、プレーヤーは消えます。

プレーヤーの例

このサンプルでは、ページ DOM <div>内の要素のサイズを動的に調整し、そこに Brightcove Player を注入し、広告をロードして再生し、プレーヤーを削除する方法を示すヘルパー JavaScript 関数を提供します。再生される広告は、広告タグまたは VAST XML ドキュメントで設定されます。プレーヤーはデフォルトで自動再生とミュートに設定されています。これは、一部のブラウザで動作する唯一の方法です。選択した場合は、これらの設定を変更できます。

このサンプルは、そのまま使用することも、コピーして変更してカスタムページデザインで作業することもできます。

ペンを見る18065-ad-only-plugin Brightcove Learning Services（ bcls1969） オンCodePen。

ソースコード

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

アプリケーションフロー

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

• このサンプルは、<div>記事内に隠し要素を配置したテキストアーティクルスタイルの Web ページを示しています。タイマーが消えた後、この隠しdivが展開され、プレイヤーはその内部に表示されます。

• プレイヤーはインラインVASTを使用して広告を再生します。広告タグ adsResponse を使用する場合は、これをコメントアウトし、広告タグセクションのコメントを解除することができます。
• 広告の再生が終了すると、プレーヤーはアンロードされ、DOM から削除されます。

プレーヤー/HTML構成

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

プレーヤーの設定

このサンプル用に作成した Brightcove Player には、特別な設定は必要ありません。

その他のHTML

HTML ファイルには、次の項目が含まれます。

1. <div>id選択した値に割り当てられた属性を持つ要素。JavaScript コードによって、<div>このエレメント内に Brightcove Player が作成されます。

   <div id="adPlayerDiv"></div>

2. Brightcove Playerに関連付けられている JavaScript ファイル。これは次のようになります。

   <script src="https://players.brightcove.net/your account id/default_default/index.min.js"></script>

3. 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>

4. 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 プラグインを含める必要があります。これを行うには、次のドキュメントを参照してください。

• Brightcove Playerプラグイン
• プレーヤープラグインの設定