This is a message.

Load videos from SMIL with Flowplayer

This plugin will first request a SMIL file from the CDN and then the player is redirected to an appropriate edge server depending on the location from where the user is.

The above video is loaded from the Highwinds CDN that uses SMIL files in serving the videos.

The Smil plugin is used to parse SMIL files so that the referenced media files referenced can be played back in Flowplayer. SMIL files are used by some CDN networks, for example by Highwinds, as an additional layer to provide load balancing. This plugin will first request a SMIL file from the CDN and then the player is redirected to an appropriate edge server depending on the location from where the user is. The SMIL file contains the location information for the media file residing in one of the edge servers the CDN has.

How does this work?

Here is an example SMIL file used by the Highwinds CDN network:

<smil>
<head>
<meta base="rtmp://69.16.184.155/n9f8m6x7/definst"/>
</head>
<body>
<video
src="fms/donotchange3?doppl=164314e15f9563d3&dopsig=9bfcdaefc371a52fe049bf87c03b7776"/>
</body>
</smil>

SMIL

The base attribute contains the net connection URL used to connect to the streaming server running in the edge that was selected for delivery. The video element contains the stream name. The SMIL plugin takes these two values and combines them to create the complete URL for the stream. Since we are working with RTMP here we also need the RTMP plugin in our configuration.

HTML Setup

We use an anchor tag as the player container. The video URL is specified in the href attribute. Notice that this is a .smil file.

<a id="splayer" href="/demos/standalone/plugins/streaming/smil.xml"
style="display:block;width:660px;height:350px;">
 
</a>

HTML

Flowplayer configuration

Here is a configuration for this demo:

flowplayer("splayer", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
 
plugins: {
 
// our CDN uses SMIL playlists ..
smil: { url: "flowplayer.smil-3.2.9.swf" },
 
// .. and RTMP streaming
rtmp: { url: "flowplayer.rtmp-3.2.13.swf" },
 
// the "tube" skin
controls: { url: "flowplayer.controls-tube-3.2.16.swf"}
},
 
// make our clip use those plugins
clip: {
provider: 'rtmp'
}
 
});

JavaScript

Bitrate Hints From Smil

standalone demo

Download

flowplayer.smil-3.2.9.swf

just the working flash file to get you going

flowplayer.smil-3.2.9.zip

working flash file (swf) + README.txt and LICENSE.txt

flowplayer.smil-3.2.9-src.zip

source code

Please right-click and choose "Save link as..." (or similar)

Note: For XSS security reasons Flash plugins must be located at and loaded from the same domain as the core player flowplayer-3.2.18.swf.

This is a Flash plugin, and its features are therefore not available on iOS. For iOS please consult the ipad plugin.

See the version history for this tool.

Found a bug?

If you encounter problems with this script, please turn to the Flowplayer Flash plugin forum with a link to a minimal sample page (no extra html, css, javascript) demonstrating the issue.