フレーム生成

video-generate

imgix.video ドメインでエンコードされた動画アセットに対して、video-generate パラメータを使用することで静止画像、GIF、またはストーリーボードを生成できます。

有効な値は thumbnailgifstoryboard です。

なお、video-generate パラメータへのリクエストは トランスコード処理 をトリガーしません。動画がまだトランスコードされていない場合は 404 が返されます。

video-generate=thumbnail

サムネイルは、動画再生前のプレビュー画像としてよく使用されます。

video-generate=thumbnail を指定すると、Image Rendering API の既存パラメータを使用して変換可能な画像 URL が返されます。デフォルトでは JPG が返されます。

https://ix-www.imgix.video/video/Switzerland_w1562.mp4?video-generate=thumbnail&video-thumbnail-time=30&w=300&h=300&fit=crop

ほとんどの動画プレーヤーでは、ポスター画像として Imgix の画像 URL を設定できます。以下は HTML5 video 要素でポスター画像を使用する例です:

<video
  id="my-video"
  width="640"
  height="360"
  controls
  src="https://ix-www.imgix.video/video/Switzerland_w1562.mp4?fm=mp4"
  poster="https://ix-www.imgix.video/video/Switzerland_w1562.mp4?video-generate=thumbnail&video-thumbnail-time=3.5&w=640&h=360&fit=crop"
></video>

video-thumbnail-time を使用して、サムネイル生成に使用する時間(秒)を指定できます。指定しない場合は動画の中間地点が使用されます。

video-generate=gif

video-generate=gif を指定すると、Image Rendering API パラメータで変換可能な GIF URL が返されます。

GIF は、ユーザーが再生前に動画にホバーしたときのプレビューとしてよく使用されます。

例:
https://ix-www.imgix.video/video/Switzerland_w1562.mp4?video-generate=gif&video-gif-start=0.5&video-gif-end=4.2&gif-q=50
https://ix-www.imgix.video/video/Switzerland_w1562.mp4?video-generate=gif&video-gif-start=0.5&video-gif-end=4.2&gif-q=50

video-generate=storyboard

ストーリーボードは、動画の早送りやスクラブ時にタイムライン上でプレビューを表示するために使用できます。ストーリーボードは、複数のフレームをタイル状に並べた大きな画像ファイルです。

video-storyboard-formatjpg または png を指定すると、タイル形式の画像が生成されます。vtt または json を指定すると、時間とフレーム座標をマッピングしたメタデータファイルが生成されます。

多くの動画プレーヤーは、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
 
00:00:00.959 --> 00:00:01.918
https://image.media.imgix.video/01l1pCNbdLDnFoB9eScrLQ6374SdOhv8t/storyboard.jpg#xywh=232,0,232,160
...
00:00:23.021 --> 00:00:24.080
https://image.media.imgix.video/01l1pCNbdLDnFoB9eScrLQ6374SdOhv8t/storyboard.jpg#xywh=928,640,232,160

WebVTT を使用せずにタイムラインプレビューを実装したい場合は、同様の情報を JSON 形式で取得することも可能です。