Step 1: Download and install necessary files
Download FlowPlayer from http://www.flowplayer.org/download/index.html
For rtmp flash streaming, you'll also need to download the Influxis rtmp plugin from http://www.flowplayer.org/plugins/streaming/rtmp.html
The following files from the above downloads should be uploaded to the directory on your website where you'll be creating your FlowPlayer player page:
flowplayer-3.1.4.min.js
flowplayer-3.1.5.swf
flowplayer.controls-3.1.5.swf
flowplayer.rtmp-3.1.3.swf
(Note that when the FlowPlayer or Influxis versions change, the above files will have different embedded version numbers.)
Step 2: Create a player page for on-demand streaming
The bare minimum requirements for an on-demand player page are these:
In the head section of the page, you need a script tag pointing to the flowplayer javascript file:
<script type="text/javascript" src="flowplayer-3.1.4.min.js">
In the body of the page, you'll need an anchor or div tag representing the section of the page containing the player:
<a style="display:block;width:720px;height:420px" id="player">
Also within the body of the page, you'll need this script code to display the player:
<script>
flowplayer("player", "flowplayer-3.1.5.swf", {
clip: {
url: 'Extremists',
provider: 'rtmp'
},
plugins: {
rtmp: {
url: 'flowplayer.rtmp-3.1.3.swf',
netConnectionUrl: 'rtmp://domain.com/archive'
}
}
});
Note the two highlighted portions. These are the portions of the code where you identify the name of the clip, and the rtmp URL to your streaming. You will change these example values to match your own requirements. Files to be streamed on-demand should be uploaded to your flash_media folder (more information in the instructions email you were sent when your flash streaming service was provisioned.)
Also, remember the clip naming requirements are as follows:
If the clip is a flash (.flv) file, no file extension is necessary - hence Extremists to display the Extremists.flv clip.
If the clip is non-flash, i.e. quicktime mp4 (.mov), standard mp4 (.mp4, .m4v), or mp3 audio (.mp3), you need to include the file extension and a prefix, i.e. mp4:file.mov, mp4:file.mp4, mp4:file.m4v or mp3:file.mp3 (where file is replaced with your own filename.)
Step 3: Create a player page for live streaming
Again, In the head section of the page, you need a script tag pointing to the flowplayer javascript file:
<script type="text/javascript" src="flowplayer-3.1.4.min.js">
In the body of the page, you'll need an anchor or div tag representing the section of the page containing the player:
<a style="display:block;width:720px;height:420px" id="player">
The live player page code will be very similar to the above on-demand page, with just three key changes, highlighted below.
<script>
flowplayer("player", "flowplayer-3.1.5.swf", {
clip: {
url: 'livestream',
live: 'true',
provider: 'rtmp'
},
plugins: {
rtmp: {
url: 'flowplayer.rtmp-3.1.3.swf',
netConnectionUrl: 'rtmp://domain.com/live'
}
}
});
In the code above, we've 1) changed the clip url to 'livestream', the default stream name for live streaming, 2) added a live: 'true' parameter and 3) changed the rtmp URL to indicate our live streaming application.
