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>