Search code examples
javascriptvideo-streamingmp4jwplayerrtmp

JW Player - loop MP4 standby video when other media (RTMP) is disconnected


I have JW Player embedded on our website. The plan is to stream video only at certain times of day, with a standby video used when the stream is not connected.

At present the below code works very well if the RTMP is connected, however it stalls o the RTMP media source if the RTMP stream is not live.

Current code (can be seen i action at http://www.powerballlive.com/powerball/streamtest.html);

<script type="text/javascript" src="http://www.powerballlive.com/powerball/jwplayer/jwplayer.js"></script>
<script>jwplayer.key="Iz4ZkMD0vBmE3ao9rJMrEK2hb2o00wjqUBMnvA==";</script>

<title>PowerBall Live: Test</title></head>

<body>

<div id="myElement">Loading the player...</div>
<script type="text/javascript">
var playerInstance = jwplayer("myElement");
playerInstance.setup({
playlist: [{
  file: "http://www.powerballlive.com/powerball/jwplayer/standby.mp4"
},
{
  file: "rtmp://cp310032.live.edgefcs.net/live/4ccc983a@390564"
}],
primary: "flash",
height: 360,
width: 480,
autostart: 'true',
repeat: "always"
});
</script>


</body></html>

I'm looking for a solution where the MP4 will loop until the RTMP is connected, then resume looping when it's offline.

Any support is greatly appreciated, thanks in advance!


Solution

  • var IsPlaying = jwplayer('myElement').getState();
    setInterval(function(){
      if (IsPlaying != 'PLAYING') {
        $('#myElement').hide();
        $('#standbyPlayer').show();
      }
      else {
        $('#myElement').show();
        $('#standbyPlayer').hide();
      }
    }, 1000);
    

    That will poll your jwplayer every 1000ms and show the standby player if the main player is not playing. Do you know how to use jQuery to manipulate DOM elements? I can post more info if necessary. Thanks.