AV1 support

Documentation sections

• Scope of support
• Player code example

Scope of support

AOMedia Video 1 (AV1) is an open, royalty-free video coding format designed for video transmissions over the Internet. It is being developed by the Alliance for Open Media (AOMedia), a consortium of firms from the semiconductor industry, video on demand providers, and web browser developers, founded in 2015. The AV1 bitstream specification includes a reference video codec. It succeeds VP9. It can have 20% higher data compression than VP9 or HEVC/H.265 from the Moving Picture Experts Group and about 50% higher than the widely used AVC.

As of February 2019, AV1 video support is available in latest Desktop Chrome, Edge, Firefox and Opera. This table can give more complete and up to date information.

AV1 video support in Radiant Media Player is currently available in progressive download mode in MP4 container in Desktop Chrome, Edge, Firefox and Opera and DASH CMAF with latest Desktop Firefox.

A guide for encoding video with AV1 codec and FFmpeg can be found here.

Player code example for MP4/AV1 progressive download - see this example here

In order to determine AV1 video support we will use the canPlayType player method as described here.

<script src="https://cdn.radiantmediatechs.com/rmp/5.11.5/js/rmp.min.js"></script>
<div id="rmpPlayer"></div>
<script>
  // First we create our Radiant Media Player instance
  var elementID = 'rmpPlayer';
  var rmp = new RadiantMP(elementID);
  // We can then gain access to the getEnvironment API method
  var env = rmp.getEnvironment();
  // We define 2 source objects, one with AV1/AAC and the other with H.264/AAC
  var src;
  var avcaacSrc = {
    mp4: [
      'https://your-mp4-h264-aac-url.mp4'
    ]
  };
  var av1aacSrc = {
    mp4: [
      'https://your-mp4-av1-aac-url.mp4'
    ]
  };
  // Then we can use the canPlayType method from getEnvironment API to determine 
  // if AV1 (Main Profile, level 2.1) and HE-AACv2 support is available
  src = avcaacSrc;
  if (env.canPlayType('native', 'video', 'mp4', 'av01.0.01M.08', 'mp4a.40.29')) {
    src = av1aacSrc;
  }
  // Then we set our player settings using the selected src object
  var settings = {
    licenseKey: 'your-license-key',
    src: src,
    width: 640,
    height: 360,
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    }
  };
  var elementID = 'rmpPlayer';
  var rmp = new RadiantMP(elementID);
  rmp.init(settings);
</script>

Player code example for DASH/AV1 - see this example here

<script src="https://cdn.radiantmediatechs.com/rmp/5.11.5/js/rmp.min.js"></script>
<div id="rmpPlayer"></div>
<script>
  // First we create our Radiant Media Player instance
  var elementID = 'rmpPlayer';
  var rmp = new RadiantMP(elementID);
  // We can then gain access to the getEnvironment API method
  var env = rmp.getEnvironment();
  // We define 2 source objects, one with AV1/AAC and the other with H.264/AAC
  var src;
  var dash = 'https://5b44cf20b0388.streamlock.net:8443/vod/smil:bbb.smil/manifest.mpd';
  var av1Dash = 'https://storage.googleapis.com/bitmovin-demos/av1/stream.mpd';
  // Then we can use the canPlayType method from getEnvironment API to determine 
  // if AV1 (Main Profile, level 2.1) and HE-AACv2 support is available
  src = dash;
  // currently only latest Firefox supports DASH/AV1 so we need to
  // confirm that we are on Firefox and with AV1 support
  var FIREFOX_PATTERN = /firefox\/[.0-9]+?/i;
  if (FIREFOX_PATTERN.test(navigator.userAgent) && env.canPlayType('mse', 'video', 'mp4', 'av01.0.01M.08', 'mp4a.40.29')) {
    src = av1Dash;
  }
  // Then we set our player settings using the selected src object
  var settings = {
    licenseKey: 'your-license-key',
    src: src,
    width: 640,
    height: 360,
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    }
  };
  var elementID = 'rmpPlayer';
  var rmp = new RadiantMP(elementID);
  rmp.init(settings);
</script>