ストーリーボードフォーマット

video-storyboard-format

video-generate=storyboard と併用して、imgix によってエンコードされた動画からストーリーボードを生成します。このパラメータは video-generatestoryboard に設定されている場合にのみ有効です。

使用可能な値は、vttjpgpngjson です。デフォルトは jpg です。

video-storyboard-format=vtt

video-storyboard-format=vtt を指定すると、WebVTT ファイルが返されます。この形式は、多くの一般的な動画プレーヤーでタイムラインホバープレビューを有効にするために使用されます。

例: https://ix-www.imgix.video/video/Switzerland_w1562.mp4?video-generate=storyboard&video-storyboard-format=vtt

WEBVTT
 
00:00:00.000 --> 00:00:00.959
 
https://image.media.imgix.video/01l1pCNbdLDnFoB9eScrLQ6374SdOhv8t/storyboard.jpg#xywh=0,0,232,160
...

video-storyboard-format=jpg

video-storyboard-format=jpg を指定すると、動画の多数のフレームをタイル状に並べた大型 JPG 画像ファイルが返されます。

例: https://ix-www.imgix.video/video/Switzerland_w1562.mp4?video-generate=storyboard&video-storyboard-format=jpg

Storyboard JPG example

video-storyboard-format=png

video-storyboard-format=png を指定すると、JPG と同様にフレームをタイル状に並べた大型 PNG ファイルが返されます。

例: https://ix-www.imgix.video/video/Switzerland_w1562.mp4?video-generate=storyboard&video-storyboard-format=png

Storyboard PNG example

video-storyboard-format=json

video-storyboard-format=json を指定すると、WebVTT と同じ情報を JSON 形式で取得できます。

例: https://ix-www.imgix.video/video/Switzerland_w1562.mp4?video-generate=storyboard&video-storyboard-format=json

{
  "url": "https://image.media.imgix.video/01l1pCNbdLDnFoB9eScrLQ6374SdOhv8t/storyboard.jpg",
  "tile_width": 232,
  "tile_height": 160,
  "duration": 24.08,
  "tiles": [
    { "start": 0, "x": 0, "y": 0 },
    { "start": 0.9592, "x": 232, "y": 0 },
    ...
  ]
}

ユースケース

ストーリーボードは、動画コンテンツを強化しユーザーエンゲージメントを高めるための多用途なツールです。以下は代表的な使用例です。

トリックプレイ

Trick play example

トリックプレイは、ユーザーがスクラブ中にサムネイルプレビューを表示しながら動画を視覚的にナビゲートできるようにする機能です:

  • 長尺動画のシーク中に視覚的コンテキストを提供
  • 特定シーンへの正確な移動を可能に
  • タイムスタンプと併せて視覚的手がかりを提供

WebVTT フォーマット(video-storyboard-format=vtt)は、多くの動画プレーヤーでトリックプレイを実装するのに最適です。ix-elements はこの機能を内蔵しており、ユーザーフレンドリーな動画プレーヤー作成チュートリアルでも詳しく紹介しています。

コンテンツレビュー

ストーリーボードは、動画のビジュアル要約を提供することでコンテンツレビューの効率を高めます。Slack 通知と連携すれば、アップロードごとにビジュアルな要約を共有可能です。

Content review example

この例では jpg または png 出力形式が適しています。

サムネイルピッカー

ストーリーボードは、コンテンツ制作者や管理者が代表的なフレームを選択できるようなサムネイル選択 UI の自動化にも活用できます。

JSON フォーマット(video-storyboard-format=json)は、構造化データとしてフレームの位置やタイムスタンプを提供するため、imgix API による直接サムネイル生成と組み合わせてカスタムピッカーを構築するのに便利です。

以下は、video-thumbnail-time パラメータと連携した例です:

Loading storyboard data...

長尺動画のチャプター作成にも応用できます。

動画編集の参照用

ストーリーボードは、動画編集者やプロデューサーの編集作業中の参照資料としても有効です:

  • 編集判断のためのシーントランジション特定
  • ショットリストや編集計画の作成
  • 特定のフレームやシーケンスのチーム共有
  • 完成コンテンツのビジュアル構成の記録

タイル画像形式は、一つのファイルで包括的なビジュアル参照ができるため特に便利です。