アニメーション サムネイルとは？
アニメーション サムネイルは、本編動画から抽出された短いループ再生のプレビューです。静止画像の代わりに表示することで、より魅力的な視聴体験を提供します。
アニメーション サムネイルの特長:
- 1つ以上の HLS マニフェストとして配信
- デフォルトの長さ：約10秒
- デフォルトの開始位置：先頭フレーム（カスタマイズ可）
- グリッドやリストなどのプレビュー用途で、静止ポスター/サムネイル画像の代替として使用
Brightcove Player でアニメーション サムネイルを設定する
Brightcove Player でアニメーション サムネイルを使用するには、次の手順に従います。
- Players モジュールに移動し、対象のプレーヤーを選択するか、新しいプレーヤーを作成します。
- Player バージョンを 7.37.3 以降に設定します。
- 左側のナビゲーションで Plugins セクションをクリックします。
- プラグインを追加 ドロップダウン メニューから Video Poster を選択します。
- 必要に応じてプラグイン オプションを設定します（以下のプラグイン オプションを参照）。
- をクリックします。
- をクリックして変更を公開します。
プラグイン オプション
| オプション | タイプ | 説明 |
|---|---|---|
playMode |
文字列 | "auto" – 読み込み時にプレビューを自動再生"hover" – ホバー時のみプレビューを再生 |
loop |
真偽値 | true でプレビューをループ再生、false で1回のみ再生 |
delay |
数値 | プレビュー開始までの遅延（ミリ秒）。意図しない再生を避けるのに役立ちます。 |
playButtonVisible |
真偽値 | プレビュー中に再生ボタンを表示（true）/ 非表示（false）にします。 |
previewDuration |
数値 | プレビューの長さ（秒）。1 から 10 までの整数で指定します（デフォルトは 10）。 |
initialBandwidth |
数値 | 開始時の HLS レンディションを選択するために使用する初期帯域幅の推定値（ビット/秒）。プレビューは最低レンディションではなく、この値に収まる最高レンディションから再生を開始します。デフォルトの 3000000（3 Mbps）は、標準的な Brightcove インジェストプロファイルにおける 720p レンディションを対象としています。0 に設定すると、プレーヤーが自動的にレンディションを選択します。 |
lockRendition |
ブール値 | true の場合、プレビューはその再生中ずっと initialBandwidth で選択されたレンディションに固定され、プレーヤーのアダプティブビットレート（ABR）ロジックがより高帯域のレンディションに切り替わるのを防ぎます。initialBandwidth に収まるレンディションがない場合は、利用可能な最低レンディションが使用されます。これにより、1 つのプレビューが消費できる帯域幅に上限を設けられます（例：ホバー再生のサムネイルがグリッド状に多数同時再生される場合に有用です）。initialBandwidth が設定されていない場合は効果がありません。デフォルトは false です。 |
プラグイン設定例
ドロップダウン メニューから videoPoster プラグインを追加すると、以下の設定がプレーヤーに適用されます。
{
"plugins": [
{
"name": "videoPoster",
"options": {
"playMode": "hover",
"loop": true,
"delay": 300,
"playButtonVisible": true,
"previewDuration": 10,
"initialBandwidth": 3000000,
"lockRendition": false
},
"is_packaged": true
}
]
}
Media モジュールでアニメーション サムネイルを取得する
アニメーション サムネイルを取得するには、次の手順に従います。
- Media モジュールを開き、対象の動画を選択します。
- プレビューを開始したいフレームにスクラバー（再生ヘッド）を合わせ、 をクリックします。
- 動画プレビュー を選択し、 をクリックします。
API を使用してアニメーションサムネイルを確認する
video_preview フィールドは、Playback API と CMS API の両方で利用できます。これにより、アニメーションサムネイルの取得や管理をプログラムから行えます。
Playback API
次のリクエストでは、Playback API の動画オブジェクトのトップレベル プロパティとして video_preview フィールドが返されます。
例：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 フィールドにより、動画プレビューの取得と更新が可能です。
リクエスト例
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
}
}