Fügen Sie dies in Ihren <head>
Bereich ein, wo Sie Ihren Spieler hosten:
<script type="text/javascript" src="http://cdn.clappr.io/latest/clappr.min.js"></script>
Dann legen Sie dies in Ihre <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(, 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>
Dies ist mein persönliches Skript für meinen Stream, den ein Freund für mich erstellt hat. Dieser verwendet den Clappr-Player und wechselt automatisch zwischen dem eingegebenen Bild und dem Beginn des Streams und umgekehrt. Genießen.