サポート サポートへのお問い合わせ | システムステータス システムステータス
ページコンテンツ

    ブライトコーブプレーヤーのサンプル:アウトストリーム (広告のみ) プレイヤー

    このトピックでは、通常の動画コンテンツを使用しない IMA3 広告用のアウトストリーム(広告のみ)プレーヤーを作成する方法について説明します。

    概要

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

    プレーヤーの例

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

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

    ブライトコーブラーニングサービス ( bcls1969 ) の Pen 18065-広告専用プラグインを CodePen でご覧ください。

    ソースコード

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

    CodePen を使用する

    上記のCodePenを効果的に使用するためのヒントは次のとおりです。

    • Resultボタンをクリックして、プレーヤーの実際の表示を切り替えます。
    • HTML/CSS/JSボタンをクリックして、コードタイプの 1 つを表示します。
    • このドキュメントの後半で、アプリケーションで使用されるロジック、フロー、およびスタイルについて、プレーヤー/ HTML構成アプリケーションフローそしてアプリケーションのスタイリングセクション。これらのセクションの情報に沿って従う最も良い方法は、次のとおりです。
      1. CodePen EDIT ON CODEPENのボタンをクリックして、1 つのブラウザ/ブラウザータブでコードを使用できるようにします。
      2. CodePen で、表示するコードを調整します。CodePen 内の異なるコードセクションの幅を変更できます。
      3. を見るプレーヤー/ HTML構成アプリケーションフローおよび/またはアプリケーションのスタイリング別のブラウザ/ブラウザタブのセクション。これで、コードの説明に従い、同時にコードを表示できるようになります。

    アプリケーションフロー

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

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

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

    プレーヤー/HTML構成

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

    プレーヤーの設定

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

    その他のHTML

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

    1. A <div>を持つ要素id選択した値に割り当てられた属性。JavaScript コードによって、<div>このエレメント内に Brightcove Player が作成されます。
      <div id="adPlayerDiv"></div>
    2. ブライトコーブプレーヤーに関連付けられている 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 プラグインを含める必要があります。これを行うには、次のドキュメントを参照してください。