The Flash Video Howto

Several factors came together starting in 2006 that put web video within reach of independent publishers. First, broadband became widely deployed, meaning that most people had the bandwidth to view video of fairly good quality. Second, Macromedia Flash became ubiquitous (97% of Internet users have the Flash Player installed) and introduced support for a video format, Flash Video. Finally, free or inexpensive software became available to convert video in commonly used formats into Flash video (flv) files, and to display that video in a web page.

As the success of Youtube and Google Video demonstrated, video had arrived on the web. In fact, some of you reading this may decide that Youtube or Google Video are all you need to get into video publishing. You can stop reading now and proceed to one of those sites to sign up. But there are a couple of good reasons to take a more do-it-yourself approach. First, if you are an independent video producer, you may find that having someone else's branding on your videos undercuts your message. Second, you may need to publish video at higher quality settings than what is offered by the free services.

This document explains how I used Jeroen Wijering's Flash Video Player/FLV Media Player to embed video in a web page. To follow these instructions you will need access to a web server and basic web publishing skills. There are quite a few Flash media players on the market now, including Flowplayer and XSPF Web Music Player, and this article is not a review, but the player we're using was chosen because it works well.

Converting your video to Flash (flv)

Before explaining how to display your video on a web page, a few words about acquiring video in Flash Video format. Since packages like Final Cut Pro don't export Flash Video, you need a converter. Here are some options:

Macromedia Flash 8 ($699)
Sorenson Squeeze 4 for Flash ($249)
The command line do-it-yourself approach, using FFmpeg (free!). For more information about this approach, see my FFmpeg on Mac OS X Howto.

What you can expect to see

You can get an idea of what an embedded Flash video player will look like by clicking on this link to my example page. If you like what you see there, read on to see how it's done. Since technology had advanced by the time this article was revised in 2008, we'll look at two versions of the player that use slightly different installation procedures.

Getting JW FLV Media Player

As of 2008, the latest version of the media player we're using is JW FLV Media Player 4.0. This player has some new features which make it a good choice, including:

It plays audio.
It plays H.264 video and more container formats, including .mov and .mp4
It plays XSPF playlists.
It uses a Javascript-based SWF object loader, which means that it will work better with browsers like Internet Explorer that are affected by the Eolas patent issue.

(There are instructions later in the article for using an older version of the player if you like that one better.) You can download the player from the info page linked above. It is distributed as a zip file which you will have to unpack. Once you have done so, copy all the files from the zip to a new directory on your web server. In this example, we will assume the directory is named "flash".

The info page has some information you will need on licensing terms as well: JW FLV Media Player is free for non-commercial use. If your use is commercial, you are asked to purchase an inexpensive license (20 Euros).

Configuring Media Player: the web page

Once you have the Flash object, embedding the player is a simple matter of creating a web page with the right "magic code", and making sure that the flv file is also available. A minimal web page which embeds the player looks like this:

<html>
<head>
<title>Flash Media Player</title>
</head>

<p> This is a test of the Flash Media player.
</p>

<p id='preview'>If you are seeing this text, enable Javascript.</p>

<script type='text/javascript' src='swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('player.swf','player','320','240','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=video.flv&autostart=false');
s1.write('preview');
</script>

</body>
</html>

Insert this text into a file named index.html and save it in your web directory. If you have a preexisting page to which you would like to add the Flash video player, the only part you need is the "p" element named "preview" and the block of text enclosed by "script" tags.

Of course, you will have to customize this file to reflect the Flash video that you actually want to play. At the point where the text "file=video.flv" occurs, replace "video.flv" with the actual name of your video. Also, adjust the values of width and height to the actual dimensions of your video (in the case of height, add 20 pixels for the widgets at the bottom). Be sure to save your changes before continuing, and upload the file to your server again, if necessary.

Now skip ahead to "Final steps." The next section explains the same process with an older version of the player.

Getting Flash Video Player

If you are creating a new video page in 2008, there is probably little point in using the older version of the player. On the other hand, it's your choice. And since I don't want to remove information that people who linked to this article way back in 2006 expect to see, we'll take a look at how to do it using 2006-era technology.

The old version of the player is no longer distributed by the author, but if you are really determined to use it, there are sure to be copies floating around. All you really need is the file named "flvplayer.swf," but be sure to respect the terms of the license. Since you can't buy it anymore, this means using it strictly for non-commercial use.

Once you have acquired the file, copy it to a new directory on your web server. In this example, we will assume the directory is named "flash".

Configuring Video Player: the web page

<html>
<head>
<title>Flash Video Player</title>
</head>

<p> This is a test of the Flash video player.
</p>

<object type="application/x-shockwave-flash" 
width="320" height="240" 
wmode="transparent" 
data="flvplayer.swf?file=video.flv&autoStart=false">
<param name="movie" 
value="flvplayer.swf?file=video.flv&autoStart=false"/>
<param name="wmode" value="transparent"/>
</object>

</body>
</html>

The HTML code used here will work with all modern browsers. If you also want to support older browsers like Netscape 4.7 that use the "embed" tag, there is an alternate method, but that is not explained here. The statistics I looked at show that Netscape 4.7 is now a small fraction of one percent of all browsers in use.

Of course, you will have to customize this file to reflect the Flash video that you actually want to play. At the two points where the text "file=video.flv" occurs, replace "video.flv" with the actual name of your video. Also, adjust the values of width and height to the actual dimensions of your video (in the case of height, add 20 pixels for the widgets at the bottom). Be sure to save your changes before continuing, and upload the file to your server again, if necessary.

Final steps

All that remains is to upload your Flash video to the same directory on your server where the other files have been stored (in our example, it was named "flash"). The name of your video must match exactly the name used in the web page.

Let us say that your server is located at www.example.com. If you now point your browser to

http://www.example.com/flash/

you should see the Flash video player embedded in a web page. If you click once on the player, the video should begin to play.

Autostart, borrowing bandwidth and other extensions

You can arrange for your video to begin playing immediately as soon as your web page loads. For Flash Video Player, find the two occurrences of "autoStart=false" in the object block and change "false" to "true". For FLV Media Player, change "autostart=false" to "autostart=true" where it occurs. The availability of autostart brings up some issues of web etiquette, though. Miss Manners has not yet ruled on this issue, but here are some points to consider in making up your own mind:

If a user reaches your embedded video page by clicking on a link that says something like "Click here to play video," they are expecting the video to play. They may be annoyed by the need to click on the player again to start the video.
On the other hand, you can not always control the routes people follow to reach your web pages. They may reach your page via a search engine, for example. In this case it could be disconcerting or even embarrassing if video begins to play unexpectedly, especially if it includes an audio track.

If you decide not to use autostart, it is possible to display a still frame while waiting for the user to click and start the video. To do so, simply put a JPEG image file with the same name as the video, except that it ends in ".jpg", in the same directory as the video. In our example, the image file would be named "video.jpg".

The video that is played, which was "video.flv" in the example, can also be specified by a URL, which means that the video can come from a server anywhere in the world, as long as you have the right to use it at that location. This can be a great way to save bandwidth. Keep in mind that using another person's bandwidth against their will is considered bandwidth theft. That's probably not the kind of crime you can be prosecuted for, but it is bad manners.

Comment on this article and its topic

Last modified: Mon Oct 26 10:31:23 CDT 2009