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
Valid values are
Thumbnails are commonly used as the preview image before a video is played.
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/Switzerlandw1562.mp4?fm=mp4" poster="https://ix-www.imgix.video/video/Switzerlandw1562.mp4?video-generate=thumbnail&video-thumbnail-time=3.5&w=640&h=360&fit=crop"
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 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.
<video id="my-video" width="640" height="360" controls src="https://ix-www.imgix.video/video/Switzerland_w1562.mp4?fm=mp4"
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.
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
Most popular video players support using a WebVTT file to enable timeline hover previews.
However, if you would like to implement timeline hover previews without using WebVTT you can get the same information in
json format as well.