With the large number of different web browser software used on the web, compatibility and testing can be involved when adding video to any website. The latest HTML5 video code may work in only about half of all web browsers and older video code does require plugins that may not be available in the future. You can custom order an HTML5 video page (with fallback) for any website or template. Contact Allwebco Design for custom built HTML5 video orders.
Below is an HTML5 video. Copy code below, or view the source code of this page.
HTML5 Video Code:
The following code is HTML5 video. The code uses 4 video types. The fallback is the text note. Code from the "older code" section on this page can be used to replace the text note for fallback. The code below may not work in all browsers, however, it does work in most newer browser software and can include fallback for older web browsers.
Select and copy the following code and paste it into your HTML5 pages. See "notes" below!
Style #1: Basic HTML5 Video Code:
Style #2: HTML5 Video Code with a border included (example above):
HTML5 Video Setup Notes:
For the code in the above section, create or convert your video to the 4 video types, yourvideo.mp4, yourvideo.m4v, yourvideo.ogv and yourvideo.webm.
You may need to allow for these video types as "mime" types in your hosting control panel or with an "htaccess" file in your hosting account.
You will need to change the DOCTYPE at the top of your HTML pages to <!doctype html> however, be aware that this may cause problems with other scripts or code you have in your HTML pages. You may want to create new HTML5 pages just for your videos and link to these pages from a "video homepage" or index page.
Older Video Code Sections (Can be used for fallback):
Notes:
Code in the following sections has been the web standard since the 90s and still works in most browsers, however, additional plugins may need to be installed in the viewers web browser. In the future this code will be out of date.
Active X Messages: In some versions of IE you may want to add the code on this page into a .js file to stop "click to activate" messages. For help adding items to .js files click here.
Movie trailer file type and code
Typically movie websites will use .mov files for the highest viewing compatibility. Below is the code to use for a .mov file.
Select and copy the code below. Paste this into any webpage. Edit "your-filename.mov" in 2 places. Adjust the height and width in 2 places.
How this will display
The above Quicktime code will display on your page like the image below. If not, adjust the height and width in 2 places until you see the controls and video.
Notes:
The above is code used on most professional movie trailer type websites. You can use a .mpg file instead of a .mov file but the code will then be less browser compatible. The reason you edit everything in 2 places is because the "OBJECT" code is typically used by IE and the "EMBED" is used by most other browsers.
Test! Test! Test!
Always test in at least 2 browsers. Internet Explorer and either Firefox or Netscape.
Be professional and give them a choice
The code above will work in most browsers, however, you may want to give your viewers a choice. Create 2 new pages, setup one page with the code above and a .mov file. The, setup a .wmv or .mpg video on the other page using the code below. Then add links for users to choose on your video page that link to these 2 different pages. The above is "Quicktime" video, the code below is "Windows Media" code.
Windows video. Your second choice
For the code below a .wmv video file is the best choice. A .mpg would be your second choice.
Right click in the window below and "select all" then choose "copy". Paste this into any webpage. Edit "your-filename.wmv" in 2 places. Adjust the height and width in 2 places.
How this will display
The above Windows code will display on your page like the image below. If not, adjust the height and width in 2 places until you see the controls and video.
Notes:
When editing this type of code always edit the filename and height and width in 2 places.
Generally do not add both sets of code above on the same page.
It is recommended that you do not use this code on a homepage. It's best to always link to pages with the code above.
Always test in at least 2 browsers. Internet Explorer and either Firefox or Netscape.
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 and YouTube videos.
