Play HTML5 Videos

Not until the early 2000s after the network bandwidth enhancements and media technology advancements, HTML web videos became reality. In 2002 Macromedia introduced the Flash Video with FLV as format, VP6 as its codec. In 2005, the launch of YouTube made Flash Video the de facto standard of the web video. Since then HTML web page plays online videos through the browser plug-in Flash Player.

Now we have HTML5 play videos on the web. It is a new web standard not only for online videos but for the whole web. In this article we will talk about how to play HTML5 video on your websites easily.

How does the HTML5 Play Videos?

Different from earlier versions of HTML, HTML5 plays videos through the < video > tag other than any browser plugin. We do not need a web browser plug-in such as Adobe Flash Player to play HTML5 video any more. Native HTML5 video plays directly on the new browsers.

The video formats that you can currently embed into the HTML5 < video > element are MP4, WebM, and Ogg.

Compared to the lengthy Flash Object embedding code, the embedding of HTML5 video is much compact. Here is a simple HTML5 Video code as an example:

You can also add some parameters for better display of your HTML5 video, for example we can add video player dimensions and controls as bellow:

Let your HTML5 Video Play in a Smarter Way

html5 play vidoes on different browsers

Since none of the three HTML5 video formats are universally supported by all browsers. For example, IE 9 supports MP4, not the other two video formats. Opera 10.6 supports WebM and Ogg, not MP4. To embed HMTL5 video, you have to include multiple HTML5 native videos and formats for greater cross browser compatibility. You can use a sample HTML5 video code with multiple video sources as bellow:

HTML5 video plays in a smarter way. Multiple video sources are accepted in HTML5 video tags, your 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. It is cute, isn’t it?

Now you know the basics of html5 video play and how to make html5 play videos in a smarter way to maximize the browser compatibility so your HTML5 video plays on almost all browsers and devices.