Hi there,
I've got a 24 hour live web stream but I want a website to only display the stream for 12 of those hours. So at set times, I want a slate / image to appear in the player with an off air message until the next 12 hours.
I've seen other websites do this with JW Player but there appears to be no clue in their source code as to how they are making it work.
My suggestion would be to use either an on(‘error’) or on(‘setupError’) event (which ever one fires, I do not have an off-air live stream to test with at the moment) to display your off-air slate in a <div> over the player. I would also suggest setting an Javascript setInternal to check again every 30 seconds or so.
Our engineers are asking what your stream does when it is off-air. Does it return a 404 or is the manifest just empty?
Hi Todd
Thanks for replying - the stream continues with another event after ours finishes each day, so we just want the player on our website to only let our visitors see our stream if that makes sense?
2 websites I know which manage this and have an image slate appear in the player at set times daily are:
https://thecraftchannel.tv/watch-live
http://www.tjc.co.uk/watch-tjc-choice
Although as I say, I can't see anything in their source code to help work out how they do it?
If you know the exact times your stream is going to be live each day, my suggestion would be to use Javascript to write an if statement to check the time and then either call jwplayer().setup() if the stream is live, or display your offline slate if it isn’t. I found sample code for you in this Stack Overflow thread:
http://stackoverflow.com/questions/13823856/javascript-check-time-and-display-message
Your code would look something like this:
<div id='player' style="height:270px; width:480px;"></div>
<script>
var objDate = new Date();
var hours = objDate.getHours();
if(hours >= 12 && hours <= 21){
jwplayer('player').setup({
file: 'bunny.mp4',
})
}
else {
console.log('offline');
document.getElementById('player').style.backgroundImage = "url(offline.jpg)";
}
</script>