Embed Flash Video (FLV) in iWeb: Part 2

By Alex on January 5, 2009 10:04 PM | Permalink | Leave a Comment(5) | TrackBacks (0)

You thought I'd forgotten the second part of the embedding FLVs in iWeb tutorial - not so! Today we'll try to save you some time incorporating Flash Videos with iWeb. It's still not the easiest process in the world, but at least it doesn't require a web programming hat to get the job done!

This lesson will allow you to embed a really fully-featured Flash Video player -- complete with Fullscreen Mode button -- into your iWeb site relatively easily.

The first step is to download our support files for this operation: ZIP File, 112kb. Now, bear in mind that we offer these files as sort of an exercise rather than as software that we support in any formal sort of way. The files are pretty straightforward to follow -- but everything you do with them is entirely at your own risk.

Background
Part 1 of this tutorial will give you the theoretical background to understand what we're trying to do, so here I'll just briefly tell how we're going to go about it. Inside the ZIP file associated with this tutorial, you'll find a copy of FlowPlayer, and a couple of Javascript files. The Javascript files simply tell the user's web browser to snap the FlowPlayer into the webpage, and load it with the video that you specify. Really, that's it.

So when you want to use an FLV in a webpage, you're basically doing two things: putting a Flash Video somewhere, then telling the webpage that you want a FlowPlayer and you want it to look for Flash Video in a specific place.

It bears mentioning that this is a completely customizable process -- if you have a custom-branded Flash Video player, or if you want to buy the non-logo version of FlowPlayer, it's just a matter of replacing the FlowPlayer SWF with the new one (and updating the Javascript if necessary). Without further ado:

Step by Step
Initial Setup (one time):

Unzip the support files.
Open the folder where you publish your site. You'll see an "index.html" file, and a folder that has your site's name (default is "Site").
Drag the folder called "FLVSupport" into the main folder -- NOT the folder with the name of your site.

Whenever you need a Flash Video:

Use your video software to create the Flash Video media file.
Note: Need a quick and dirty way to create high-quality H.264 FLVs? Try the end of the Quicktime vs. FLV article.
Open the main publishing folder, and place the video there. You can organize your videos however you want, but don't put them inside of your site's specific folder (iWeb erases everything in that folder every time you publish). I created a folder called "FLV" in my main sites folder.
In iWeb, open up the page where you want to place the video.
From the "Web Widgets" drop-down button, select "HTML Snippet."
Resize the "HTML" box to the appropriate size for your video -- by default, 320x240. Place it wherever you want your video to appear.
Double-click on the HTML box, and copy and paste the following two lines:

<script src="../../../FLVSupport/flv.js" type="text/javascript"></script>
<script type="text/javascript">placeFlashVideo("YOUR_FLV_HERE");</script>
Change YOUR_FLV_HERE to the name of your flash video. The path is relative to your main sites folder. For example, if your video file was called "myvideo.flv" and you put it in the "FLV" folder, you'd use the line

placeFlashVideo("FLV/myvideo.flv");
Publish your site, and you're all set!

Note that your Flash player shows up as a blank box inside of iWeb until you publish your site -- this is normal. Also, Flash's security model sometimes acts funny when you try to view a Flash video on your local machine (you'll see the FlowPlayer, but no video) -- try uploading your site to the internet and viewing it through a regular URL and it should be fine.

If you want to use video of a different resolution:

Follow the instructions as above, except, in Step 5, be sure to make your HTML widget box the appropriate size for your own video.
In Step 7, add the dimensions you want to the placeFlashVideo line. For example, if you wanted a 1280 x 720 HD clip called "myvideo.flv", you would use:

placeFlashVideo("../FLV/myvideo.flv" , 1280 , 720);

Like I said, I can't promise any support in any formal sense, but if you have suggestions or input, please do feel free to email me. Hope this helps, and a very happy new year to all of you!