フレーム生成

video-generate

imgixによってエンコードされた任意のビデオアセット(imgix.videoドメインである必要があります)では、video-generateパラメータを使用して、静止画、GIF、またはストーリーボードを生成することができます。

有効な値はthumbnailgif、およびstoryboardです。

注意:video-generateパラメータへのリクエストはトランスコーディングプロセスをトリガーしません。ビデオがまだトランスコードされていない場合、404を返します。

video-generate=thumbnail

サムネイルは、ビデオ再生前のプレビュー画像として一般的に使用されます。

video-generate=thumbnailを渡すと、既存の画像レンダリングAPIパラメータで変換できる画像URLが返されます。デフォルトでは、JPGが返されます。

サムネイルの例

ほとんどのビデオプレーヤーにポスター画像を追加することができます。imgixイメージURLを含めることで、ビデオ要素のポスター画像属性を使用できます。

<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-thumbnail-timeが設定されていない場合、ビデオの中間付近にデフォルトで設定されます。

video-generate=gif

video-generate=gifを渡すと、既存の画像レンダリング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 GIFの例

video-generate=storyboard

ストーリーボードは、ビデオを素早くスクラブする際のタイムラインホバープレビューを作成するために使用できます。ストーリーボードは、ビデオからの数多くのフレームが1つの大きな画像ファイルにタイル状に配置されています。

video-storyboard-formatjpgまたはpngに設定すると、これらの大きなタイル状のファイルのいずれかが生成されます。これらは、ビデオのタイムスタンプをストーリーボード画像ファイル内の対応するビデオフレームの座標にマッピングするメタデータファイルと併用して使用できます。video-storyboard-formatvttまたは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:22.062 --> 00:00:23.021
https://image.media.imgix.video/01l1pCNbdLDnFoB9eScrLQ6374SdOhv8t/storyboard.jpg#xywh=696,640,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形式でも同じ情報を取得できます。