Coloque isso na sua seção <head>
de onde você está hospedando seu player:
<script type="text/javascript" src="http://cdn.clappr.io/latest/clappr.min.js"></script>
Emseguida,coloqueissonoseu<body>
<divid="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>
Este é o meu roteiro pessoal para o meu fluxo que um amigo fez para mim. Isso usa o reprodutor Clappr e alternará automaticamente entre a imagem que você digita e o início do fluxo e vice-versa. Aproveite.