mac os

Using HTML5 Video

HTML5 is the future of the web. There’s been a lot of posting about HTML5 video and video formats on the web recently. The new HTML5 video and audio elements are two of the most anticipated features with HTML5. HTML5 Video is a versatile solution that allows professional and amateur web developers to display their digital video albums for websites. On this tutorial, we will show you how to use HTML5 video in your website

Why to Use HTML5 Video?

The early online video has been crippled by incompatibility problems between different browsers, codec, formats, OS, etc. Since the Flash takes over, it becomes the de facto standard of the web. What we need is a third party browser plug-in to play online video, such as Adobe Flash Player, MS Silverlight, Apple Quicktime, etc. Except the third party browser plug-in which we need to keep downloading/installing in order to keep it up-to-date, many website designers find it is difficult to embed the online videos too. For example the Flash video requires the < object > and < embed > elements and other necessary parameters in order to play on different browsers properly. HTML5 video however made the third party browser unnecessary any longer, what’s more you can now use a single line of code to add html5 videos to your web pages.

How to Use HTML5 Video?

Compared to the lengthy Flash Object embedding code, the embedding code of HTML5 video is much compact. Here is a simple HTML5 Video code to use HTML5 video in your website:

A more detailed HTML5 Video usage example as follows:

To maximize the browser compatibility with HTML5 videos, we can use HTML5 videos as bellow:

Multiple video sources are accepted in HTML5 video tags, web browsers will pick the first compatible one to play from the list. Any one a browser doesn’t recognize it will simply ignore it.

A load-fail or fail-over image is also a good option for browser backwards compatibility. Here is a HTML5 video example:

Now you know the tips and tricks using html5 video on your website. Want to see a live demo before you go to use html videos on your our website. See HTML5 player homepage or this HTML 5 player embedding guide for a demo of the HTML5 video on live site