Storyboard Format

video-storyboard-format

Used with video-generate=storyboard to return a storyboard generated from an imgix-encoded video. This parameter only works when video-generate is set to storyboard.

Possible values are vtt, jpg, png, json. Defaults to jpg.

video-storyboard-format=vtt

Setting video-storyboard-format=vtt will return a WebVTT file, which can be used in most popular video players to enable timeline hover previews.

Example: https://ix-www.imgix.video/video/Switzerland_w1562.mp4?video-generate=storyboard&video-storyboard-format=vtt (opens in a new tab)

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:01.918 --> 00:00:02.878
 
https://image.media.imgix.video/01l1pCNbdLDnFoB9eScrLQ6374SdOhv8t/storyboard.jpg#xywh=464,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

video-storyboard-format=jpg

Setting video-storyboard-format=jpg will return a large PNG file made up of numerous frames from the video tiled into one large image file.

Example: https://ix-www.imgix.video/video/Switzerland_w1562.mp4?video-generate=storyboard&video-storyboard-format=jpg (opens in a new tab)

Storyboard JPG example

video-storyboard-format=png

Setting video-storyboard-format=png will return a large PNG file made up of numerous frames from the video tiled into one large image file.

Example: https://ix-www.imgix.video/video/Switzerland_w1562.mp4?video-generate=storyboard&video-storyboard-format=png (opens in a new tab)

Storyboard PNG example

video-storyboard-format=json

Setting video-storyboard-format=json will return the same information as in a WebVTT file but in JSON format.

Example: https://ix-www.imgix.video/video/Switzerland_w1562.mp4?video-generate=storyboard&video-storyboard-format=json (opens in a new tab)

{
  "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.9591999999999998, "x": 232, "y": 0 },
    { "start": 1.9183999999999997, "x": 464, "y": 0 },
    { "start": 2.8775999999999993, "x": 696, "y": 0 },
    { "start": 3.8367999999999993, "x": 928, "y": 0 },
    { "start": 4.795999999999999, "x": 0, "y": 160 },
    { "start": 5.7551999999999985, "x": 232, "y": 160 },
    { "start": 6.714399999999999, "x": 464, "y": 160 },
    { "start": 7.673599999999999, "x": 696, "y": 160 },
    { "start": 8.632799999999998, "x": 928, "y": 160 },
    { "start": 9.591999999999999, "x": 0, "y": 320 },
    { "start": 10.551199999999998, "x": 232, "y": 320 },
    { "start": 11.510399999999997, "x": 464, "y": 320 },
    { "start": 12.469599999999998, "x": 696, "y": 320 },
    { "start": 13.428799999999997, "x": 928, "y": 320 },
    { "start": 14.387999999999998, "x": 0, "y": 480 },
    { "start": 15.347199999999997, "x": 232, "y": 480 },
    { "start": 16.306399999999996, "x": 464, "y": 480 },
    { "start": 17.265599999999996, "x": 696, "y": 480 },
    { "start": 18.2248, "x": 928, "y": 480 },
    { "start": 19.183999999999997, "x": 0, "y": 640 },
    { "start": 20.143199999999997, "x": 232, "y": 640 },
    { "start": 21.102399999999996, "x": 464, "y": 640 },
    { "start": 22.061599999999995, "x": 696, "y": 640 },
    { "start": 23.020799999999994, "x": 928, "y": 640 }
  ]
}

GIF Time Start Thumbnail Frame Selection