Skip to content

How to Use AV1 as Video Source In HTML

Published:

Here's how to use AV1 file format as a <source> inside a <video> element in HTML:

1<video>
2 <source src="/videos/example.av1.mp4" type="video/mp4; codecs=av01,opus" >
3</video>

And here's an example where we have the file types WebM and MP4 as backups in case the visitor's browser doesn't support the AV1 format:

1<video width="584" height="350" >
2 <source src="/videos/example.av1.mp4" type="video/mp4; codecs=av01,opus" >
3 <source src="/videos/example.webm" type="video/webm" >
4 <source src="/videos/example.mp4" type="video/mp4" >
5</video>

Why is the type "video/mp4; codecs=av01,opus"? The "codecs" part is the codec that the browser should use for decoding the video. I believe that this codec is currently the standard for it and that there isn't a cleaner way to use it yet as at the moment AV1 isn't that widely spread yet. I did search for a better source type, but I couldn't find any. I will update this post if I do find a new, more developer friendly type for it.

Why is the AV1 file name example.av1.mp4 and not example.av1? It seems counter-intuitive to me, but from what I read it is commonly saved with the .mp4 extension at the moment, probably because of the fact that it is often converted from MP4 to AV1 format. I did try using example.av1 and it did work too, though.

Some neat <video> element tips: use height and width attributes to stop layout shift, and put the video sources in the order from smallest file size (top) to largest file size (bottom). Browsers read the source list from top to bottom and use the first one that they are compatible with, so if you have MP4 above the AV1, browsers won't have a chance to use it.