アニメーション サムネイル（動画プレビュー）

アニメーション サムネイルとは？

アニメーション サムネイルは、本編動画から抽出された短いループ再生のプレビューです。静止画像の代わりに表示することで、より魅力的な視聴体験を提供します。

アニメーション サムネイルの特長:

• 1つ以上の HLS マニフェストとして配信
• デフォルトの長さ：約10秒
• デフォルトの開始位置：先頭フレーム（カスタマイズ可）
• グリッドやリストなどのプレビュー用途で、静止ポスター/サムネイル画像の代替として使用

Brightcove Player でアニメーション サムネイルを設定する

Brightcove Player でアニメーション サムネイルを使用するには、次の手順に従います。

1. Players モジュールに移動し、対象のプレーヤーを選択するか、新しいプレーヤーを作成します。
2. Player バージョンを 7.37.3 以降に設定します。
3. 左側のナビゲーションで Plugins セクションをクリックします。
4. プラグインを追加 ドロップダウン メニューから Video Poster を選択します。
5. 必要に応じてプラグイン オプションを設定します（以下のプラグイン オプションを参照）。
6. 保存 をクリックします。
7. 公開 をクリックして変更を公開します。

プラグイン オプション

プラグイン設定例

ドロップダウン メニューから videoPoster プラグインを追加すると、以下の設定がプレーヤーに適用されます。

{
              "plugins": [
              {
                "name": "videoPoster",
                "options": {
                  "playMode": "hover",
                  "loop": true,
                  "delay": 300,
                  "playButtonVisible": true,
                  "previewDuration": 10,
                  "initialBandwidth": 3000000,
                  "lockRendition": false
                },
                "is_packaged": true
              }
            ]
      }
          

プレーヤー イベントでプレビューの操作を計測する

videoPoster プラグインは、Brightcove Player 上で 2 つのイベントを発行します。これにより、視聴者がアニメーション サムネイルをどのように操作したか（プレビューがどのくらい視聴されたか、そこから本編の再生にどのくらいつながったかなど）を計測できます。これらは標準のプレーヤー イベントであるため、Brightcove Analytics を使用しなくても、任意のサードパーティ分析ツール（Mixpanel、Adobe Analytics、Google Analytics、独自のエンドポイントなど）に送信できます。

イベント

イベントのプロパティ

どちらのイベントにも videoId プロパティが含まれます。さらに次のプロパティがあります。

終了理由

イベントをリッスンする

プレーヤーの埋め込みコードと同じページにリスナーを追加します。myAnalytics は、使用している分析ツールに置き換えてください。

videojs.getPlayer('myPlayerId').ready(function() {
  var player = this;

  player.on('videopreview-start', function(event) {
    myAnalytics.track('preview_started', {
      video: event.videoId,
      mode: event.playMode
    });
  });

  player.on('videopreview-end', function(event) {
    myAnalytics.track('preview_ended', {
      video: event.videoId,
      reason: event.reason,
      seconds: event.secondsViewed
    });

    // プレビューから再生へのコンバージョン
    if (event.reason === 'click-through') {
      myAnalytics.track('preview_click_through', { video: event.videoId });
    }
  });
});
          

Media モジュールでアニメーション サムネイルを取得する

アニメーション サムネイルを取得するには、次の手順に従います。

1. Media モジュールを開き、対象の動画を選択します。
2. プレビューを開始したいフレームにスクラバー（再生ヘッド）を合わせ、キャプチャー をクリックします。

   

3. 動画プレビュー を選択し、保存 をクリックします。

   

API を使用してアニメーションサムネイルを確認する

video_preview フィールドは、Playback API と CMS API の両方で利用できます。これにより、アニメーションサムネイルの取得や管理をプログラムから行えます。

Playback API

次のリクエストでは、Playback API の動画オブジェクトのトップレベル プロパティとして video_preview フィールドが返されます。

• ID／リファレンスIDで動画を取得<
• ID／リファレンスIDでプレイリストを取得

例：video_preview（プレイリスト Playback API）

{
          "account_id": "...",
          "id": "...",
          "videos": [
            {
              "account_id": "...",
              "sources": [ "..." ],
              "video_preview": [
                {
                  "ext_x_version": "7",
                  "src": "http://manifest.prod.boltdns.net/.../preview.m3u8?...",
                  "type": "application/x-mpegURL"
                },
                {
                  "ext_x_version": "7",
                  "src": "https://manifest.prod.boltdns.net/.../preview.m3u8?...",
                  "type": "application/x-mpegURL"
                }
              ]
            }
          ]
        }
          

CMS API

Playback API に加えて、CMS API でも video_preview フィールドにより、動画プレビューの取得と更新が可能です。

• GET Video by ID/Reference ID
• GET Videos in Playlist

リクエスト例

https://cms.api.brightcove.com/v1/accounts/<account_id>/videos/<video_id>?include_video_preview=true
          

レスポンス例

{
          ...
          "video_preview": {
            "start": 10000,
            "sources": [ ... ]  // Playback API と同形式
          }
          ...
        }
              

{
          "video_preview": {
            "start": new_value
          }
        }