HTML5 Video Setup ("Page" Type) Allwebco Templates
This support page is only for templates or addons with HTML5 "page" type video. See the sidebar links on this page for links to other video types.
See the "video step" on your template "help.html" for the correct support page link.
HTML5 "Page" type video:
For this template video style, videos are embedded directly on the template pages.
Check if you have this style:
If you have this type of video, your web site should include a folder named "videos-HTML5".
Video files:
Video file types included with this video style will be: mp4, m4v, webm, ogv and wmv. 5 total videos need to be created. See below for details on each of these video types.
Before You Start:
HTML5 video is new and you may encounter some issues. It is best to make sure your hosting account is setup with streaming video and allows for all video "mime" types: mp4, m4v, m4a, ogv, ogg, oga, webm, wmv. Also see "Tips & Troubleshooting" below on this page.
Contact your hosting company or check your hosting control panel to check on HTML5 streaming and "mime" compatibility in your account. See Allwebco Hosting for quality hosting that offers these features.
Overview: About the HTML5 Code
The videos and "video-?.js" video code files for the HTML5 "page" type video can be found in the "videos-HTML5" folder. The HTML page that is displaying the videos will be in the folder up from this folder, or in your main web template folder. Click below to view the "video-1.js" source code.
Setting up video #1 EXAMPLE:
In the "videos-HTML5" folder, replace 5 videos with your video files.
Replace "video-1.mp4" "video-1.m4v" "video-1.webm" "video-1.ogv" and "video-1.wmv".
We used the OGG Video Converter to convert all our videos (See section below).
Edit the sizes of your videos by editing the "video-1.js" at the top.
In your main template folder edit the "videos.htm" with the description of your video #1.
Open the "video.htm" and test your video. See "testing" below.
Do the steps above for video #2.
Do the steps above for the "video-HOME.js" and "video-SINGLE.js".
How we created the template video samples:
Creating movies for web use
We used Windows Movie Maker included free in Windows, and also "Sony Vegas Movie Studio Platinum Pro" for editing and outputting all our template movie samples as WMV files first, then we converted the WMV files (see details below).
You can create WMV movies in Windows Movie Maker, Sony Vegas, or any other video editing software using your AVI, MPG, MPEG or WMV files. When you have completed your editing, you can "export" your movies for web use. In Windows Movie Maker and Sony Vegas, 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. In Sony Vegas you can edit and output your movies in any custom size.
Converting movie files
There are many converters available to easily convert your movie files to the 5 types you will need. We found the OGG Video Converter to be the best choice for ease of use and number of conversions available. This should be the only software you will need.
Recommendations when editing the videos:
If possible make your movies not fade-in or fade-out so the video will display the last and first frame of the video when it is not set to "not autoplay" or when the movie is finished playing.
If you are editing your own videos you can place a .jpg image for the first and last movie frames in most editing software.
About the movie file types
5 video types are setup in the HTML5 video template/addon code. These are the 5 most popular types and will allow for the highest compatibility in popular web browsers. Here are the details:
mp4
The most popular file type for HTML5 video. Works on most mobile devices as well.
IMPORTANT NOTE ON CONVERTING: Be sure when converting to mp4 you use the "mp4 H.264" option if available.
m4v
Almost the same as mp4. Can be skipped if you want to use only 4 video types.
webm
Required to display videos in Opera and some versions of Firefox.
ogv
Required for most versions of Firefox.
wmv
The wmv option is included for all PC browsers that do not support HTML5, most notably for display in the still popular Windows XP. Mov for Mac was not included due to the fact that most Mac users upgrade their browsers when available and HTML5 support is more widespread in Mac browsers.
HTML5 video options:
Changing the video file name
To change the file to use for the HTML5 video edit the "video-?.js" in the "videos-HTML5" folder. Edit the "video-?" variable near the top of these .js files.
Editing video sizes
To resize the video area edit the "video-?.js" in the "videos-HTML5" folder. The sizes are the height and width variables at the top. The default template video size is 428 x 240 pixels. Windows Media controls are 45 high and are automatically added for the wmv files.
Turning off video file types
Edit the "video-?.js" in the "videos-HTML5" folder. Any one of the 5 file types can be turned off with a "yes" or "no" option in the "// VIDEO TYPES TO USE" section.
Overlay play button
Edit the "video-?.js" in the "videos-HTML5" folder to change the name of the image and image size to use for the "overlay play button". You can use any png or jpg image and can edit the size for this button. In the .js file, make the button sizes 2 pixels larger than the actual image size to compensate for the hover border. Do not make the button larger than the video.
NOTE: The overlay button is set to not display on iPad and iPhones.
CSS font and styles
All CSS code for the video pages, borders and background colors, 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.
In the "videos-HTML5" folder: Make a copy of the "video-1.js" name it "video-5.js".
Create 5 new videos: "video-5.mp4", "video-5.m4v", "video-5.webm", "video-5.ogv" and "video-5.wmv".
Open the "video-5.js" and edit the "video-1" to "video-5".
OPTION #1 Open the "videos.htm" page and search for the "START VIDEO-4" note. Copy this code group and paste it below itself. Edit the "4" in the following code with the number "5" so the new area will show video #5.
Test the "videos.htm" page or the page you added the video to.
HTML5 First Frame "Poster" Feature:
Problem:
On movies without autoplay, the movie shows as a blank black box on the page, or only the overlayed play button displays.
In older browsers:
In older non-HTML5 browsers like IE8, the movie may show as a black box. This is because IE8 does not support HTML5 video and the wmv fallback "object" and "embed" code is being displayed. See solution #2 below.
About the HTML5 first frame poster feature
HTML5 video does include a "poster" attribute. This feature specifies an image to be shown while the video is downloading, or until the user hits the play button. The "poster" feature was not included because it is not working properly on many devices including iPhone and iPad.
Solution #1: Optionally, the first frame of your movie can be the "poster" if your movies do not fade-in or if you can edit them to not fade-in, then the first frame of the movie will display in HTML5 compliant browsers when the movie is not playing. For more details on HTML5 video options and attributes see the HTML5 <video> tag at w3schools.
Solution #2:
The .js files include an overlay button. You can use this button to display an image layered over the video. This button can be any size smaller than the video, and can be a .jpg or png image. You can set the image file to use and the size of the image in the .js files in the "videos-HTML5" folder. See "Overlay play button" in the visual below:
Troubleshooting Section:
Problem: video not working when uploaded:
It is common for the videos to not work once uploaded in some browsers. This is because of "mime" types a hosting server allows. It is advised that you contact your hosting company to have the following "mime" types allowed on your hosting server.
CAUTION: The above text is from a file named ".htaccess". Do not edit your ".htaccess" unless you are sure what you are doing. This is a server file and should not be edited by novice users. It is advised that you contact your hosting company for help with this configuration. You can copy the above code to send to them as an example.
Tips & Troubleshooting:
Create a page with only a single video on it for testing.
Be sure any page you have added videos to includes an HTML5 doctype.
Slow Videos: You may need to contact your hosting company and have "video streaming" installed as well as configuring to allow all "mime" types as listed above. (mp4, m4v, m4a, ogv, ogg, oga, webm, wmv)
Do not use spaces in any video file or .js file names.
Hosting Tests: Try uploading the default template setup files from Allwebco Design to test your hosting. You can always contact Allwebco for a fresh download.
Choppy Video: See slow videos above and also try re-saving your videos with other settings. Be sure to convert mp4 as "mp4 H.264". There may also be issues with your converting software. Contact your conversion software vendor.
Check Your Hosting: You may need to contact your hosting company to see if they support these mime types. Optionally, you may need to switch hosting companies. See Allwebco Hosting.
Known hosting companies that may not have streaming: Lunarpages. You will want to contact them to have streaming added.
Video converting software
Windows: To convert your videos to all 5 HTML5 video types Allwebco used the OGG Video Converter. We found this software to be fast, reliable and very easy to use. Many other video converters are available if you try some searches at Google.
Mac: For converting video on Mac see Miro Video Converter. This was recommended by a user and is a free, open source converter, but has not been tested by Allwebco.
Converter software issues: One user has had problems with the "Any Video Converter" so this conversion software is not recommended.
Converter notes from template user "Brian A": Unfortunately I did not keep the "Any Video Converter" software on my machine so I cannot tell you which version I had (Maybe 3.3.4). It had to have been one of the newer versions because I downloaded it probably 4-6 weeks ago. The video converter I am using now is called "Free Make Video Converter" version 3.0.1.
Both of these are free downloadable converters. Both have their limitations, but besides compatibility, what I like about the Free Make video converter is when you choose HTML5 conversion it creates the webm, ogv, and mp4 files in one step all at once. With Any Video converter you had to do each file separately.
Video editing software
You can use "Windows Movie Maker" included with most versions of Windows. Check the Microsoft Website for details. Movie maker can edit .wmv, .avi and .mpg movies. "Sony Vegas Movie Studio Platinum Pro" is another easy to use software we recommend.
The following software includes many more video editing options including animated captions, better transitions as well as .flv conversion for Flash video and YouTube videos.
