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: Generates a still image from the video.
gif: Generates a gif from the video.
storyboard: Generates a storyboard from the video.

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

`video-generate=thumbnail`

Generates a thumbnail image for the video. The output image can be transformed with any existing Rendering API params. By default, this will return a JPG.

Uses the video-thumbnail-time parameter for specifying the time of the video (in seconds) for thumbnail generation.

In the examples below, we extracted thumbnails from the 3, 6, 12, and 15 second marks from this video example.

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. In the example below, we specify the 12 second mark of the video to be used as the poster image.

<video
  id="my-video"
  width="800"
  height="450"
  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=800&h=450&fit=crop"
></video>

`video-generate=gif`

Returns a gif URL that can be transformed with any existing Rendering API params. Commonly used for generating lightweight video previews. Hover over the thumbnails below to see a GIF playback preview.

See the Video GIF documentation documentation for more information on how to modify GIF outputs.

`video-generate=storyboard`

Generates a storyboard from the video in several formats (vtt, jpg, png and json).

Storyboards can be used to:

Create timeline hover previews
Generate a large tiled image of the video frames for visual review
Create chapter markers for the video

Below is an example of a a chapter selection UI generated using a storyboard file.

Loading storyboard data...

See the storyboard format documentation for more information on storyboard output.

Format Output Format