Using Flash Media Server (FMS) Video On Demand (VOD) and Real Time Messaging Protocol (RTMP)

We can make use of the JW Flashplayer, JavaScript and SWFObject to embed video content into a webpage. The JW FLV Player supports playback of any format the Adobe Flash Player can handle. (FLV,MP4,MP3,AAC,JPG,PNG and GIF).

Access to the VOD content is done by means of the RTMP. By default TCP port 1935 on the Flash Media Server needs to be open to the client's browser for this to work.

Note** RTMPT (HTTP tunneling) has some HTTP header overhead but could be used where security measures would block RTMP. This would require a FMS configuration change.

Most of the information presented here has been gathered from www.jeroenwijering.com. Putting together the playlist proved to be the most difficult, all the information was available but there were no good examples for a playlist when using RTMP. To make matters worse the newer version of the player did not support the same type of XML elements in the playlist.

It's recommended that the Adobe flash plugin for your bowser should be version 9 or above.
Check your version of the flash plugin Adobe flash Version

The JW FLV player employs JavaScript and the swfobject to embed itself in a webpage. (included in the jw_flv_player download)
Detailed information on Embedding Flash

To download the player visit www.jeroenwijering.com

The following code shows how to embed the flashplayer into a webpage.

Get the Flash Player to see this player.

<div id="container_id">
<href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a>
To see this player </div>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
  var file = 'playlist.xml';
  var streamer = 'rtmp://fms2.uvic.ca/vod';
  var s1 = new SWFObject('player.swf', 'playlist', '400', '450', '9', "#FFFFFF" );
    s1.addParam('allowfullscreen', 'true');
    s1.addParam('allowscriptaccess', 'always');
    s1.addParam('quality', 'high');
    s1.addParam('bgcolor', '#FFFFFF');
    s1.addParam('fgcolor', '#000000');
    s1.addVariable('streamer', streamer);
    s1.addVariable('thumbsinplaylist', 'true');
    s1.addVariable('playlist', 'bottom');
    s1.addVariable('skin', 'stylish.swf');
    s1.addVariable('file', file);
    s1.addVariable('scroll', 'true');
    s1.addVariable('enablejs', 'true');
    s1.addVariable('autostart', 'fale');
    s1.addVariable('bufferlength', '10');
    s1.write('container_id');
</script>


The JW FLV player has a "skinning functionality" which allows you to change the look of the player, the above player is using the "stylish" skin. Skins and plugins can be downloaded from longtailvideo.com site.

The player supports the use of a "playlist" in the format of a XSPF xml file. The XML file, playlist.xml, contains a tracklist and information about each track. Here is an example of a playlist XML file.

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>
<track>
    <creator>whomadethis</creator>
    <image>thumb.jpg</image>
    <duration>2:03</duration>
    <annotation>Description</annotation>
    <title>Title </title>
    <location>/path/videofilename</location>
    <meta rel="type">video</meta>
</track>
</trackList>
<playlist>

  • XML declaration, version and character encoding
  • <playlist> root element, 'playlist'
  • <trackList> child element 'trackList'
  • <track> child element
  • <creator> shows who created the video, (or in the above example "by")
  • <image> filename of the thumbnail (normally jpeg or png)
  • <duration> duration of the video in seconds ( 123 shows as 2:03 )
  • <annotation> the description of the video
  • <title>the title of the track
  • <location>path and file name of video, without the file extension
  • <meta rel="type"> this element should contain video
  • </track>ending tag for child element 'track'
  • </tacklist> ending tag for child element 'trackList'
  • </playlist> ending tag for root element 'playlist'

If you do not wish to make use of the 'playlist' you can simply change the 'var file=', in the java script code, to the file name of the video you wish to present (file extension required). To remove the playlist delete the line "s1.addVariable('playlist', 'bottom');" Here is an example of a player with no playlist and has the default skin.

Get the Flash Player to see this player.



Here is an example of a player with the playlist embedded in the player. Simply use s1.addVariable('playlist', 'over');

Get the Flash Player to see this player.







Here is an example of a player using links in an HTML document to play content.

video1
video2

Get the Flash Player to see this player.