Put this in your <head> section of where you are hosting your player:
<script type="text/javascript" src="http://cdn.clappr.io/latest/clappr.min.js"></script>
Then put this in your <body>
<div id="player" style="float: left; width: 75%; height: 85vh;">
<script>
var targetPlayerElement = "#player"; //player element that it spawns on
var offlineImage = "INSERT IMG URL HERE"; //offline image
var streamURL = "http://YOUR IP HERE/live/";
checkLive();
var isLive = false;
function checkLive() {
var player;
console.log("Checking stream status...");
$.ajax({
url: streamURL, //stream url
success: function(data){
if(!isLive)
{
$(targetPlayerElement).empty();
isLive = true;
player = new Clappr.Player({source: streamURL, parentId: targetPlayerElement, autoPlay: "true", width: "100%", height: "100%", maxBufferLength: 3, mediacontrol: {seekbar: "#7a17ff", buttons: "#ff1a68"}, actualLiveTime: true, playbackNotSupportedMessage: 'Please try on a different browser', useHardwareVideoDecoder: false,});
console.log("Stream is running; creating player");
}
},
error: function(data){
if(isLive)
{
isLive = false;
$(targetPlayerElement).empty();
$(targetPlayerElement).html("<img src='"+ offlineImage + "'alt='offline' width='100%' height='100%'/>");
}
if(!isLive)
$(targetPlayerElement).html("<img src='"+ offlineImage + "'alt='offline' width='100%' height='100%'/>");
},
})
setTimeout(checkLive, 5000);
}
</script>
</div>
This is my personal script for my stream a friend made for me. This uses the Clappr player and will automatically switch between the image you enter and the start of the stream and vice versa. Enjoy.
