Embedding LCEVC - Example

An example of using JavaScript to embed lcevc players using a single script

by Julien Etienne

HTML

<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.min.js"></script>
<script type="text/javascript" src="https://d3mfda3gpj3dw1.cloudfront.net/LCEVC_HTML/dil.js/liblcevc_dpi.js"></script>
<script type="text/javascript" src="https://d3mfda3gpj3dw1.cloudfront.net/LCEVC_HTML/dil.js/lcevc_dil.min.js"></script>
<script type="text/javascript" src="https://d3mfda3gpj3dw1.cloudfront.net/LCEVC_HTML/dil.js/lcevc_dil_patch_hls.js"></script>


<div id="player-controls-1" data-lcevc-player-url="https://d3mfda3gpj3dw1.cloudfront.net/vnVCommJVddTqCWj/master.m3u8"></div>
<div id="player-controls-2" data-lcevc-player-url="https://d3mfda3gpj3dw1.cloudfront.net/vnVCommJVddTqCWj/master.m3u8"></div>

CSS

body {
  background: grey;
  width: 100%;
  height: 100%;
  position: absolute;
}

[data-lcevc-player-url] {
  position: relative;
  float: left;
  width: 500px;
height: 300px;
  padding: 0;
  margin: 0;
  display: block;
}

JavaScript

// Get all video players with data-lcevc-player-url attributes. 
const players = Array.from(document.querySelectorAll('[data-lcevc-player-url]'));

// Reuse the config or use different ones per video. 
const lcevcDilConfig = {
  playerControls: {
    controlsID: 'player-controls',
    enabled: true,
    toggleButton: true
  }
};

// For each video get the url and setup the simple player.
players.forEach((player) => {
  const url = player.getAttribute('data-lcevc-player-url');
  lcevcDilHlsSimplePlayer(url, player, {
    playerControls: {
      controlsID: player.id + 'abc',
      enabled: true,
      toggleButton: true
    }
  });
});