JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<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.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>
    <style>
      #player {
        width: 100%;
        position: relative;
      }
    </style>
  </head>

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

      const simplePlayer = lcevcDilHlsSimplePlayer(url, playerElement, lcevcDilConfig);
    </script>
  </body>
</html>