I hope to post more videos in the coming months, but to do that I had to nail down what it took to get the videos in a friendly format as well as post them to the blog. Since I will undoubtedly forget, here are the steps to add embedded Flash video to a webpage:

1. You will only have to do this step once. Download the SWFObject javascript (swfobject.js) and player.swf from here and uploaded it to the /swfplayer/ folder on the webserver .


2. Next you need to take a preview image of the movie (mov, .avi, .mp4). The preview image is the image that appears on your webpage before the user starts the video. So you will want to scroll through the movie and pick that one image in the movie that really "sums up" your movie.


3. To take the preview image, open the movie in QuickTime (window mode, not full screen mode), fast forward through the movie, and take a screenshot. (On the Mac, use Cmd-Shift-4). Save the screenshot to a .jpg with the same name as the movie. Also for the sake of consistency, if the movie is mymovie.mov, name the screenshot mymovie.jpg.


4. Before closing QuickTime, show the movie inspector (Cmd-I). For the window you'll want to save off the Normal Size of the movie. (For this example we will use a Normal Size of 360x240)


5. Convert the movie to a Flash Video (.flv) file. I converted the movie using Visual Hub on the Mac (make sure to set the Raw FLV option). Again, for consistency, make sure to name the converted movie mymovie.flv to match the screenshot and the source movie.


6. Upload both the movie mymovie.flv and the preview image mymovie.jpg to the webserver. Preferrably the same folder location.


7. Make a new blog post and then cut and paste the following into the editor:



 
Get the Flash Player



8. To clone this for other movies all you will need to do is two things. First, change all of the mymovie references in the HTML code to whatever you named the movie and preview (including mymoviecontainer). Second, change the 3rd and 4th parameter to the SWFObject() call to the Normal Size of the movie. In this example, it was 360 and 240


9. Publish the post and hopefully that is it. I did have some formatting issues with Wordpress where it was munging the code after publishing, so if that is the case just try and minimize the amount of HTML code that is on each line.

Many thanks to these websites for helping me figure out the steps:

• deconcept
• squareCircleZ