Flash Video Add-On Help Page

Sample Links:
[ 480 Video Sample ]
[ 320 Video Sample ]
[ 6 Video Menu Sample ]
[ 3 on Page Sample ]

Skin Links:
[ 480 Skins ]
[ 320 Skins ]

Application:
[ Flash Video Player ]
[ Support ]

Before You Start:
Adding video to any website is involved and not recommended for all users. You will need patience to get your videos to work properly on all computers and in all browsers. Be sure to test in multiple browsers. STREAMING: This is a Flash video streaming application, however, if you have problems after uploading, check with your hosting company and make sure you have streaming video setup with your hosting account.

Flash Video Add-on Setup:
This Flash application is intended to be added to any website or any website template.

View support and options for this add-on.

View Allwebco add-ons.

STEP #1: Copy Files | More Details
Unzip the "Video_AVAddOn.zip" file and place the "AV-FlashVideo" folder and all files and subfolders in this zip file folder in your main template or website folder. Place the 11 HTML pages in this zip file in your main template or website folder.

STEP #2: Test Player
Open the "AV-video-1.htm" in your main template or website folder. This video should be playing. If not try copying over the "AV-FlashVideo" folder in the zip file again. Click here to open the "AV-video-1.htm" for this test.

STEP #3: Prepare Your HTML Page For Video
If you are adding videos to an existing HTML page or a new copy of a template page, you must add the following 2 lines of code to the "head" section of your page. Add this code just above the </HEAD> code in your HTML document.

NOTE: You can view the source of any of the sample pages included with this add-on to see how this code is placed.

STEP #4: Add 1 Video to Your HTML Page
Copy the code below and add this to one of your template or website pages. Open the page and test the video.

STEP #5: Replace With Your Flash Video
Create a Flash video named "AV-video-1.flv" and place this video in the "AV-FlashVideo" folder. Click for help with creating or converting your video files. Open the page you added the code to in step #3 and #4 to test your video.

STEP #6: Add 2nd Video to Your HTML Page
Do steps #4 and #5 again. When adding the step #4 code use "AV-video-2" instead of "AV-video-1". Then replace "AV-video-2.flv" in the "AV-FlashVideo" folder. You can do this for the first 6 videos, after 6 you will need to make copies of the .js files to add more videos. Also see the AUTOSTART option below on this page.

STEP #7: Test Your Video Page
Be sure to test your page after each edit in Internet Explorer and also in a second browser like Firefox, Chrome or Safari.

STEP #8: Uploading | FTP Help
When uploading to your hosting area be sure to upload the entire "AV-FlashVideo" folder and all files and subdirectories in this folder other than the "extras" folder. You do not need to upload the "extras" folder or any of the AV-?????.html pages. Only upload the HTML page you added your video to. If you are using the 6 video option also upload the "AV-video-menu.htm".

OPTIONAL SETUPS:

Optionally Using the 6 Video Menu Pages: | More Details
Instead of adding single videos, you can use the 6 video setup in the AV-video-1.htm through AV-video-6.htm pages. The pages use an IFrame menu that you can add more videos to as well.

Do step #3 above to setup your HTML page.
View the source code in the AV-video-1.htm. Copy the contents between the "START VIDEO 1" and "END VIDEO 1" notes.
View the source of the HTML page you want to add your video to and paste the code into that page. You may need to experiment to find the best place to paste this code in the page.
Open and test your HTML page. You should see the video playing.
Replace the "AV-video-1.flv" with your Flash video. See step #5 on this page for video conversion help. Optionally, you can edit the .flv file name in the "AV-video-1.js" with the name of your .flv file. See "editing the video.js files" below on this page.
Replace the "video-1.jpg" image in the "AVpicts" folder inside the "AV-FlashVideo" folder.
Open and test your HTML page with your video. The 1st video page is completed.
Create a new HTML page to add the 2nd video to. Do these steps again using code from AV-video-2.htm.
You can do this for the first 6 videos, after 6 you will need to make copies of the .js files and "AV-video-?.htm" pages. Then add new links in the "AV-video-menu.htm".

The 6 Video Menu:
To add or remove videos in the 6 video menu, edit the AV-video-menu.htm. You can edit this like any normal HTML page. Edit the "videostyle.css" in the "AV-FlashVideo" folder to change fonts and colors in this page.

Optionally Using the 3 Videos Sample:

Do step #3 above to setup your HTML page.
View the source code in the AV-3-videos-SAMPLE.htm. Copy the code between the "START VIDEO 1" and "END VIDEO 3" notes.
View the source of the HTML page you want to add your video to and paste the code into that page. You may need to experiment to find the best place to paste this code in the page.
Open and test your HTML page. You should see the first video playing.
Replace "3-videos-1.flv", "3-videos-2.flv" and "3-videos-3.flv" with your Flash videos. See step #5 on this page for video conversion help. Optionally, you can edit the .flv file name in the "3-videos-1.js" through 3 with the name of your .flv files. See "editing the video.js files" below on this page.
Open and test your HTML page with your video.

OPTIONS:

Video Sizes You Can Use: | More Details
This add-on is setup only to display 4:3 videos. You can use 480 x 360 and 320 x 240 videos. You can also use 640 x 480 videos or any other 4:3 video and they will shrink to fit in the 480 x 360 window. Non-4:3 videos will not display properly and you should edit your videos to 4:3. Click here for more details on video sizes.

Changing the Video Size: | More Details
In the .js files in the "AV-FlashVideo" folder you can edit to use one of four different .swf files for your videos.

For 480 x 360 videos with a light skin edit the height and width in the .js files to 480 x 385 and use the "AVPlayer480.swf".
For 480 x 360 videos with a dark skin edit the height and width in the .js files to 480 x 385 and use the "AVPlayer480-dark.swf".
For 320 x 240 videos with a light skin edit the height and width in the .js files to 320 x 259 and use the "AVPlayer320.swf".
For 320 x 240 videos with a dark skin edit the height and width in the .js files to 320 x 259 and use the "AVPlayer320-dark.swf".

The controls at the bottom use either 25 or 19 pixels. That is why you edit the height different than the actual video.

Changing Skins: | More Details
Edit the "AV-video-1.js" in the "AV-FlashVideo" folder with your skin name. Click and view the 480 Skins or the 320 Skins. EXAMPLE: Edit the "skins/480-METAL.jpg" code inside the "AV-video-1.js" with one of the names on the skins page to use another skin.

For Dark Skins:
Edit the "video.js" file with either "AVPlayer480-dark.swf" or "AVPlayer320-dark.swf".

For Light Skins:
Edit the "video.js" file with either "AVPlayer480.swf" or "AVPlayer320.swf".

Making Your Own Skins:
You can create your own custom player skin. New skins will go in the "skins" folder inside the "AV-FlashVideo" folder. Make your skin 320 x 19 pixels for 320 videos and 482 x 27 for the 480 videos. PSD files are included in the "extras" folder to help create new skins.

Autostart and Hide/Show Time Options:
You can set the video to autostart or not play on load and you can hide the time windows in your videos by editing the yes/no options in the video.js files. Click for help with these options.

Player Border & Background Colors: | More Details
The video background color, border color and border width around the videos can be edited in the video.js files in the "AV-FlashVideo" folder.

Other Colors & Fonts: | More Details
Other colors in the 6 video menu option and 3 video option can be edited in the "videostyle.css" in the "AV-FlashVideo" folder.

Editing the video.js Files: | Video Add-on Support Page
See the AV Video add-on support page for help with editing the .js files in this application.

The PSD Files:
PSD files for the skin images can be found in the "extras" folder. PSD files are layered image files that are used when editing in Photoshop and some other graphics programs.

Video File Length Limits:
There are no set limits on the length or file size for this application. You can use any .flv file for this player.

TROUBLESHOOTING:

Wrong video or no video playing:

Did you prepare your HTML page as outlined in step #3?
Is your HTML page "calling" the correct .js file? e.g. "AV-video-1.js" or "AV-video-2.js".
Did you replace the correct .flv file in the "AV-FlashVideo" folder?
Did you edit the video .flv name in the "AV-video-?.js" file?
Does your video .flv file name match exactly to the file name in the the .js file? Remember hosting is case sensitive; "av-video-1.flv" is not the same as "AV-video-1.flv" and does not match.
Did you edit the "AV-video-??.js" file name to a new number in step #6 above when you added a second player to your HTML page? EXAMPLE: When you added the second player did you edit "AV-video-1.js" to "AV-video-2.js" when you did step #6?

Video plays slowly:

Check with your hosting company and make sure you have streaming video for Flash setup with your hosting account.
See the slow loading support page. (It actually loads quickly!)

Player not working:
If you do the steps above and the videos are not working:

Did you prepare your HTML page as outlined in step #3?
Try doing the above steps again from the start.
Be sure you have put the "AV-FlashVideo" folder and the HTML files in this zip file in the same folder as the HTML page you are adding the player to.
Have you created a valid .flv file? You may need to search at Google or Live for "Test .flv File" to check your .flv and make sure it is not the problem.
Check the Pages or Files not Updating After an Edit support page.
Check the Parts of the Template are Missing After Uploading support page.

Skin images not working:
If the AV-Video player skins are not showing up on the page here are some possible reasons.

Did you spell the skin name correctly in the "AV-video-?.js" file?
Did you use all or incorrect capital letters for the skin name in the "AV-video-?.js"? Hosting is case sensitive.
Are all folders and files uploaded to your hosting area? Did you upload the skins folder?
If you made new skins: Do not save these .jpg images as "progressive". Be sure to save them as "standard" .jpg images. Try re-saving these images using a "save as" and be sure to select "standard".
If you made new skins: Have you placed your new skins in the "skins" folder?
You have edited the wrong "AV-video-?.js" file.
Try testing this in different web browser software.

COPYRIGHT 2009 � Allwebco Design Corporation | View Allwebco User Agreement
Unauthorized use or sale of this script, images or any files included in this download is strictly prohibited by law. By purchasing this script you are authorized to use this on a single Allwebco template, website or any template from another company. You are also authorized to modify all included files for this single site use. Click here for add-on re-use details and payments.

Purchaser is authorized to use any and all files included in the download on a single website.