HTML5 Video

Website Template HTML5 Video

Video Code For Websites and Templates


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.

Before you start, you may want to view the list of video options or go to Allwebco Minisite HTML5 Video Templates or a selection of Business Web Templates With HTML5 Video.

Get the pro version, go to: "Allwebco HTML5 Video Popup Addon".

Example HTML5 Video:

Below is an HTML5 video. Copy code below, or view the source code of this page.

Sample HTML5 Video


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.
  • Mp4 is the most browser compatible video. See also "About the movie file types".
  • When converting the mp4 file be sure to convert as H.264 (*mp4).
  • 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.
  • Your webpages should be HTML5 code.
  • You may need to change the DOCTYPE at the top of your HTML web pages to to HTML5: <!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.
  • For more details on this video type, conversion software, and more see the HTML5 template video support page.
  • For a full description of all HTML5 video options see HTML5 video Tag at W3schools.com or HTML5 video at Wikipedia.



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.

QT 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.

Win Video




Notes:
  1. When editing this type of code always edit the filename and height and width in 2 places.
  2. Generally do not add both sets of code above on the same page.
  3. 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.
  4. 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.

Corel VideoStudiohtml5 video code
HTML5 video
Corel VideoStudio Pro X2html5 video code
Adobe Premiere Elementshtml5 video code
HTML5 video
Adobe Premiere Elementshtml5 video code
Adobe Premiere Prohtml5 video editing
HTML5 video
Adobe Premiere Pro CS4html5 video code



Related Topics:
Using the Gallery to Display Other File Types
Setup YouTube Videos


Related Websites:
Quicktime logo usage


html5 video website code


html5 video code for websites


Music For Video
Royalty free music for video projects.
square-peach.com
HTML 5 Video
HTML5 Video Templates
HTML5 video websites with fallback.
AllwebcoDesign.com
HTML5 Movies
HTML5 Business Web Templates
Drop menus and HTML5 video.
AllwebcoDesign.com
Web Template With HTML5 Video
CSS and HTML5
What is HTML5 in website templates.
AllwebcoDesign.com


See Also...
Video IFrames (1)
Video IFrames (2)
Video "Page" Type
HTML5 Video
HTML5 Pop Video
Video Message
Video Popups
Video Not Working

Video Options
Streaming Video
Website Video
Gallery Video
YouTube Video




Square Peach Video and Website Music


HTML5 Video


html5 video code
HTML5 Audio And Video