How to show splash page while live stream is unavailable

Wowza Streaming Engine
1

Does anyone know of a way to display a splash image/video (jpg, png, etc) when a live stream (rtmp) is unavailable or not being broadcast? My use for this, and maybe there is a better way or best practice, is to autoplay the live stream as soon as the visitor enters the page and once we start the live stream the video just starts playing without them having to click the play button. Perhaps a module could check for the stream (i.e., livevideo.sdp) and if not found serve up splashvideo.flv or whatever.

We’re using QuickTime Broadcaster, JW Player and Wowza. Currently, the JW Player just says “Stream not found” when the player autoplays and Wowza attempts to create the stream and then destroys it because it cannot find the stream.

2

If you are using JW Player then you will most likely need to modify the source code to make this happen. You can certainly key off of the stream not found event to pull a .png or .jpg file to use as the please wait image. Again, I don’t know the specifics of exactly how to integerate this directly into JW Player. You may want to search around the JW Player forums to see if there are any answers there.

Charlie

3

Is there any way to achieve this server-side? Kind of like an HTTP 404 not found that shows a custom page saying nothing is streaming.

4

You download the plugin swf, and put it in the same folder with your player.html and player.swf files on your web server. Then add Flashvar:

&plugins=plugin1,plugin2

For example:

so.addParam(‘flashvars’,‘&plugins=yousearch-1,yt&streamer=rtmp://yourip/vod&file=video.flv’);

Richad

5

I have not used this plugin, but the xml at top should go in the same location as player.swf and the plugin it is associated with.

The snip in the middle is an object and embed tag for putting Flash in HTML page.

The 3rd snip is one line from SWFObject that writes the embed and object tags using javascript (which is done to avoid an extra click to activate the Flash app which is the result of an obscure legal problem MS had some years ago.)

Many people just use the SWFObject, but if you want to be thorough you should include the embed and object tags seperately in a noscript tag, because maybe 5% or more of users have javascript turned off. But it is a pain to maintain that way because there are 3 sets of Flashvars and everything else that has to be maintained.

I tried to put it all together into a workable template, and I at least partially reconciled the 3 sets of Flashvars etc, but you have to go through this yourself and test.

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>player</title>
<script type="text/javascript" src="swfobject.js"></script>
 </head>
 <body>
<div id="player">
 <a href="http://get.adobe.com/flashplayer/">Get the Flash Player</a> 
    to see this video.
</div>
<script type="text/javascript">
var so = new SWFObject('player.swf','mpl','820px','290px','9');
so.addParam('allownetworking','all');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','&file=live.flv&streamer=streamer=rtmp://69.xx.xx.xx/live&autostart=false&checkbandwidth=true&backcolor=#666666&frontcolor=#B2650F&lightcolor=#000033');
so.useExpressInstall('expressinstall.swf');
so.write('player');
</script>
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="600" height="450" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
	<param name="flashvars" value="author=Central Park Assembly of God&amp;description=Live Broadcast&amp;file=live.flv&amp;backcolor=FFFFFF&amp;frontcolor=000000&amp;volume=100&amp;streamer=rtmp://69.xx.xx.xx/live/" />
	<param name="allowFullScreen" value="true" /><param name="src" value="/embed/player.swf" />
	<embed type="application/x-shockwave-flash" allowfullscreen="true" 
		width="600" height="450" 
		src="/embed/player.swf" 
		Flashvars="author=Central Park Assembly of God&amp;description=Live Broadcast&amp;file=live.flv&amp;plugins=googlytics-1&amp;backcolor=FFFFFF&amp;backcolor=000000&amp;frontcolor=FFFFFF&amp;lightcolor=FFFFFF&amp;logo=www.cpnc.org/blog/wp-content/themes/revolution-20/images/CPNClogo1.jpg&amp;volume=100&amp;streamer=rtmp://69.xx.xx.xx/live/">
	</embed>
</object>
</noscript>
</body>
</html>

Richard

6

Do you have a link to it?

Richard

7

My Typo. Change this:

so.addParam(‘flashvars’,’&file=live.flv&streamer=streamer=rtmp://69.46.37.66/live&autostart=false&checkbandwidth=true&backcolor=#666666&frontcolor=#B2650F&lightcolor=#000033’);

To this:

so.addParam(‘flashvars’,’&file=live.flv&streamer=rtmp://69.46.37.66/live&autostart=false’);

Also, I tried this on the Wowza live player. I got stream not found, but I fixed that by sending a stream to your server named “live” with FMLE

Richard

8

The server can provide information (notification) but the client has to display the message.

Richard

9

Richard:

This is EXACTLY what I was talking about doing in a few of my emails with you today.

I’ve been trying it all night, with no luck, maybe you can provide ‘complete’ instructions, as I really have no ideas left.

I put the files into the same directory as my jw player as instructed.

What I don’t know is how to ‘properly’ fill in this form

<plugin>
	<title>Livestream</title>
	<filename>livestream.swf</filename>
	<version>1</version>
	<compatibility>Compatible with 4.4</compatibility>
	<author>LongTail Video</author>
	<description>This plugin automatically polls an RTMP stream for availability every XX seconds. If the stream is there, it will kick in. If not, the plugin will keep retrying. It allows users to wait for a live event without having to refresh their page.</description>
	<href>http://developer.longtailvideo.com/trac/browser/plugins/livestream</href>
	<flashvars>
		<flashvar>
			<name>live</name>
			<default />
			<description>Name of the RTMP stream to check/load.</description>
		</flashvar>
		<flashvar>
			<name>http://www.annointed.net/test/richard/new/images/image01.jpg</name>
			<default></default>
			<description>Preview image associated with the livestream. It is shown when the live stream ends. It should typically say something like "thanks for watching".</description>
		</flashvar>
		<flashvar>
			<name>interval</name>
			<default>15</default>
			<description>Interval in seconds for polling the livestream.</description>
		</flashvar>
		<flashvar>
			<name>message</name>
			<default>Checking for livestream...</default>
			<description>Message to show in the display when polling the livestream.</description>
		</flashvar>
		<flashvar>
			<name>rtmp://69.xx.xx.xx/live/</name>
			<default />
			<description>RTMP server to pull the stream from (e.g. rtmp://myserver.com/live-app).</description>
		</flashvar>
		<flashvar>
			<name>tags</name>
			<default />
			<description>If you play multiple videos with one server setup, set this flashvar to filter in which videos the livestream will be polled and loaded. The livestream will only be polled when the tags of the video align with the tags you enter here.</description>
		</flashvar>
	</flashvars>
</plugin>

also, I am unsure of how to put the code into the page to display the player properly.

Here is what I am using:

		<div><P ALIGN=center><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="600" height="450" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="flashvars" value="author=Central Park Assembly of God&amp;description=Live Broadcast&amp;file=live.flv&amp;backcolor=FFFFFF&amp;frontcolor=000000&amp;volume=100&amp;streamer=rtmp://69.xx.xx.xx/live/" /><param name="allowFullScreen" value="true" /><param name="src" value="/embed/player.swf" /><embed type="application/x-shockwave-flash" allowfullscreen="true" width="600" height="450" src="/embed/player.swf" flashvars="author=Central Park Assembly of God&amp;description=Live Broadcast&amp;file=live.flv&amp;plugins=googlytics-1&amp;backcolor=FFFFFF&amp;backcolor=000000&amp;frontcolor=FFFFFF&amp;lightcolor=FFFFFF&amp;logo=www.cpnc.org/blog/wp-content/themes/revolution-20/images/CPNClogo1.jpg&amp;volume=100&amp;streamer=rtmp://69.xx.xx.xx/live/"></embed></object></P></div>
<p>The full screen feature is now available next to the volume control.</p>
<div style="clear:both;"></div>

I can’t figure out where to add

so.addParam('flashvars','&plugins=yousearch-1,yt&streamer=rtmp://yourip/vod&file=video.flv');

Would you be kind enough to ‘fix’ the code for me here so that I can try it?

Also:

I have ZERO idea what they mean by ‘tags’ in the xml file above. Never heard of adding tags to a video before.

thankyou for any help provided.

10

Is anyone able to figure out how to properly use the above plugin?

11

I used your file above, and obviously changed the ip to my wowza server

http://annointed.net/test/richard/new/jwplayer/shawnstest11.html

All the files, player files, plugin files, xml files, are in the same folder.

Can you see any reason why it’s not showing the graphic as the broadcast stream is not on right now?

Here is the plugin xml file with info filled in as best I can figure.

<plugin>
	<title>Livestream</title>
	<filename>livestream.swf</filename>
	<version>1</version>
	<compatibility>Compatible with 4.4</compatibility>
	<author>LongTail Video</author>
	<description>This plugin automatically polls an RTMP stream for availability every XX seconds. If the stream is there, it will kick in. If not, the plugin will keep retrying. It allows users to wait for a live event without having to refresh their page.</description>
	<href>http://developer.longtailvideo.com/trac/browser/plugins/livestream</href>
	<flashvars>
		<flashvar>
			<name>file</name>
			<default />
			<description>Name of the RTMP stream to check/load.</description>
		</flashvar>
		<flashvar>
			<name>image</name>
			<default>http://www.annointed.net/test/richard/new/images/image01.jpg</default>
			<description>Preview image associated with the livestream. It is shown when the live stream ends. It should typically say something like "thanks for watching".</description>
		</flashvar>
		<flashvar>
			<name>interval</name>
			<default>15</default>
			<description>Interval in seconds for polling the livestream.</description>
		</flashvar>
		<flashvar>
			<name>message</name>
			<default>Checking for livestream...</default>
			<description>Message to show in the display when polling the livestream.</description>
		</flashvar>
		<flashvar>
			<name>streamer</name>
			<default />
			<description>RTMP server to pull the stream from (e.g. rtmp://myserver.com/live-app).</description>
		</flashvar>
		<flashvar>
			<name>tags</name>
			<default />
			<description>If you play multiple videos with one server setup, set this flashvar to filter in which videos the livestream will be polled and loaded. The livestream will only be polled when the tags of the video align with the tags you enter here.</description>
		</flashvar>
	</flashvars>
</plugin>
12

http://annointed.net/test/richard/new/jwplayer/shawnstest11.html

13

My Typo. Change this:

so.addParam(‘flashvars’,‘&file=live.flv&streamer=streamer=rtmp://69.46.37.66/live&autostart=false&checkbandwidth=true&backcolor=#666666&frontcolor=#B2650F&lightcolor=#000033’);

To this:

so.addParam(‘flashvars’,‘&file=live.flv&streamer=rtmp://69.46.37.66/live&autostart=false’);

Also, I tried this on the Wowza live player. I got stream not found, but I fixed that by sending a stream to your server named “live” with FMLE

Richard

I made the change as instructed

http://annointed.net/test/richard/new/jwplayer/shawnstest11.html

The problem that I am having is it is not picking up the plugin to show the image when there is no live stream. That is kind of the entire point to this.

The reason being is we don’t always start broadcasting at exactly the same time each night. This leads people to believe there is no broadcast coming if they load the player and it says not found. This is why I wanted to get the plugin working so that if there is no live stream, they will be presented with a graphic saying it’s coming soon etc… (using just a temp image for now until I get to a computer with photoshop to make a ‘real’ graphic)

I hope this makes sense, and I’m sure there will be at least a few people who would like this ability.

thanks for helping me on this one!

14

Thanks Charlie. I’ll dig around the JW forums and see what I can find.

15

For those who are interested… I found a plugin for JW Player that will accomplish this. Links below.

http://code.longtailvideo.com/trac/browser/trunk/as3/livestream.xml

http://code.longtailvideo.com/trac/browser/plugins/livestream

16

Does anyone have instructions for how to install this plugin for the JW Player? I’ve searched their site, but was unable to find anything.