Flash Video: Free and Easy

By Andy Volk for Webmonkey

date: 9/18/2005

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 recent release of Flash 8, we're about to hear even more of it as Macromedia improves the quality of Flash Video yet again. This document covers how to embed Flash 7 Video files, since many of the free tools mentioned here are still using this version of the standard.

For years and years, embedding a video using Flash was anything but easy, and the results were usually pretty lousy. While Flash Video quality continues to improve by leaps and bounds, simply embedding a Flash Video file in a player on your website remains relatively difficult to do without buying additional software. Normally, creating and embedding Flash Video into your website requires purchasing Macromedia Flash and their Flash Video Kit. However, with a little effort, you can embed simple progressive download Flash Video content with minimal fuss and without having to purchase any expensive tools.

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.

At the minimum, you really need two things to have a Flash Video experience on your website. First, you need a Flash file (.swf) that can be embedded into your page and made to playback a video. Second, you need a piece of encoded Flash Video (.flv) that goes inside your player and gets played. This .flv video file can also be combined as part of the .swf file so the browser loads it all as one package.

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.

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.

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 sample implementation from the FLV Video Player's player.php file and modified it to only play a single Flash Video file. In this example, I'm going to play the beginning of the short film about nutria I'd like to promote. I did this by uploading the FLV Video Player file called "320x240.swf" to my web server, and then embedding the following HTML into my example page to make our Flash player appear:

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. Note that I've thrown in some javascript from the sample file to enable the popup mode of the Flash Video player.

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.

There are definitely other ways to handle the encoding and playback of your Flash Video content if you're willing to consider some of the commercial software products on the market.

For encoding Flash Video, you could purchase Sorensen Media's Squeeze program, which retails at US$119 for the full version and $49 for an upgrade. Squeeze offers higher quality encoding as well as the ability to automatically create a templated Flash Video player for your website.

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. As I mentioned at the beginning of this article, I'm assuming that you want to play Flash Video content on your website without buying any tools. If you do have a larger budget, you can stream Flash Video content (which offers a performance boost over the progressive download method I'm describing here) via Macromedia's Flash Communications Server. If you do have this server software, I recommend checking out Peldi's excellent FLVplayer. Additionally, if you have Macromedia Dreamweaver, you can use either the Macromedia Flash Video Component or a 3rd-party extension to build your own Flash Video player, which you can learn more about in this article from Macromedia. Additionally, you could purchase a templated video playback component from a company such as Proxus. For more information on advanced Flash Video solutions, see Macromedia's Flash Video articles from their Flash Developer Center.

Combined with the knowledge of how to encode and embed videos, these resources should be sufficient to make you comfortable enough with Flash Video to start messing around. This article simply scratches the surface of what is possible with Flash Video. You can implement far more sophisticated solutions as your knowledge grows and as your needs require.

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" in the video used on my example page in this article.