Flash Video: Free and Easy
By Andy Volk for Webmonkey
blurb: Embedded video in Flash used to be cumbersome, expensive, and crunchy-looking. These days, it's fast, free, and quite comely. Andy demonstrates.
coll/subcoll: Multimedia/Flash terms: Flash, Flash Video, Flash 8, Macromedia, Andy Volk, embed code, HTML embed, object, .swf, .flv, encoder, encode, transcode, convert
There has been a lot of buzz recently on the use of Flash Video in websites, and with the
For years and years, embedding a video
If you're interested in the differences between Flash Video and other online video presentation formats, see my article on Video Compression Codecs right here on Webmonkey.
Luckily, there are simple freeware and shareware tools available that will both encode your video into Flash Video format and create the Flash player. We'll be looking at those tools, demonstrating the best way to use them, and listing some helpful tips on the pages that follow.Encoding your Content
Let's say that you've made a thoroughly fascinating documentary about nutria, the semi-aquatic rodents that are sweeping across America's marshes, and you want to share a small piece of your movie on your website.
First, you need to encode your video from a video source or "transcode" an existing video file from a different video format into Flash Video. This is also called video conversion, and, for the sake of this task, all of these terms can be used interchangeably.
The encoder application we'll be using is the Riva FLV Encoder, a freeware application for Windows which converts video files into FLV files. Riva FLV is easy to use, and it supports a fairly wide variety of codecs to transcode from.
After installing the Riva FLV Encoder, go to the Input section and use the "Browse" button to choose the file you want to convert. Once your source file is chosen, pick the settings you want to encode with.
It's probably kosher to assume that most of your users have a broadband connection. Even if some users are viewing your video on a dial-up connection, it's up to you to decide which audience you want to cater to. Do you make the video extra small for everyone? Do you optimize the video for DSL and cable internet folks, and let the dial-up users wait (since they're used to waiting for everything to load anyway)? Audiences vary based on the type of content, so use your best judgement.
For distributing video over broadband, the resolution of 320x240 is a fairly standard one to go with. Remember to adjust the target file's aspect ratio to correspond with the aspect ratio of your source video file. The application won't automatically do this for you.
If you want to tweak the output quality of your content, you can adjust the Video and Audio Bitrate, Samplerate, and Channels settings as desired, as long as you keep in mind the audience that you want to reach.
Once your settings are done, ensure the Output directory is where you want your FLV file to end up, then click the "Encode" button. The program will sit silently for up to several minutes depending on your computer's speed — don't panic and kill the application thinking that it's frozen. After chugging away, the application should finally display an "Encoding successful!" message in the "Result" box.
Now that you've encoded the file, you'll want to take a look at it and ensure that the result is what you expected. Double-click on the .flv file in your directory and it should play in the built-in Riva FLV Player. Everything look good? If so, congrats — you're halfway done! If not, you can go back to the Encoder application, adjust the encoder settings, and keep re-encoding until you're happy with the file.Embed that player
Once you've encoded your .flv file, you're ready to upload it to your website and wrap it in a Flash player so your users can see the content.
I've found a simple freeware Flash Video player that works well for 320x240 video content. This flash component is the aptly named FLV Video Player, and it runs on any web server that has PHP enabled. Since the downloadable archive includes the source .fla file for the player, you can edit and enhance it as you see fit. In this example, we'll use the pre-compiled .swf file which is included in the download.
I took the
HTML embed code:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab #version=7,0,0,0" width="320" height="240" id="320x240" align="middle"> <PARAM NAME=allowFlashAutoInstall VALUE=true> <param name=Flashvars value="url=Nutria.flv"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="320x240.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <embed src="320x240.swf" swLiveConnect="true" Flashvars="url=Nutria.flv" quality="high" bgcolor="#ffffff" width="320" height="240" name="320x240" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>
Check out the example page on my site to see the results.
Besides referring to the name of the .swf ("320x240.swf") that will play the .flv video file, there are also two references to the name of the .flv video file I'll be playing ("Nutria.flv"). Be sure to update the two .flv filename references included in the embed code with the name of your own .flv video file.Commercial alternatives
There are definitely other ways to handle the encoding and playback of your Flash
For encoding Flash
Of course, one of the wonderful things about Flash is that you can fully customize the presentation of your content. Let's look at a few ways to enhance your playback experience.
If you are happy with the Riva encoder and want to use a more sophisticated Flash Video player in your website, you can create your own Flash Video player application in Macromedia Flash.
Combined with the knowledge of how to encode and embed videos, these resources should be sufficient to make you comfortable enough with Flash
Go forth and get your hands dirty — it's the best way to learn something.
Thanks to Ted Gesing for his permission to use the opening footage of his excellent documentary, "Nutria"