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.
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.
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
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.
Enjoy the Article?
Subscribe to The Design Work