Multi-Codec Playback on Web

Knowledge
, ,
1

Why this Post

Customers are increasingly looking to include more codecs in the same manifest. This is allows them to

  • efficiently supports a wider range of playback devices i.e if a device can decode a higher efficiency codecs more savings in bandwidth, load time and ultimately money.
  • YET support older devices by failing back to h264 ensuring an uninterrupted experience

Enabling Efficient Playback

We achieve this leveraging the videoCodecPriority configuration. Bitmovin then does the heavy lifting to check Browser-Codec-Manifest compatibility.

Excerpt from Bitmovin Documentation on this property:

Specifies the priority of video codecs for this source. If more than one video codec is available this order will be respected while finding a codec which is supported by the current browser. If there is a codec which is not in this priority list, it will be tried only if none of this list are available / supported.

How To Specify Codec Priority

In this example Player Config we tell Bitmovin to check compatibility in that order of

  1. HEVC-based Dolby Vision
  2. AV1
  3. h265/Hevc
  4. vp9
  5. Lastly default to h264
var config = {
  key: "YOUR-BITMOVIN-KEY-HERE",
  ...,
  playback: {
    autoplay: true,
    muted: true,
    videoCodecPriority: ['dvhe', 'dvh1', 'av01', 'hevc', 'hev', 'hvc', 'vp9', 'avc']
  },
  ...
}

FAQ

Q: Where can I learn more about Multi-Codec?

https://bitmovin.com/multi-codec-world-2020/ is the place

Q: How do Multi-Codec Manifests Look Like

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<MPD id="8c0e6a7b-4b08-4a08-a936-c4fc3f33cfba" profiles="urn:mpeg:dash:profile:full:2011" type="static" mediaPresentationDuration="P0Y0M0DT0H3M17.667S" minBufferTime="P0Y0M0DT0H0M2.000S" xmlns="urn:mpeg:dash:schema:mpd:2011" xmlns:ns2="http://www.w3.org/1999/xlink">
    <Period id="05b3ab12-50da-4ce7-a88c-c7d41bbf9cc7">
        <AdaptationSet segmentAlignment="true" mimeType="video/mp4">
            <SegmentTemplate media="$RepresentationID$/segment_$Number$.m4s" initialization="$RepresentationID$/init.mp4" duration="120000" startNumber="0" timescale="30000"/>
            <Representation id="video/fmp4/h265" bandwidth="3000000" width="3840" height="2160" frameRate="30" codecs="hvc1.1.6.L150.90"/>
        </AdaptationSet>
        <AdaptationSet segmentAlignment="true" mimeType="video/mp4">
            <SegmentTemplate media="$RepresentationID$/segment_$Number$.m4s" initialization="$RepresentationID$/init.mp4" duration="120000" startNumber="0" timescale="30000"/>
            <Representation id="video/fmp4/av1" bandwidth="2000000" width="3840" height="2160" frameRate="30" codecs="av01.0.12M.08"/>
        </AdaptationSet>
        <AdaptationSet segmentAlignment="true" mimeType="video/webm">
            <Representation id="a6fdb949-d231-4ab1-a490-39c58681668a" bandwidth="4000000" width="3840" height="2160" frameRate="30" codecs="vp9">
                <SegmentTemplate media="video/webm/vp9/segment_$Number$.chk" initialization="video/webm/vp9/init.hdr" duration="120000" startNumber="0" timescale="30000"/>
            </Representation>
        </AdaptationSet>
        <AdaptationSet segmentAlignment="true" mimeType="video/mp4">
            <SegmentTemplate media="$RepresentationID$/segment_$Number$.m4s" initialization="$RepresentationID$/init.mp4" duration="120000" startNumber="0" timescale="30000"/>
            <Representation id="video/fmp4/h264" bandwidth="6000000" width="3840" height="2160" frameRate="30" codecs="avc1.4D4033"/>
        </AdaptationSet>
    </Period>
</MPD>

Above manifest has 4 different codecs. Notice 4 video `AdaptationSets`; each in a different Codec. i.e `codecs="hvc1.1.6.L150.90"`, `codecs="av01.0.12M.08"` and so on.

Q: How can I create a Multi-Codec Manifest?

A dedicated example @ https://github.com/bitmovin/bitmovin-api-sdk-examples#multi-codec-encoding