Guide to embedding Flash (.flv) clips in Rapidweaver
After trawling the RapidWeaver forums and watching the excellent SupportCasts tutorial, I thought I would share the method I finally decided on for embedding Flash (.flv) clips on my blog.
After trawling the RapidWeaver forums and watching the excellent SupportCasts tutorial, I thought I would share the method I finally decided on for embedding Flash (.flv) clips on my blog.
The JW Player is great, but it charges €39 per website for commercial sites, so I decided to use Flowplayer as it is free for both personal and commercial use.
Tools Required
FTP Application: Transmit or CyberDuck (free)
Flash (.flv) Converter: VisualHub (discontinued, but available as Opensource FilmRedux) or ffmpegX (free).
Step 1
Download the free Flowplayer version, then rearrange the files in the downloaded 'flowplayer' folder so that it just contains the following files:

Step 2
Using your FTP application copy the 'flowplayer' folder to the root level of your domain (i.e. the same level as your main index.html page).

Step 3
In Rapidweaver, open the 'Page Info' panel of the page you wish to embed the Flash video, select the 'Header' tab, and paste in the following code (replacing 'yourdomain.com' with your domain name):

Step 4
Paste the following code into a RapidWeaver html page (or any styled text page, with code selected and 'Ignore Formatting' applied), replacing 'yourdomain.com' with your domain name, and changing the 'width', 'height', and path to your uploaded .flv video (see: Steps 5 and 6):
Step 5
Convert your movie to .flv using VisualHub or ffmpegX. Open the resulting .flv clip in Quicktime, go to the 'Window' menu and select 'Show Movie Inspector', and note down the width and height, which you then enter in the code shown in Step 4.

Step 6
Using your FTP application, upload your .flv clip to the 'flowplayer' folder you created on your domain in Step 2, and change the 'url' in the code in Step 4 to the correct path (i.e. change 'yourdomain.com' to your own domain name, and the 'yourvideo.flv' part to the name of your .flv clip.
Tips
If you want to have the ability to embed .flv clips on any page just add the code in Step 3 to the header area of the main 'index.html' file of the theme you are using instead (right-click theme > 'Reveal Theme Contents in Finder').
If you want more than one .flv clip on a page, make sure the 'div id' in the code shown in Step 4 is unique for each clip (i.e. change 'player2' to 'player3' in BOTH instances for the code of the next clip)
To download YouTube clips to your Mac and save them as .flv, use MacTubes (free).
To download BBC iPlayer programs (.mov), use iPlayer Downloader.
To record ANYTHING on your Mac's desktop, including any video clips on websites, I use Screenflick ($25).
For easy uploading of your .flv clips to your server, use Dockdrop. Just set it up with your ftp details, then whenever you want to upload a .flv clip just drop it onto the Dockdrop icon in the dock. The file is automatically uploaded, and the full url put in the clipboard ready to be pasted into the 'url' section of your code (Step 4).
Tools Required
FTP Application: Transmit or CyberDuck (free)
Flash (.flv) Converter: VisualHub (discontinued, but available as Opensource FilmRedux) or ffmpegX (free).
Step 1
Download the free Flowplayer version, then rearrange the files in the downloaded 'flowplayer' folder so that it just contains the following files:

Step 2
Using your FTP application copy the 'flowplayer' folder to the root level of your domain (i.e. the same level as your main index.html page).

Step 3
In Rapidweaver, open the 'Page Info' panel of the page you wish to embed the Flash video, select the 'Header' tab, and paste in the following code (replacing 'yourdomain.com' with your domain name):
<script src="http://www.yourdomain.com/flowplayer/flowplayer-3.0.5.min.js"></script>

Step 4
Paste the following code into a RapidWeaver html page (or any styled text page, with code selected and 'Ignore Formatting' applied), replacing 'yourdomain.com' with your domain name, and changing the 'width', 'height', and path to your uploaded .flv video (see: Steps 5 and 6):
<div id="player2" style="width:500px; height:280px"></div>
<script language="JavaScript">
flowplayer("player2", "http://www.yourdomain.com/flowplayer/flowplayer-3.0.5.swf", {
clip:{
url: 'http://www.yourdomain.com/flowplayer/yourvideo.flv',
autoPlay: false,
autoBuffering: true
}
});
</script>
Step 5
Convert your movie to .flv using VisualHub or ffmpegX. Open the resulting .flv clip in Quicktime, go to the 'Window' menu and select 'Show Movie Inspector', and note down the width and height, which you then enter in the code shown in Step 4.

Step 6
Using your FTP application, upload your .flv clip to the 'flowplayer' folder you created on your domain in Step 2, and change the 'url' in the code in Step 4 to the correct path (i.e. change 'yourdomain.com' to your own domain name, and the 'yourvideo.flv' part to the name of your .flv clip.
Tips
If you want to have the ability to embed .flv clips on any page just add the code in Step 3 to the header area of the main 'index.html' file of the theme you are using instead (right-click theme > 'Reveal Theme Contents in Finder').
If you want more than one .flv clip on a page, make sure the 'div id' in the code shown in Step 4 is unique for each clip (i.e. change 'player2' to 'player3' in BOTH instances for the code of the next clip)
To download YouTube clips to your Mac and save them as .flv, use MacTubes (free).
To download BBC iPlayer programs (.mov), use iPlayer Downloader.
To record ANYTHING on your Mac's desktop, including any video clips on websites, I use Screenflick ($25).
For easy uploading of your .flv clips to your server, use Dockdrop. Just set it up with your ftp details, then whenever you want to upload a .flv clip just drop it onto the Dockdrop icon in the dock. The file is automatically uploaded, and the full url put in the clipboard ready to be pasted into the 'url' section of your code (Step 4).
