1. Download WWD FLV Player 3.0. (includes demo files, instructions, plus one sample flv file)
2. Upload your videos: videos must be FLV or F4V format and must reside on a registered, non-secure domain.
3. Create thumbnail images using the image editing software of your choice. Thumbnails must be 100 pixels wide by 60 pixels high. Thumbnails shoud be JPGs and saved as non-progressive. Upload your thumbnail images to a registered, non-secure domain.
4. Create a full-size image which will appear in the video display area on initial load of the player. This full-size image must be saved as a non-progressive JPG. It is recommended that the dimensions of your full-size image match the dimensions of the video display area. Video display area dimensions vary depending on the dimensions you choose for the overall player. Use the Dimension Calculator below (see step 8) to determine the size of your video display area.
5. Add full-size image to the player by uploading the image to a registerd, non-secure domain. Then make sure the player can find it by adding the URL path to it in the 'videos.xml' file included in the download. Open the 'videos.xml' file using a text editor (Notepad, WordPad, TextEdit, etc). Look for the attribute 'imageLarge' in the parent <videos> node (first line of code in the XML file). Set the value for 'imageLarge' attribute equal to the URL of the full-size image. For example: imageLarge="http://woosterwebdesign.com/images/avatar.jpg"
6. Add videos to your playlist by editing the 'videos.xml' file (included in the download) using a text editor (Notepad, WordPad, TextEdit, etc).
Add a <vid> node for each video:
<vid>
<flv>path to video file</flv>
<img>path to thumbnail image file</img>
<desc>short title or description of the video</desc>
</vid>Each <vid> node has 3 child nodes:
- <flv> (path to the video file. Full, absolute path is recommended. Example: http://www.mywebsite.com/videos/myvideo.flv)
- <img> (path to the thumbnail image file. Full, absolute path is recommended. Example: http://www.mywebsite.com/images/mythumb.jpg)
- <desc> (description of the video approximately 25 words or less.)
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:
<desc><![CDATA[Man falls from tree, breaks ankle. <a href='http://www.yahoo.com'><b>Read More</b></a>]]></desc>
7. Specify interface colors and other options by editing the XML file: (These are optional adjustments that can be made if you so desire)
description text color (txtColor): default color is black (0x000000). To change the text color enter a hex color value for the 'txtColor' attribute in the root <vid> node of the XML file. For example to set the text color to white: txtColor="0xFFFFFF"
control bar button colors (btnColor): default is black (0x000000). Enter a hex color value for the 'btnColor' attribute in the root <vid> node of the XML file. For example to set the color to white: btnColor="0xFFFFFF". The color you specify for this attribute effects the play button, pause button, progress bar, volume button, and full screen button.
control bar button mouseover color (overColor): default is dark red (0x990000). Enter a hex color value for the 'overColor' attribute in the root <vid> node of the XML file. For example to set the color to white: overColor="0xFFFFFF".
control bar background color (barColor): default is light-grey (0xBBBBBB). Enter a hex color value for the 'barColor' attribute in the root <vid> node of the XML file. For example to set the color to dark-grey: barColor="0x666666".
progress bar color (progressBarColor): default is dark red (0x990000). Enter a hex color value for the 'progressBarColor' attribute in the root <vid> node of the XML file. For example to set the color to black: progressBarColor="0x000000".
left and right arrow buttons color (arrowColor): default is grey (0x999999). Enter a hex color value for the 'arrowColor' attribute in the root <vid> node of the XML file. For example to set the color to blue: arrowColor="0x003399".
arrow buttons mouseover color (arrowOver): default is dark-red (0x990000). Enter a hex color value for the 'arrowOver' attribute in the root <vid> node of the XML file. For example to set the color to blue: arrowOver="0x003399".
buffer time (bufferTime): default is 5 seconds. Enter a number for the 'bufferTime' attribute in the root <vid> node of the XML file. For example to set the buffer time to 10 seconds: bufferTime="10"
auto advance (autoAdvance): default is 'true'. This attribute should be set to either 'true' or 'false' and tells the player what to do after a video finishes playing. To set the player to stop after a video finishes playing: autoAdvance="false". To set the player to automatically play the next video in your playlist when a video finishes playing: autoAdvance="true".
8. Determine the overall dimensions. The WWD FLV Player 3.0 can be embedded on your webpage at nearly any size (don't go smaller than 316px wide by 332px high). When adjusting the overall size for your player, know that the player must maintain a certain width-to-height ratio or else it will not function properly. Use the following calculator to ensure proper width:height ratio. (See this demo for more info about choosing your player's dimensions)
9. Embed the Player in your HTML page with the code below.
First upload the AC_RunActiveContent.js file (included in download) to your server. Next you'll need to add a <script> tag in the <head> portion of your HTML document:
Next, place the following code in the <body> portion of your HTML document:
Modify only the following portions as needed:
'src', 'wwd-flv-player-3',
This line is the path to the player SWF file (note: .swf file extension must not be included). If the wwd-flv-player-3.swf file does not reside in the same directy as the HTML page include the path in the 'wwd-flv-player-3' portion. You can use absolute or relative path. For example: 'src', 'http://www.woosterwebdesign.com/flvplayer/wwd-flv-player-3','movie', 'wwd-flv-player-3',
This line is also the path to the player SWF file (note: .swf file extension must not be included). Some browsers use the 'src' parameter while others use the 'movie' parameter. So both must be included and must have the same value.'width', '532',
This line specifies the overall width dimension for the player. Modify this number to match the width you came up with using the dimensions calculator above.'height', '454',
This line specifies the overall height dimension for the player. Modify this number to match the height you came up with using the dimensions calculator above.'FlashVars', 'playlist=videos.xml',
This line is the path to your playlist XML file. If your XML file has a name other than "videos.xml" or does not reside in the same directory as the HTML page itself, just include the path and filename. For example:
'FlashVars', 'playlist=http://www.woosterwebdesign.com/flvplayer/videos.xml',<noscript>
This portion tells the browser what to show if the user has javascript disabled. Make sure the values for "src", "movie", "width", "height", and "flashvars" match what you use above.