Publishing Flash Video

(How to Stream a File via the OIT Flash Server)

NOTE:  The instructions provided for the applications below assume that you have knowledge of basic HTML and access to an HTML editor such as Dreamweaver.  Additionally, if you are interested in creating a custom player, you will need a copy of Adobe Flash and a basic understanding of Actionscript.

Streaming Video Players

Flowplayer 

Flowplayer is an open source Flash video player.  It supports .flv files and h.264-encoded mp4, .m4v, and .f4v files.  It cannot play Windows Media files or hinted QuickTime movies.

To add the Flowplayer to a web page you will need two free downloads--the Flowplayer and the RTMP Plugin for Flowplayer

NOTE:  At times FlowPlayer files will be updated.  Once you download your source files from FlowPlayer, check the version number of the download against the version number in the code below.  It may be necessary to update the version number of the FlowPlayer and  the JavaScript in the code below.

  • Click here to download the Flowplayer.
  • Click here to download the RTMP Flowplayer plugin
  • Unzip both files
  • Open the RTMP folder and copy the file flowplayer.rtmp-3.x.x.swf to your web server, into the same folder where your HTML page is stored (change the version number as necessary to reflect the version you download).
  • Open the Flowplayer folder and copy these four files to the same folder where your HTML page is stored:
    1. flowplayer-3.x.x.min.js (change the version number as necessary to reflect the version you download)
    2. flowplayer-3.x.x.swf (change the version number as necessary to reflect the version you download)
    3. flowplayer.controls-3.x.x.swf (change the version number as necessary to reflect the version you download)
    4. flowplayer-3.x.x.min.js (change the version number as necessary to reflect the version you download)
  • Copy & paste the following code into the <head> tag of your HTML page

<script type="text/javascript" src="flowplayer-3.x.x.min.js"></script>

(change the version number above as necessary to reflect the version you download)

  • Next copy the following code into the <body> tag of your HTML file.
<a style="display:block;width:400px;height:300px" id="player"></a>
<!-- this will install flowplayer inside previous A- tag. -->
<script type="text/javascript">
flowplayer("player", "flowplayer-3.x.x.swf",{
clip: { url: 'test/sub_dir/Wildlife.flv', provider: 'rtmp', autoPlay: false },
play: {label: 'Play', fadespeed: 3000},
plugins: {
rtmp: {
url: 'flowplayer.rtmp-3.x.x.swf',
netConnectionUrl: 'rtmp://flash.oit.duke.edu/vod'
}
}
}
);
</script>
  • Adjust the width and height parameters in the first line of code above to those of your video, but ADD 24px to the HEIGHT of the player. 24px is the default size for the control bar
  • Adjust the version numbers above as necessary to reflect the versions of the files you download.
  • Next, you will need to edit the following two lines of code in order for your stream to play: 
  1.   clip: { url: 'test/sub_dir/Wildlife'....
  2. netConnectionUrl: 'rtmp://...'
  • For the line beginning "clip:", the url: is the path to your file in the DukeStream afs space.  For example,

clip: { url: 'tcs16/Wildlife55.flv', provider: 'rtmp', autoPlay: false },

references a file called Wildlife55.flv that is stored in /afs/acpub/project/media/tcs16.

If your file is an h.264-encoded mp4, .m4v, or .f4v file, you will need to preface the path with "mp4:" as in:

clip: { url: 'mp4:tcs16/Wildlife55.m4v', provider: 'rtmp', autoPlay: false },

  • The netConnectionURL: is the path to the streaming server.  This should ALWAYS read:

netConnectionUrl: 'rtmp://flash.oit.duke.edu/vod'

[note that no specific server paths should be used--only the CNAME flash.oit.duke.edu.  This is to ensure that your code works in the event we fail over from one server to another.]

  • Save your HTML file, and upload it to your website into the same folder as the files flowplayer-3.x.x.min.js, flowplayer-3.x.x.swf, flowplayer.controls-3.x.x.swf, flowplayer.rtmp-3.x.x.swf , and flowplayer-3.x.x.min.js files. 
  • Test your page in a browser.
return to top

JW FLV Media Player

The JW Media Player is a free Flash video and audio player (there is a fee, however, if you intend to use JW for commercial purposes).  The player supports playback of FLV, MP4, MP3, AAC, JPG, PNG, & GIF.  The player also supports, RTMP, HTTP, and live streaming.  

  • Click here to download the JW Media Player 
  • Unzip the file.
  • Create a new HTML file in your HTML editor
  • Save the file in the mediaplaer folder
  • Copy & paste the following code into the <head> tag in your HTML
<script type="text/javascript" src="swfobject.js"></script>
  • Next copy the following code into the <body> tag of your HTML file.
<div id="container"></div>
<script type="text/javascript">
var s1 = new SWFObject("player.swf","ply","528","316","9","#FFFFFF");
s1.addParam("allowfullscreen","true");
s1.addParam("allowscriptaccess","always");
s1.addParam("flashvars","fullscreen=true&bufferlength=2&streamer=rtmp://flash.oit.duke.edu/vod&file=test/sub_dir/Wildlife.flv");
s1.write("container");
</script>

[note in the code above that no specific server paths are used--only the CNAME flash.oit.duke.edu.  This is to ensure that your code works in the event we fail over from one server to another.]
  • ADD 20px to the heigh of the player. This is the default size for the controll bar
  • Save your file & test in a browser

Playing your VOD files with JW Media Player

  • You will need to edit one line of code in order for your stream to play.
fullscreen=true&bufferlength=2&streamer=rtmp://flash.oit.duke.edu/vod&file=test/Wildlife.flv
  • The rtmp: is the path to the streaming server
  • The file: is the path to the file on the server
  • test is the root folder -change this to your folder anem
  • Wildlife.flv this is the video file name change this to your video file name

return to top

Adobe Flash FLV Playback Component 

If you have a copy of Flash Professional, you can use the FLV component together with Flash's built in Publish command to automatically create the web page and all supporting elements needed for presenting your video online.  The component has several pre-designed skins for you to choose from.   Customizing the component is an option, but you should have a good knowledge of Flash and ActionScript.  At this time, you can only use the FLV component to play .flv format videos (not .mp4 or .m4v).

Quickstart Guide

  1. Open Flash Professional version 8 or higher.
  2. Click on Window > Components.
  3. The Components panel will open.  Drag an instance of the FLV Playback component to the stage.
  4. You may want to resize the stage as needed to accommodate your video (Click Modify > Document > Match > Contents).
  5. Click Window > Component Inspector. The Component Inspector panel will open.
  6. Click the Parameters tab.  In the Parameters tab choose Source.
  7. Tick the magnifying glass.
  8. Enter the full RTMP address of your video source.  This must include the following:
    1. Server name (this should always be "flash.oit.duke.edu")
    2. Application and instance name (this in most cases will be "vod/_definst_")
    3. Top-level afs folder--i.e, your top level folder in dukestream
    4. Any subdirectories
    5. The file name (with or without the .flv extension)

A example url would be:

rtmp://flash.oit.duke.edu/vod/_definst_/tcs16/Wildlife55.flv

If you have the wrong address or the video file is not found, Flash will display a warning.

  1. Choose a skin for your player by clicking on skin then click the magnifying glass.
  2. You can choose the player and the color.
  3. To export your player go to File > Publish Settings
  4. In the Formats tab tick Flash, then click on the folder to select the saved file destination.
  5. Click Publish. Once Published click OK.
  6. Flash will create four files:  an HTML file, two swf files, and a file called AC_RunActiveContent.js.  The HTML file is the web page containing your video.  The first swf file is the FLV Playback file.  The second swf file is the FLV Playback's skin.  AC_RunActiveContent.js is a script file required for viewing most Flash content.  You must upload these four files together to the host web server, and place them in the same folder as your html folder in order for your video to play.  It is possible to use different locations for any of these elements if needed, but you would need to change the paths in your HTML file where the elements are referenced.

return to top

Custom Flash Player 

Building a Flash Video Player allows you to create a fully customized and branded streaming player.  You will need to have a strong knowledge of ActionScript in order to build a player from the ground up.   Click here to see an example of a custom player built for Duke's Office of News and Communications.

return to top