How to Create HTML5 Video for Your Website


A very interesting novelty of HTML5 is the ability to view multimedia content, especially video, using only the HTML tags. If we consider that each tag is actually interpreted by the browser, and then rendered, it soon becomes clear that the new specifications concern browsers, and not the page syntax. As of today, if we look at the operation of HTML, videos are usually displayed somewhere with a special plug-in, most notably Adobe’s Flash and Apple’s QuickTime. The mechanism is as follows: when the browser encounters a tag that refers to a multimedia content (such as an iframe) is called into question via the appropriate plug-in, which is responsible for the actual display. The purpose of the new HTML5 specification is to avoid this step, instructing the browser to handle the entire process on its own.

html5 video How to Create HTML5 Video for Your Website

Broadly speaking, the idea is simple

It does however get complicated when we go into details. Each video is characterized by a certain format, and each format needs appropriate codecs to be read. If today the management of codecs is delegated to the plug-in, when we task the browser to take care to view a video, we need to direct (in person) the choice of codecs. This complicates the situation a lot, because many codec formats are proprietary and therefore are not freely accessible.

We must also remember that once you have chosen your browser, you will still need to support various codecs. The risk is that you will have to write cross-browser code and cross-codecs. You must arm yourselves with programs that allow the conversion of formats. For example, if we have an AVI format, you most likely will agree to convert it to MPEG4 before you can view using the advanced technology offered by HTML5. Another aspect to be taken into account before moving on to the HTML code is the introspection of the formats supported by your browser. This means using techniques, mainly manufactured in JavaScript, which tell you what formats (codecs and such) are supported by the user’s browser.

Introspection via JavaScript

The JavaScript code allows you to explore the multimedia support in the browser. Given the situation (the multiplicity of formats and codecs), we must prepare for the worst: You cannot perform introspection with a few lines of code, you have to take into account at least three or four functions. You must verify if the tag video is supported by the browser, and investigate the support issues of individual formats. The JavaScript code for introspection via JavaScript is freely available online of you to use.

As anticipated, we have to perform at least four controls:

  • function supports_video verification support video tags,
  • function supports_h264_baseline_video verification support formats typically used by Apple
  • function supports_ogg_theora_video verification support OGG Theora
  • function supports_webm_video verification support WebM format

Then comes the launching function test to verify the support of all technologies in the browser.

Finally, we note that the different functions return values ‌‌”" (empty string), “probably” or “maybe”, representing respectively: unsupported format, probably supported format or “maybe”.

HTML5 or HTML4 Code

Introspection via JavaScript (mentioned above but not given the code for) is used to determine whether the browser supports the new features, check before you introduce a video. If your browser does not bear any of the technologies analyzed, we have to see the movie using the techniques from HTML4. Alternatively, more simply, you can give up trying to embed the movie, which limits you into providing a video link.

If the test is successful, we can try to include the HTML5 display:

Your browser doesn’t support the video tag.

The relevant part of the HTML syntax is the simplest aspect of the matter. As already said, the more complex work is preliminary, which consists in the preparation of video formats and introspection of the browser. With regards to the conversion–there are many of this kind of software, but it is usually necessary to consult a professional program, because the free ones rarely withstand all formats.

After converting the video

After completion of the conversion operations and introspection, we should be able to view the movie using the video tag. Note the presence of both formats (MP4 and OGG), and take into account the different needs of different web browsers and / or codecs. These are not the only possible choice, because we can also specify different formats. However, it is preferable that you first try the display with these formats first.

Sonia Jackson

My name is Sonia Jackson. I represent the web-site We’ll help you to solve all problems with writing different essays and research papers in a short time; we’ll answer all your questions and give you useful advices.

You may also like...