FLASH VIDEO HOW-TO by Chuck Fadely

FLASH VIDEO HOW-TO by Chuck Fadely

Adobe (Macromedia) Flash is the best way to put video on a web page. Nearly every computer hooked to the internet has a Flash player installed. A Flash .flv-encoded video streams itself, so you don't need a streaming server.

There are a number of different versions of Flash. Flash 8 is the current and highest quality. But many office computers have the FlashMX players, an older version, and are locked down so the user can't upgrade. If most of your traffic comes from the 9-5 weekday crowd, you should encode using FlashMX (which uses Sorenson Spark encoding). If your audience is hooked up, use Flash 8 (which uses the On2 VP6 codec)- it's better quality.

You can encode video into Flash in a number of ways. There is, of course, Flash 8 , if you've got it. You can also use Sorenson Squeeze , a great compression software that has many uses beyond flash. VP6 encoding software from the company that wrote the encoder for Flash is On2 Flix. On2.com makes stand-alone encoders and a Quicktime plug-in so you can export Flash from a Quicktime app. And if you're on Windows, there's a free encoder from Riva.

Compression settings are a whole 'nother encyclopedia. In general, though, you should compress your video using two-pass settings, at a 400kbps max data rate, at half the frame rate of the original video (15fps for normal ntsc 29.97 fps video), at 320x240 for sd video and at 400x224 for 16:9 widescreen video. Sound can be 56k at 22khz sample. This will give you a video with rather mediocre quality but will be able to play on the $24-a-month slow dsl lines. Compression settings are an art, though, and vary with content, size, and motion in your video.

Once you've encoded your video into flash, you'll need a player for it. A .flv video won't play by itself. It has to be played in a flash player. To run it in a flash player, it has to be put on a page with a chunk of html that calls the player.

VideoSpark.com has a bunch of (commercial) info about flash players.

There is a player at http://www.jeroenwijering.com as well as a tutorial on how to embed it on a page.

The html code to put Flash in a page looks something like this:

HTML embed code:

<object width="400" height="224" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"> 
<param name="salign" value="lt"> 
<param name="quality" value="high">   
<param name="scale" value="noscale"> 
<param name="wmode" value="transparent"> 
<param name="movie" value="http://chuckfadely.com/content/flv_web_vids/video.flv"> 
<param name="FlashVars" value="&streamName=FLV_Video_URL&skinName=http://chuckfadely.com/content/flv_web_vids/flvplayer&autoPlay=true&autoRewind=false">  
<embed width="400" height="224" flashvars=&streamName=FLV_Video_URL&autoPlay=false&autoRewind=true&quality="high" scale="noscale" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://chuckfadely.com/content/flv_web_vids/flvplayer.swf" wmode="transparent"> 
</embed>
</object>

This coding will play a widescreen flv video from my site named "video.flv" It uses a player named "flvplayer.swf" to play it. Cut, paste, and figure it out. (Watch out for dropped brackets and quotes. Getting html code to display on an html page is a bitch.)

And here's what that code produces:



TUTORIALS:
Here's the sermon on the mount, straight from the source: Adobe - Developer Center : Flash Video Learning Guide

Here's WebMonkey on embedding the video.

Here's University of Florida instructor Mindy McAdams' instructions: Flash and Video . (pdf)

Here's how to do it with Windows Movie Maker and Riva: Boutell.com's "WWW FAQs: How do I add video to my web site?"

Another good one is at VideoHelp.com's forums.

Here's a WordPress page with links to a lot of plugins to get the video on your WordPress blog -- but many work with other types of pages.

The Wimpy Player is a nice one. This has ways to play in both html and javascript.

For an overview of Flash video, including streaming vs progressive, see the Flash Video 101 articles on this page from Peachpit.

Good luck.