フレーム生成
video-generate
imgixによってエンコードされた任意のビデオアセット(imgix.video
ドメインである必要があります)では、video-generate
パラメータを使用して、静止画、GIF、またはストーリーボードを生成することができます。
有効な値はthumbnail
、gif
、および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
video-generate=storyboard
ストーリーボードは、ビデオを素早くスクラブする際のタイムラインホバープレビューを作成するために使用できます。ストーリーボードは、ビデオからの数多くのフレームが1つの大きな画像ファイルにタイル状に配置されています。
video-storyboard-format
をjpg
またはpng
に設定すると、これらの大きなタイル状のファイルのいずれかが生成されます。これらは、ビデオのタイムスタンプをストーリーボード画像ファイル内の対応するビデオフレームの座標にマッピングするメタデータファイルと併用して使用できます。video-storyboard-format
を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: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
形式でも同じ情報を取得できます。