Creating, serving and embedding Flash audio and video

Williams is currently using a Flash Streaming server to serve on- and off-campus video and audio files. While the existing QuickTime servers are still running, all new media should be Flash.

These pages contain the documentation for creating and using Flash audio and video. For the older documentation for QuickTime, click here

Creating

Coming soon.

Serving

The Flash streaming server is running at flv.williams.edu. Files can be placed into the streaming root by using a Windows share located at
flash.williams.edu (smb://flash.williams.edu from a Mac). Access to the server is by request: Please contact Jonathan Leamon (x4468) if you need access.

Embedding

Once you have the video created, you still need two things to make it play: 1) The Flash player, available for free from Adobe's web site; and 2) A viewer, which is an applet that runs in the Flash player that knows how to display the video. Every user has to download and install the Flash player themselves (although its already installed on the overwhelming majority of computers), but you have to provide the viewer and embed it in the web page. There's an easy way and a hard way to provide the viewer and embed it and the video in a web page:

The Easy Way

Use the pre-packaged viewer! In order to use the standard viewer, all you need to do is add the following lines of JavaScript to your web page:

1. In the header, add:

   <script src="http://flash.williams.edu/clients/standard/flash.js" type="text/javascript"></script>

2. At the point in the page where you want to add the video, add the following code (note that there's an event-driven alternative below):

   <div id='flvp'></div>
   <script type="text/javascript">
   	var theWidth=648;
   	var theHeight=480;
   	var theSkin="Corona"; //Clear, Halo, or Corona. For Halo, add width+22 and height+51
   	var theStream="path/name";
   	var theBufferTime=5;
   	var theAutoPlay="true";
   	thePlayer();
   </script>
   <noscript>
   	This page requires that JavaScript be enabled.  
   </noscript>
   

3. Customize the variables to fit your video. Note that theStream should contain the path and name of your file, without the file extension (eg, "file.flv" would simply be "file"). TheSkin should take the name of one of the three available skins. Note too, that the theWidth and theHeight can be set to the size that you want the video to be on the page not necessarily the size that the video really is. Since the Halo skin sticks out around the video, if you want the video to appear full-size you'll need to increase the width and height settings to accommodate the skin (width+22 and height+51).
4. And that's it!

Event-driven pages

Still using the easy-way, pre-configured viewer, it's also possible to have a page that loads the player with a static jpeg as a preview option, and waits for the user to select the video (from a list, for example). To do this:

1. In the header, just as before, add:

   <script src="http://flash.williams.edu/clients/standard/flash.js" type="text/javascript"></script>

2. But then, use the following modified code where you want the viewer to appear:

   <script type="text/javascript">
   	var theWidth=648;
   	var theHeight=480;
   	var theSkin="Clear"; //Clear, Halo, or Corona. For Halo, add width+22 and height+51
   	var theStream="";    //Leave blank
   	var theBufferTime=5;
   	var theAutoPlay="true";
   	var thePreview="picture.jpg";
   	thePlayer();
   	function playNow(theS){
   		theStream=theS
   		theAutoPlay="true";
   		thePlayer();
   	}
   </script>
   <noscript>
   	This page requires that JavaScript be enabled.  
   </noscript>
   

3. Finally, where you want your list to appear use something like this:

   <A href='#' onclick="playNow( 'path/name')">Link Text</A>
   

The Not-So-Easy Way

You can also come up with your own viewer served from your own site, and embed it by hand - even if you're playing video served from the College's Flash server. The server URI is: rtmp://flv.williams.edu/media/_definst_ . There are a bunch of different ways of coming up with your own viewer, but DreamWeaver provides a tool that makes this the Not-So-Hard-Way-Either: Using Dreamweaver, go to the INSERT menu and select FLASH VIDEO and a wizard will open to help.

Padding with keywords to improve local search results standings: streaming flash video streaming flash video streaming flash video streaming flash video streaming flash video streaming flash video