AV1 Video in video element

You can finally play AV1video in the browsers (currently Chrome, Opera and Firefox) using the video element. The video above was encoded using ffWorks, an FFMPEG front-end.

Using the video element

Using AV1 is not too different than using VP9, H264 or H265. The code looks like this:


    <video  controls
        playsinline
        class="video"
        poster="images/poster.jpg"
        height="480px"
        width="640px">
      <source src="footloose.mp4" type='video/mp4; codecs="avc1.4d401f"'>
    </video>

Normally I would not worry about adding the codecs portion of the type attribute. With AV1 this is essential since you can play more than one video format in an MP4 container and we don't want to download a video if the browser will not play it.

Youtube

Youtube allows content creators to upload AV1 videos (in MP4 containers) without erroring out but, sadly, it seems to convert them to H264 as part of the upload process. I've asked Youtube Developers on Twitter if users are allowed to upload AV1 video to the platform and I'm still waiting to hear from them.

So, instead of using the same video, I've chosen to work with a video from Youtube's AV1 Beta Launch Playlist to see how well it works. 


      <iframe width="560" height="315"
      src="https://www.youtube.com/embed/Fmdb-KmlzD8"
      frameborder="0"
      allow="accelerometer; autoplay;
      encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>

You can use TestTube to tell Youtube how much you want to use AV1 when watching YouTube content.

Notes about support:

Currently you can play AV1 video in Chrome (desktop), Firefox (desktop), and Edge, with the following caveats: