フレーム生成
video-generate
imgix.video
ドメインでエンコードされた動画アセットに対して、video-generate
パラメータを使用することで静止画像、GIF、またはストーリーボードを生成できます。
有効な値は thumbnail
、gif
、storyboard
です。
なお、video-generate
パラメータへのリクエストは トランスコード処理 をトリガーしません。動画がまだトランスコードされていない場合は 404
が返されます。
video-generate=thumbnail
サムネイルは、動画再生前のプレビュー画像としてよく使用されます。
video-generate=thumbnail
を指定すると、Image Rendering API の既存パラメータを使用して変換可能な画像 URL が返されます。デフォルトでは JPG が返されます。
ほとんどの動画プレーヤーでは、ポスター画像として 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
video-generate=storyboard
ストーリーボードは、動画の早送りやスクラブ時にタイムライン上でプレビューを表示するために使用できます。ストーリーボードは、複数のフレームをタイル状に並べた大きな画像ファイルです。
video-storyboard-format
に jpg
または 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 形式で取得することも可能です。