MPEG-5 LCEVC

Load the LCEVC decoder before setting a source that uses LCEVC enhancement.

Tip: open your browser's developer console and use the player and THEOplayer variables to interact with this demo.

LCEVC decoder loaded	No
Active quality	—

Available qualities

Quality	Bandwidth
Waiting for quality information.

The SDK must include the lcevc feature, and the LCEVC decoder script must load before the source is set. LCEVC playback requires Media Source Extensions. On iOS Safari, the player falls back to native playback without LCEVC enhancement.

<script src="https://unpkg.com/lcevc_dec.js@1.3.0/dist/lcevc_dec.min.js"></script>

function loadLcevcSource() {
  player.autoplay = true;
  player.abr.strategy = 'quality';
  player.source = {
    sources: {
      src: 'https://d3mfda3gpj3dw1.cloudfront.net/vnU7dmJoRQgbO0gr/master.mpd',
      type: 'application/dash+xml',
      lcevc: true,
    },
  };
}

See how to play an LCEVC source for more prerequisites.

Code

demo.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>MPEG-5 LCEVC</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }

      theoplayer-default-ui:not(:defined) {
        display: inline-block;
        box-sizing: border-box;
      }

      theoplayer-default-ui {
        width: 100%;
        aspect-ratio: 16 / 9;
        font-family: 'Noto Sans', sans-serif;
        background: #000;
      }
    </style>
    <script src="https://unpkg.com/lcevc_dec.js@1.3.0/dist/lcevc_dec.min.js"></script>
    <script src="https://cdn.theoplayer.com/dash/theoplayer/THEOplayer.js"></script>
    <script nomodule src="https://unpkg.com/@theoplayer/web-ui@2/polyfills"></script>
    <script async src="https://unpkg.com/@theoplayer/web-ui@2"></script>
  </head>
  <body>
    <!--
      libraryLocation: For demonstration purposes, we use the THEOplayer CDN.
      For production use, host the library yourself and update this URL and the script above.

      licenseUrl: Point this to your license file, or replace it with a license property.
    -->
    <theoplayer-default-ui
      configuration='{"libraryLocation":"https://cdn.theoplayer.com/dash/theoplayer/","licenseUrl":"../../../../theoplayer-license.txt","mutedAutoplay":"all"}'
    ></theoplayer-default-ui>
    <script src="../utils.js"></script>
    <script>
      const sources = {
        dash: {
          sources: {
            src: 'https://d3mfda3gpj3dw1.cloudfront.net/vnU7dmJoRQgbO0gr/master.mpd',
            type: 'application/dash+xml',
            lcevc: true,
          },
        },
        hls: {
          sources: {
            src: 'https://d3mfda3gpj3dw1.cloudfront.net/vnU7dmJoRQgbO0gr/master.m3u8',
            type: 'application/x-mpegurl',
            lcevc: true,
          },
        },
      };

      onPlayerReady((player) => {
        player.abr.strategy = 'quality';

        function report() {
          const track = Array.from(player.videoTracks).find((videoTrack) => videoTrack.enabled);
          const activeQuality = track && track.activeQuality;
          sendToParent('lcevc', {
            decoderLoaded: typeof LCEVCdec !== 'undefined',
            activeQuality: activeQuality
              ? {
                  id: activeQuality.id,
                  width: activeQuality.width,
                  height: activeQuality.height,
                  bandwidth: activeQuality.bandwidth,
                  frameRate: activeQuality.frameRate,
                }
              : null,
            qualities: track
              ? Array.from(track.qualities).map((quality) => ({
                  id: quality.id,
                  width: quality.width,
                  height: quality.height,
                  bandwidth: quality.bandwidth,
                  frameRate: quality.frameRate,
                }))
              : [],
          });
        }

        player.videoTracks.addEventListener('addtrack', (event) => {
          event.track.addEventListener('activequalitychanged', report);
          report();
        });
        player.addEventListener(['sourcechange', 'durationchange'], report);
        player.addEventListener('error', report);
        onParentMessage('lcevc-format', (message) => {
          if (message.format !== 'dash' && message.format !== 'hls') return;
          player.autoplay = true;
          player.source = sources[message.format];
          report();
        });

        player.source = sources.dash;
        report();
      });
    </script>
  </body>
</html>