Embedding LCEVC-enabled demo hls.js player

This page provides instructions on how how to incorporate V-Nova’s LCEVC-enabled demo hls.js player into any webpage.

The first step to include the V-Nova LCEVC HTML5 player in your website is to add the JavaScript, WebAssembly, and hls.js sources.

Example

First, we need to add the player source files into the element of our template. The example provided points to publicly hosted binaries for hls.js along with the additional LCEVC decoder integration layer (DIL) components that are hosted and maintained by V-Nova.

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.0.2/hls.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lcevc_dil.js@latest/dist/lcevc_dil.min.js"></script>
    <script type="text/javascript" src="https://dyctis843rxh5.cloudfront.net/v-nova/jslibs/nightly/20210726/lcevc_dil_patch_hls.js"></script>
  </head>

  <body>
  </body>
</html>

Then, we have to add a HTMLDivElement and the style, where we want our player to be inserted. An id is required which will be used later to identify the HTMLElement. The style of the player requires that the position is relative in order to ensure the correct aspect ratio of the video.

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.0.2/hls.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lcevc_dil.js@latest/dist/lcevc_dil.min.js"></script>
    <script type="text/javascript" src="https://dyctis843rxh5.cloudfront.net/v-nova/jslibs/nightly/20210726/lcevc_dil_patch_hls.js"></script>
    <style>
      #player {
        width: 100%;
        position: relative;
      }
    </style>
  </head>

  <body>
    <div id="player"></div>
  </body>
</html>

Configure your player

The LCEVC-enhanced hls.js player offers options to customise some features like dynamic performance scaling (DPS), logging, etc. however we will start with an empty configuration:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.0.2/hls.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lcevc_dil.js@latest/dist/lcevc_dil.min.js"></script>
    <script type="text/javascript" src="https://dyctis843rxh5.cloudfront.net/v-nova/jslibs/nightly/20210726/lcevc_dil_patch_hls.js"></script>
    <style>
      #player {
        width: 100%;
        position: relative;
      }
    </style>
  </head>

  <body>
    <div id="player"></div>
    <script>
      const url =
        'https://dyctis843rxh5.cloudfront.net/vny72tI8aXJDcTYX/master.m3u8';
      const playerElement = document.getElementById('player');
      const lcevcConfig = {};
    </script>
  </body>
</html>

To show the video player controls, specify an existing HTMLElementID (or specify one that will be created with the command we will see later) and set the enable option to true. 

const lcevcDilConfig = {
  playerControls: {
    controlsID: 'player-controls',
    enabled: true
  },
};

The next step is to initialise a new instance of the LCEVC-enhanced hls.js player, which requires the URL of the stream to be loaded, the HTMLElement from before and it’s configuration:

const simplePlayer = dilHlsSimplePlayer(url, playerElement, lcevcConfig);

The dilHlsSimplePlayer wrap the necessary commands to create the canvas, initialise hls.js and DIL.js, and auto play the video once is loaded.

All those code snippets put together creates the V-Nova LCEVC-enhanced hls.js player in your website:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.0.2/hls.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lcevc_dil.js@latest/dist/lcevc_dil.min.js"></script>
    <script type="text/javascript" src="https://dyctis843rxh5.cloudfront.net/v-nova/jslibs/nightly/20210726/lcevc_dil_patch_hls.js"></script>
    <style>
      #player {
        width: 100%;
        position: relative;
      }
    </style>
  </head>

  <body>
    <div id="player"></div>
    <script>
      const url = 'https://dyctis843rxh5.cloudfront.net/vny72tI8aXJDcTYX/master.m3u8';
      const playerElement = document.getElementById('player');
      const lcevcDilConfig = {
        playerControls: {
          controlsID: 'player-controls',
          enabled: true
        }
      };

      const simplePlayer = lcevcDilHlsSimplePlayer(url, playerElement, lcevcDilConfig);
    </script>
  </body>
</html>
PreviousShaka Player with LCEVCNextLCEVC in Android Open-Source Project

Last updated