JW Player
<html>
<head>
<title>Mux Asset Example</title>
<link rel="stylesheet" href="{stylesheet=mux/styles}" type="text/css" media="screen" />
<script src="https://cdn.jwplayer.com/libraries/xxxxxx.js"></script>
</head>
<body>
<h2>Asset Example</h2>
{exp:channel:entries channel="blog"}
<!-- The name of your Mux Assets Custom Field below: -->
{mux_asset_field}
<div id="video_local_{mux_id}"></div>
<script>
var playerInstance = jwplayer("video_local_{mux_id}");
playerInstance.setup({
playlist: [
// Add a Single video to playlist.
{
"file" : '{playback_url}',
"image" : '{thumbnail_url}',
"title" : 'First: {mux_id}',
"description" : "The first Video.",
},
// This will loop through clips created from this asset.
{clips}
{
"file": "{clip_playback_url}",
"image": "{clip_thumbnail_url}",
"title": "clip: {clip_mux_id}",
"description" : "Video Clip.",
},
{/clips}
// This will loop through recordings made from a live stream ID.
{recordings}
{
"file": "{recording_playback_url}",
"image": "{recording_thumbnail_url}",
"title": "Rec: {recording_mux_id}",
"description" : "Stream Recording.",
},
{/recordings}
]
});
</script>
{/if}
{/mux_asset_field}
{/exp:channel:entries}
</body>
</html>