Video API

  1. Documentation
  2. imgix APIs
  3. Video API
  4. Format
  5. Frame Generation

Frame Generation video-generate

For any video asset that is encoded by imgix (it should have an imgix.video domain), you can generate a still image, a gif, or a storyboard by using the video-generate parameter.

Valid values are thumbnail, gif, and storyboard.

Note that requests to the video-generate paramter does not trigger the transcoding process, and will return a 404 if the video has not been transcoded yet.

video-generate=thumbnail

Thumbnails are commonly used as the preview image before a video is played.

Passing video-generate=thumbnail will return an image url that can be transformed with any existing Image Rendering API params. By default, this will return a JPG.

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

You can add a poster image to the majority of video players by including an imgix image URL. Here's an example using a HTML5 video element with a poster image attribute.

<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>

Use video-thumbnail-time to specify the time, in seconds, which should be used to generate the thumbnail. If video-thumbnail-time is not set it will default to somewhere in the middle of the video.

video-generate=gif

Passing video-generate=gif will return a gif URL that can be transformed with any existing Image Rendering API params.

Gifs are often used as a preview when a user hovers over a video before playing it.

Example: 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

Storyboards can be used to create timeline hover previews when quickly scrubbing through a video. Storyboards consist of numerous frames from the video tiled into one large image file.

Setting a video-storyboard-format to jpg or png will generate one of these large tiled files. They can be used in conjunction with metadata files that map video timestamps to the coordinates of the corresponding video frame in the storyboard image file. Metadata files can be generated by setting video-storyboard-format to vtt or json.

Most popular video players support using a WebVTT file to enable timeline hover previews.

Example: 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

However, if you would like to implement timeline hover previews without using WebVTT you can get the same information in json format as well.

Other Format Methods