Tech Tips Main Menu

Publishing Video Clips

Making video clips available as streaming video via the Web using the Curry School's resources requires four things: (1) a JavaScript routine called "ufo.js," (2) a server-based Flash video player, (3) the video clip to be streamed saved in the Flash FLV format, and (4) a web page that ties the previous three components together. Curry's ETO makes the first two components accessible on its Flash Media Server so they can be referenced in code contained in the fourth component, the web page the target audience will view in the web browser.

Curry's ETO makes space available for faculty to publish streaming video clips related to their classes, research, or projects. Those interested in using this service should send an e-mail to edtech-support@virginia.edu to request space. In addition to a place to store the video clips, users will also need a location to publish the web pages that will link to the video clips. These web pages could be located in the "public_html" directory in one's Home Directory, on pages one maintains on the Curry web site, or in a special project location. Once you have space to store the video files and a place in which to publish your web pages, you are ready to use this Tech Tip to make your streaming video available to the general public or a selected audience.

These directions assume that you have already recorded your video and converted it to FLV format (ETO's streaming server only supports the Flash FLV file format) and that you have created your corresponding HTML web pages and have left a placeholder in the web page where you want the video to appear. If you have not yet done this, please see support pages for taking and converting video (Converting Video to Flash - under development).
1. Connect to the parsley.edschool.virginia.edu server by mapping a drive (PC) or Connecting to Server (Mac) and copy your FLV file to your designated folder in the "video" directory (the space's 'Share' name is "Media").
   
  For this Tech Tip we will use the sample folder and FLV file located on the parsley.edschool server in the "video" directory:
  video/TechTips/videopublishing.flv
   
2. Add the script code below to the HEAD part of your web page's HTML code:
 
<script type="text/javascript" src="http://clove.edschool.virginia.edu/stream/ufo.js"></script>
   
  You can also go to the above URL and save the "ufo.js" script to your own computer and then upload it to an appropriate directory in the web space you are using to publish your web pages to stream video. It doesn't matter where it resides, as long as you point to it through a "src" tag within script tags.
   
3. Add the code below to the space in your web page where you put a place holder for your video:
   
 
<p id="player1">
<a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.
</p>
<script type="text/javascript">
var FO = { movie:"http://clove.edschool.virginia.edu/stream/flvplayer_dutch.swf", width:"500",height:"375", majorversion:"7",build:"0",bgcolor:"#FFFFFF", allowfullscreen:"true",
flashvars:"file=rtmp://parsley.edschool.virginia.edu/Flash/video/&id=TechTips/videopublishing" };
UFO.create( FO, "player1");
</script>
   
 

You must include the <p> tag and its included ID value to create an instance of "player1," which is referenced in the JavaScript code further down!

Notice the reference to the "flvplayer_dutch.swf." This is the required Flash player that resides on the clove.edschool.virginia.edu server. The code above assumes you wish to reference the Flash player made available by ETO, however, you can use your own Flash Player (SWF file) or you can copy this player to your web space. If you do that, you will need to revise this section of the code to point to your installation of a Flash Player. You can adjust the width and height of the player to suit your uses. The value for "id=" contained in the "flashvars" string is the path within the "video" directory on the parsley.edschool.virginia.edu server to YOUR FLV file. Notice, however, that you do not use the ".flv" extension with the name!

We like this Flash Player version (created by Jeroen Wijering - http://www.jeroenwijering.com/) because it provides not only a play/pause button but also a scrubber bar so the viewer can move ahead and back in the video being streamed.
   
4. Once you have the code in steps 2 and 3 added to your web page, publish the page and, load it into a web browser to confirm that the video does, in fact, play properly.
   
5. View the test video and then view the page source to compare your code to the code for this working sample.
   
    ETO Tech Tips Menu [top]