Site   Web

August 12, 2010

How HTML 5 Makes Using Audio and Video in Web Pages Easy

video

Web pages and their design are laid out using HTML. HTML stands for Hyper Text Mark-up Language. HTML is comprised of ‘tags’ or elements that tell your browser what the different areas of your webpage are. You can use these elements to define paragraph areas, images and their
dimensions and also font sizes, colors and styles etc. There are many HTML elements and a lot of these have varying attributes like width, height, name, etc. This article will not focus on specific HTML elements; our aim is to give you a brief overview of HTML before moving on to
how it has developed into HTML 5.

HTML came to life at the end of 1990. The original HTML, developed by Sir Tim Berners-Lee, comprised of about 20 elements which were strongly influenced by SGML, Standard Generalized Mark-up Language (The only exception to this was the hyperlink tag that allows links to be placed in web pages).

As the internet became more widespread, users demanded more functionality. This meant a huge development in browser technology and also in HTML. In fact, HTML was developed to version 4.01 before evolving into XHTML which incorporates HTML 4.01 and XML (Extensible Mark-up Language).

With HTML 5 a lot more emphasis has been put on the use of ‘Cascading style sheets’. This means HTML programmers can no longer depend on using ‘tags’ like <font> to style text with color, size, and font type. This now has to be done using ‘Cascading style sheets’ or CSS. The use of CSS means, for example, the text style on a website can be updated or changed with one small change in the CSS rather than having to update or change every <font> tag on every page. In fact, the <font> and <center> tags have been completely dropped.

A lot more importance has been placed on the use of ‘JavaScript’ and other client side programming languages that run in the visitor’s browser. This style of creating website pages is now highly encouraged. This is known as DOM scripting or ‘Document Object Model’ scripting. The DOM or ‘Document Object Model’ is a representation of how your browser structures the page you are looking at. In the browser everything is seen as an object that can be manipulated in some way by a client side scripting language such as JavaScript. A simple example of this is to have a background image with a ball moving over the top of it. In the DOM these are known as layers.

HTML 5 also introduces various new elements such as <nav>, used to define navigation areas and <footer>, used to define an area at the bottom of a page that will be used as a footer. This article will focus more on the multimedia elements <audio> and <video>.

The HTML 5 <audio> and <video> elements are a fantastic way of standardizing audio and video over the internet. This has been a long time coming. With so many operating systems being used to browse the internet it can be hard to decide what format to use. If we encode a video as a Windows Media File (WMV) it will not play on a Mac unless that user downloads a certain player or plug-in. The same can be said for encoding a video as a QuickTime file. It will play on a Mac but not on a Windows operating system unless a player is downloaded. And now we have so many variations of Linux operating systems being used, choosing an audio or video format that will play on all visitors’ computers is a next to impossible task.

The <audio> and <video> elements in HTML 5 will make choosing multimedia formats a lot easier. We will probably use the OGG format for audio as it is completely open source and patent-free. This format is very similar to MP3, AAC, and VQF. We will probably use the H.264 format for video. This format has already been adopted by Adobe and so can be used in Flash based players. An example of this is YouTube.com. They can now offer HD video online because they have used the H.264 standard. What is interesting about this is that visitors using Windows, Mac, Unix and Linux can view YouTube.com videos without having to download a new player. All that is needed is the Flash plug-in, which is on most internet browsing computers. With the HTML 5 <video> tag we will no longer have to depend on Adobe Flash Media player to play H.264 video as a cross platform solution.

So, how will HTML 5 effect video streaming over the internet? It will make video streaming over the internet much easier as the <video> element takes away the need to know high level scripting languages such as JavaScript and Action Script 3, it will not be platform dependent and website publishers will be able to relax knowing their video content will be viewable to all their visitors.


For online Flash Video Streaming Solutions please visit www.iMediaLibrary.com – Our solution allows you to manage your video content, publish it to the web, add and track banner ad’s, synchronize images with your video, and charge visitors to see your content on a Pay Per View basis.

6 Responses to “How HTML 5 Makes Using Audio and Video in Web Pages Easy

    avatar The Reverb Vibe Blog says:

    Good article Anadi. I didn’t realize that certain video media files didn’t play in Windows and Mac operating environment.

    avatar Jim says:

    We now create our sites using HTML 5 and are very pleased with the improvements. Meeting W3C validation standards for HTML 5 is not too difficult and the benefits are even more than mentioned in the article. Nice article – I hope it inspires people to enthusiastically pursue HTML 5!

    avatar Siskiyou Web Design says:

    No reason why you cannot experiment with it, but I would not jump to it completely yet as it is not fully supported by all the Browsers and it will be some time before the W3C goes to a recommendation on it.

    http://bit.ly/a73ov4

    avatar BrianM says:

    What ever happened to the lawsuit against MS regarding the tag that used to be used to add any audio or video file?

    Did that ever go away? Or, has it been converted in HTML 5 to the new tags?

    avatar Paint Ball Gun says:

    Interesting. I will have to look at HTML 5 closer. I was thinking that I wish they would streamline things more. Of course it must be generally supported before really using it.

Submit a Comment

Your email address will not be published. Required fields are marked *






You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Please leave these two fields as-is:

Protected by Invisible Defender. Showed 403 to 3,858,848 bad guys.

css.php