1. Download WWD FLV Player files. (includes demo files plus a sample flv file)
2. Add your FLV files by putting them in the 'videos' folder.
If your FLV files reside on a different domain than your player - a unique FLV path can be set by editing the file 'index.html'. To change the path to your FLV files enter it for the 'FLVpath' parameter in the UFO javascript line in the <head>: (currently set to 'videos/'):
flashvars:"TXTcolor=0x000000&BTNcolor=0x990000&BARcolor=0xCCCCCC&FLVpath=videos/" };
For example, if your FLV files reside in the 'videos' folder at 'adifferentdomain.com':
FLVpath=http://www.adifferentdomain.com/videos/
3. Create thumbnail images using the image editing software of your choice. Thumbnails must be no larger than 80 pixels wide by 60 pixels high. Thumbnails shoud be JPGs and saved as non-progressive. Place thumbnail images in the 'thumbs' folder.
4. Create a full-size image for the first video only. This full-size image is displayed in the video player until a video is selected to play. This image should be 420 pixels wide by 315 pixels high and saved as a non-progressive JPG. This image should use the same name as the corresponding thumbnail image. Place full-size image in the 'images' folder.
5. Edit the 'videos.xml' file using a text editor (Notepad, WordPad, TextEdit).
Add a <vidNode> tag for each FLV:
<vidNode flv="1.flv" img="1.jpg">Short description of video</vidNode>
each vidNode has 2 variables or "attributes":
- flv (name of the FLV file)
- img (name of the thumbnail image file)
Type in the video's description between the opening <vidNode> and closing </vidNode> tags. This will show up as a caption underneath the selected video.
If you'd like to add basic text formatting or a hyperlink to the description you can do so by inserting html tags. If you use html tags in the description, you must wrap the description in CDATA tags as follows:
<vidNode flv="1.flv" img="1.jpg"><![CDATA[Man falls from tree, breaks ankle. <a href='http://www.yahoo.com'><b>Read More</b></a>]]></vidNode>
6. Set color options by editing the file 'index.html'.
To change the headline text color enter a hex color value for the 'TXTcolor' parameter in the UFO javascript line in the <head> (currently set to black):
flashvars:"TXTcolor=0x000000&BTNcolor=0x000000&BARcolor=0xDDDDDD&FLVpath=videos/"
The hex color value for the parameter 'BTNcolor' sets the color for the left and right buttons that scroll throught the thumnails AND sets color for the frame indicating which video is selected.
The hex color value for the parameter 'BARcolor' sets the color for the video control bar that is directly under the video screen.
Notice the hex color number is preceded by '0x'. To set headline text color and frame color to red, it should read as follows:
flashvars:"TXTcolor=0xFF0000&BTNcolor=0xFF0000&BARcolor=0xDDDDDD&FLVpath=videos/"
7. Set overall dimensions by editing the file 'index.html'
The WWD FLV Player works best at the default dimensions of 420 pixels wide by 470 pixels hi. But you can change them by setting the width and height parameters in the UFO javascript:
movie:"wwd-flv-player.swf", width:"420", height:"470",
When changing the dimensions you should maintain the proportions of the default widht and height. Use this calculator to determine proportional dimensions for the WWD FLV Player:
calculator
8. Upload all your files to your web server
Upload should include the following:
- 'images' folder
- 'thumbs' folder
- 'videos' folder
- the html file that you've embedded the flv player in (index.html)
- ufo.js (unobtrusive flash object javascript)
- videos.xml
- wwd-flv-player.swf