Pagetype Video Setup

Website template video setup

HTML 4.01 template video:
Outdated HTML 4.01: Support for Allwebco template pagetype video. See the video section on your template help.html for the correct info and support links. Inside your template videos folder you will see 8 .js files, 8 .htm pages, 5 .jpg images, 2 .gif images, and 8 video files.

Images and video files you will need to edit for the "page" type video can be found in the "videos" folder. The page you will want to edit to change the text for each video description, or to add more videos is in the main template folder and is named "video.htm". The HTML page for each video is located in the "videos" folder.


Video file format:
Video file types included with this video style will be: wmv and mov.


Before you start:
Check that your hosting account is setup to allow streaming video and allows for the following video "mime" types: wmv and mov. Also see streaming website video support.

Contact your hosting company or check your hosting control panel to confirm video streaming and "mime" compatibility in your account. Go to Allwebco Hosting for quality hosting that offers these features.





Setup video-1 EXAMPLE:

1. Edit the "video.htm" with the description of your video.
2. In the "videos" folder, edit the "video-1.jpg" with any .jpg image you would like.
3. Replace the "video-1.mov" and the "video-1.wmv" files with your video files.
4. OPTION: If your template includes .mp4 video links also replace these files. The sample mp4s in the template were saved as "MPEG-4 - Video Basic".
5. Edit the sizes of your videos by editing the "player-quicktime-1.js" and "player-winmedia-1.js" files.
6. In the "videos" folder, edit the "video-quicktime-1.htm" and "video-winmedia-1.htm" with your video title and details.
7. In your main template folder open the "video.htm" and test your videos.
8. Do the steps above for video #2.

How we created the template video samples:

Creating WMV movies
You can create WMV movies in Windows Movie Maker using your AVI, MPG or WMV files. When you have completed your editing, you can "export" your movies for web use. In Windows Movie Maker, choose "File" then "Save Movie File", choose "My Computer", choose file name and save location, choose "other settings" and "High quality video (small)" for a 428 x 240 video and click "next" to create the file.

Converting WMV files to MOV
There are many converters available to easily convert your WMV movies to MOV files. You may want to search at Google for converter software. For our template samples we used the Free RiverPast video cleaner with the MOV Booster Pack.


How many files for each video?
There are 2 HTML pages used for each video. One for the Windows Media video and one for the Quicktime video. There are 2 .js files for each video. There is 1 .jpg image, one .mov file and one .wmv file for each video. 7 files total for each video.


Changing the video file type
To change the file to use for the video "page" types edit the "player-quicktime-?.js" or the "player-winmedia-?.js" in the "videos" folder. Edit the "video-1.wmv" or "video-1.mov" variable near the top of these .js files. For Windows Media it's best to use a .wmv or .wma file for video, and mp3 for audio. For the Quicktime player it's best to use a .mov or .avi file for video and a .mp3 for audio. An .mpg or .mpeg video file should work for both if you do not want two file types. Place your movie or audio files in the "videos" folder.


Editing the video area sizes | Click for .js file help
The default template video size is 428 x 240 pixels. To resize the video area edit the "player-quicktime-?.js" and "player-winmedia-?.js" files in the "videos" folder. The sizes are the height and width variables at the top. They should be at a width of 428 (mov) and 428 (wmv) and height of 256 (mov) and 309 (wmv) in your original download. You can edit these numbers. Windows Media controls are 69 high and QuickTime controls are 16 high.


Graphics
The "video.htm" page includes a graphic for each video named "video-?.jpg" located in the "videos" folder.


CSS font and styles
All CSS code for the video pages can be edited in your template CSS file.


Adding another video
You can copy the existing code to add more videos. Here are the steps.

1. In the "videos" folder: Make a copy of the "video-quicktime-1.htm" and "video-winmedia-1.htm".
2. In the "videos" folder: Make a copy of the "video-quicktime-1.js" and "video-winmedia-1.js".
3. Make a copy of the "video-1.mov" and "video-1.wmv".
4. Make a copy of the "video-1.jpg".
5. Rename these file copies replacing the "1" in each name with a "5".
6. Open the "video-quicktime-5.js" and edit the "video-1.mov" to "video-5.mov".
7. Open the "video-winmedia-5.js" and edit the "video-1.wmv" to "video-5.wmv".
8. Edit the "video-quicktime-5.htm" and "video-winmedia-5.htm" in the "videos" folder to use the new "5" .js files. Find and replace "1" with "5" in one place, so the pages will show the new "5" .js files.
9. Open the "video.htm" page and search for the "START VIDEO-4" note. Copy this code group and paste it below itself. Edit the "4" in 5 places with the number "5" so the new area will link to the new "5" pages and show the new "5" image.
10. Test the "video.htm" page.

Video editing software:
You can use "Windows Movie Maker" included with most versions of Windows. Check the Microsoft Movie Maker Website for details. Movie maker can edit .avi and .mpg movies, however, this is a limited version of the software and does not include a lot of editing options.

The following software includes many more video editing options including animated captions, better transitions as well as .flv conversion for Flash video.

• Corel VideoStudio
• Adobe Premiere Elements
• Adobe Premiere Pro