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
parameter do 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.
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
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.