バンパー動画

このトピックでは、メイン コンテンツの動画の前に再生されるバンパー動画の実装方法について説明します。

はじめに

バンパー動画は通常、10 秒以内の非常に短い動画で、プリロール広告やコンテンツ動画の前に自動的に挿入されます。バンパーは収益化を目的とするものではなく、企業ロゴやブランディングなどの情報を伝えるために使用されます。ポスター画像はコンテンツ動画用のものが表示されますが、再生が開始されると最初にバンパーが再生され、その後コンテンツ動画が続きます。以下の例では、企業紹介のバンパーが表示され、その後にコンテンツ動画が再生されます。


コンテンツ動画のポスター、タイトル、短い説明が表示されますが、再生が始まるとバンパーが再生され、その後にコンテンツ動画が続きます。

機能

バンパー動画に関する詳細を以下に示します。

  • バンパーはクライアントサイド広告(CSAI)およびサーバーサイド広告(SSAI)の両方と互換性があります。
  • バンパーはプリロール広告やコンテンツ動画よりも前に再生されます。
  • バンパー再生中にプレーヤーを設定できます:
    • プレーヤーコントロールの表示/非表示
    • 再生中のシーク操作を禁止
    • バンパーであることを示すため、シークバーの色を変更
  • アナリティクス データは他のコンテンツ動画と同様にトラッキングされます。

実装

バンパー動画を実装する方法は次の 3 つです。

  • Videoタグ埋め込みコードの属性を使用する
  • iframe コードのクエリ文字列を使用する
  • プレーヤーの JSON 設定に追加する

詳細は以下のとおりです。

Videoタグ埋め込みコード

Videoタグ埋め込みコードを使用してプレーヤーを設定する場合は、次のように data-bumper-id="your_bumper_id" 属性をプレーヤーコードに追加します。

<div style="width: 960px; height: 540px;">
        <video-js data-account="1752604059001"
          data-player="Wj0445Avw"
          data-embed="default"
          controls=""
          data-video-id="5755775186001"
          data-playlist-id=""
          data-application-id=""
          width="960" height="540"
          class="vjs-fill"
          data-bumper-id="4446983094001"></video-js>
        <script src="https://players.brightcove.net/1752604059001/Wj0445Avw_default/index.min.js"></script>
      </div>

もちろん、HTML の属性の順序は関係ないため、data-bumper-id="your_bumper_id"<video> タグ内のどこに配置しても構いません。

iframe コード

iframe コードで設定する場合は、クエリ文字列に &bumperId=your_bumper_id を追加します。

<iframe src="https://players.brightcove.net/1752604059001/
        Wj0445Avw_default/index.html?videoId=5715315990001
        &bumperId=4446983094001" allowfullscreen="" 
        allow="encrypted-media" width="960" height="540">

JSON 設定

プレーヤーの設定を変更することで、特定のプレーヤーのすべてのインスタンスにバンパー動画を適用できます。この方法では、ページのプレーヤーコードに何も追加する必要がありません(上記 2 つの例のような追加は不要)。

Studio 内でプレーヤー設定を変更するには、Players モジュールに移動し、対象のプレーヤーを選択します。プレーヤーのプロパティで JSON エディタ をクリックし、video_cloud セクションにバンパーの情報を追加します。

{
        "compatibility": true,
        "video_cloud": {
          "policy_key": "...",
          "bumper": {
            "id": "4446983094001"
          }
         },
         "player": {
          "template": {
          "name": "single-video-template",
          "version": "6.66.2"
         }
        },
        ...

オプション

JSON 設定を使用する場合、以下のオプションも利用できます。

  • show_controls - false の場合、バンパー再生中にコントロールを非表示(デフォルト true)
  • progress_bar_color - 指定した場合、シークバーの色を変更(デフォルトは未定義で通常のシークバーと同じ色)
  • prevent_seeking - 指定した場合、シーク操作を禁止(デフォルト false)

オプションはプレーヤーの JSON 設定に次のように追加できます。

{
        "compatibility": true,
        "video_cloud": {
          "policy_key": "...",
          "bumper": {
            "id": "4446983094001",
            "show_controls": true,
            "progress_bar_color": "#654321",
            "prevent_seeking": true
          }
        },
        ...