THEOplayer

Note, THEOplayer requires a unique license key to use. https://www.theoplayer.com/
<html>
    <head>
        <title>Mux THEOplayer</title>
        <script src="/your/path/THEOplayer.js"></script>
        <link rel="stylesheet" href="/your/path/theoplayer/ui.css" />
    </head>
<body>
{exp:channel:entries channel="video"}

<!-- The name of your Mux Assets Custom Field below: -->
{mux_asset_field}

    <div class="theoplayer-container video-js theoplayer-skin vjs-16-9" data-theoplayer-{random_key} ></div>

    <script>
      var element = document.querySelector('[data-theoplayer-{random_key}]'); 
      var player = new THEOplayer.Player(element, { 
        libraryLocation: 'xxxx',
        license: 'xxxxx'
      });
      player.source = {
        sources: [{
          src: '{playback_url}',
          type: 'application/x-mpegurl'
        }]
      };
    </script>

{/mux_asset_field}

{/exp:channel:entries}
</body>        
</html>