Getting Started with Video

The Imgix Video API lets you serve and transform video from the same Source you already use for images. You resize, clip, generate thumbnails, and re-encode video with URL parameters, the same way you transform images. There is nothing to provision: video runs on your existing .net domain, supports custom domains, and is processed on demand the first time you request it.

Imgix Video is best suited for short-form content, such as clips, GIFs, and background video. For every available parameter, see the Video API reference.

Before You Begin

You need a Source connected to storage that holds your video files. Any Source can serve video, so if you already serve images through Imgix, you can serve video from that same Source with no extra setup. Point your Source at an Origin that contains the videos you want to serve, or upload videos the same way you upload any other asset.

Serving Your First Video

To serve a video, request it from your Imgix domain and add fm=mp4. The fm parameter initiates Imgix Video and sets the output format:

https://assets.imgix.net/videos/northern-lights.mp4?fm=mp4

MP4 is the most widely supported format and plays natively in browsers. Imgix Video also supports adaptive HLS and DASH streams, along with json metadata and spritesheet output.

First Request

The first request for a video may return a 423 status code for a short time while Imgix processes it. Longer videos are processed asynchronously and can take longer to become available. Poll the URL, or request it again after a few minutes. Once processed, the render is cached and served immediately.

Transforming Video

Video transformations work like image transformations: add parameters to the URL in any order. A few of the most useful:

Resize with w and h.
Clip a segment with video-clip-start and video-clip-end.
Generate a thumbnail with video-thumbnail.
Control quality and file size with video-bitrate, video-codec, and video-aq.

For guidance on choosing bitrates, codecs, and quality settings, see Optimizing Imgix Video.

Playing Video on Your Site

MP4 files play in any browser with a standard <video> element. For adaptive streaming with HLS or DASH, use a player that supports those formats, such as Imgix’s ix-player custom element:

<!-- Note: type 'module' here is important -->
<script
    defer
    type="module"
    src="https://static.imgix.net/ix-player/@latest/dist/ix-player.mjs">
</script>
<ix-player
    gif-preview
    type="hls"
    src="https://assets.imgix.net/videos/girl-reading-book-in-library.mp4?ixembed=docs&fm=hls">
</ix-player>

Click here to modify this in a CodeSandbox.

For a complete walkthrough, see Creating a User Friendly Video Player.

Managing Your Videos

Videos follow the same lifecycle as your other assets:

Update a video: We recommend serving an updated video under a new file name. To keep the same name, replace the file at your Origin and purge the old URL so the change takes effect immediately.
Delete a video: Remove the file at your Origin. Purge the URL to clear it right away; otherwise it expires from cache normally.

Next Steps

Browse the full Video API reference for every parameter.
Learn how to build a video player.
Review best practices for normalizing video input.

The Image Editor Demo Source Guide