This is a message.

Multiple RTMP players

Learn how to stream multiple players on the same page

standalone demo

In this demo we show how to stream using RTMP from MaxCDN. We have two players showing the same video here. Notice again that you can seek anywhere on the timeline even though the video has not been loaded yet.

Content Delivery Network is used to provide fast download speeds and high availability. The video file is served from the server that is closest to you in the network. 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 in the video timeline, also to areas that have not been loaded (buffered) to the player. Servers that support this technology includes Adobe Flash Media Server, Wowza Media Server and Red5 - Open Source Flash Server. 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 good. H.264 is a video codec that offers good quality with smaller bitrates compared to some other formats.

HTML

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 in this demo.

<!-- the first player. video is specified in href attribute -->
<a class="rtmp" href="mp4:bbb-800"
style="background-image:url(/media/img/demos/bunny.jpg)">
<img src="/media/img/player/btn/play_text_large.png" />
</a>
 
<!-- the second player. uses the same video here but could be different -->
<a class="rtmp" href="mp4:bbb-800"
style="background-image:url(/media/img/demos/bunny2.jpg)">
<img src="/media/img/player/btn/play_text_large.png" />
</a>

HTML

Javascript

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

$f("a.rtmp", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.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.2.13.swf",
 
/
netConnectionUrl defines where the streams are found
this is what we have in our HDDN account
/
netConnectionUrl: 'rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st'
}
}
 
});

JavaScript