Video.js
<html>
<head>
<title>Mux Video JS Example</title>
<script src="https://unpkg.com/@mux/videojs-kit@latest/dist/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@mux/videojs-kit@latest/dist/index.css">
</head>
<body>
<h2>Asset Example</h2>
{exp:channel:entries
channel="events"
show_expired="yes"
show_future_entries="yes"
status="open|closed"
}
<!-- The name of your Mux Assets Custom Field below: -->
{mux_asset_field}
<section class="basic_box">
<article>
{if audio_only}
<audio
id="my-player"
class="video-js vjs-fluid"
controls
width="100%"
data-setup='{
fluid: true,
"plugins": {
"mux": {
"data":{
"env_key": "{env_key}",
"video_title": "{if mux_title}{mux_title}{if:else}{filename}{/if}"
}
}
}
}'
>
<source src="{playback}" type="video/mux" />
</audio>
{if:else}
<video
id="my-player"
class="video-js vjs-16-9"
controls
preload="auto"
width="100%"
poster="{thumbnail_url}"
data-setup='{
"timelineHoverPreviews": true,
"plugins": {
"mux": {
"data":{
"env_key": "{env_key}",
"video_title": "{if mux_title}{mux_title}{if:else}{filename}{/if}"
}
}
}
}'
>
<source src="{playback}" type="video/mux" />
</video>
{/if}
</article>
</section>
{/mux_asset_field}
{/exp:channel:entries}
</body>
</html>