Multiple players with RTMP streaming Streaming plugins - Demo 4 / 4

Example

This example has two player instances and they are both configured to play video from RTMP servers that are hosted on a Simple CDN content delivery network. In this demo we are using the same video clip but on real life they would be different. Notice again that you can seek anywhere on the timeline even thought the video has not been loaded yet.

Tehcnologies in use

Content Delivery Network is used to provide fast download speed or "high availability". Video file is served from the closest server to you. No matter where you are located globally (US, Europe, Asia) the file is loaded from a nearby server thus making it load faster.

RTMP streaming is a technology that allows you to seek anywhere on the video timeline althought the video has not been fully loaded yet. This needs some configuration work on the server side. Servers that support this technology includes Adobe Flash Media Interactive Server 3.5, Wowza Media Server and Red5 - Open Source Flash Server. Luckily Simple CDN provides pseudostreaming support without any configuration and you can see an example configuration here. Also take a look at RTMP plugin documentation for more information about this technology.

h.264 encoding for movie files. As you can see the video quality is simply amazing. This is achieved by encoding the video file to h.264 format. Flash versions 9.0.115 and newer support this format.

HTML coding

We have two player containers with a background image and a nested splash image (play button). You can find more information about this kind of splash image setup from this demo. A really important thing to realize here is that you can use any kind of setups that you can find on these demos and make them use RTMP streaming.

<!-- first player. video is specified in href- attribute -->
<a class="rtmp" href="mp4:sfexamples/videos/bbb_640x360_h264.mp4"
	style="background-image:url(/img/demos/bunny.jpg)">
	<img src="/img/player/btn/play_text_large.png" />
</a>

<!-- second player. uses same video but can be different -->
<a class="rtmp" href="mp4:sfexamples/videos/bbb_640x360_h264.mp4"
	style="background-image:url(/img/demos/bunny2.jpg)">
	<img src="/img/player/btn/play_text_large.png" />
</a>

JavaScript setup

This Flowplayer code configures RTMP streaming for both of those players. Of course you could have had as many players on the page you like and this same call would have handled them well. The video being played is given on each containers href attribute.

// install both players with this one call
$f("a.rtmp", "/swf/flowplayer-3.1.5.swf", { 
		
	// configure both players to use rtmp plugin 
	clip: { 
		provider: 'rtmp'
	}, 
	
	// here is our rtpm plugin configuration 
	plugins: {  
	  rtmp: {  
		  
		   // use latest RTMP plugin release
			url: 'flowplayer.rtmp-3.1.3.swf',			
			
			/*
				netConnectionUrl defines where the streams are found
				this URL is specific to SimpleCDN. 
			*/
			netConnectionUrl: 'rtmpt://e1f1.simplecdn.net/play'  
	  } 
	}     
});