How HTML 5 Makes Using Audio and Video in Web Pages Easy - courtesy of Anadi Taylor

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.

Really its a nice information..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.The HTML 5 <audio> and <video> elements are a fantastic way of standardizing audio and video over the internet

according to my thinking point of view Ogg is the architecture ancestors defined in the HTML specks, because it is accessible and free. Ogg is not just an audio format, but has audio and video components. Ogg vorbis is an audio format, and ogg theorem is a video format.

Most users accept the Flash plugin installed already (actually, something like 95% of web-connected users accept some adaptation of it), but proponents of HTML 5 are blame for an accessible video accepted that doesn’t crave any plugins.

Thanks a lot for the detail overview on <audio> and <video> tags.

.This is also one of the good article from your side.
Thanks for sharing with us.

If you embed audio or video in your website, you should use HTML5.

HTML5 is the next major version of HTML, the primary standard that determines how web content interacts with browsers. HTML5 supports audio and video playback natively in the browser, without requiring a plug-in. With HTML5, you can add media to a webpage with just a line or two of code.

The HTML5 media elements provide simple fallback for browsers that still need to use plug-ins, so you can update your website to HTML5 today and still be compatible with older browsers.

When you use HTML5, you can create your own customized media controllers for rich interactivity using web-standard CSS and JavaScript.

The HTML5 <audio> and <video> tags make it simple to add media to your website. Just include the <audio> or <video> element, use the src attribute to identify the media source, and include the controls attribute.

<video src="Mymovie.mp4" controls> </video>

HTML is written in the form of HTML elements consisting of tags, enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as empty elements, are unpaired, for example <img>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments, and other types of text-based content.

I need to check with w3schools again to learn some new features about html 5. My students suggesting me to study html 5 and this shows I need to learn a lot. Thanks a lot for sharing them.

Great post :)

I hope HTML5 kills flash's video player as it's a resource hog and, often, badly implemented!

Thanks for Sharing, But tell me i want to add Email Sending Functionality and Facebook Like Button Functionality its possible in HTML5 or need to use some scrip or code.

Thanks for sharing this information with us.HTML5 provides a competing, open standard for delivery of multimedia on the Web with its native video and audio elements and APIs. This article largely discusses the <video> element, as that’s but most of the markup and scripting are applicable for both types of media.

Originally Posted by abhijeet1

W3school is the best place to learn but if you need to improvise your coding section in Html5 you need to download e-book of html5 where it been described well with examples so that we could improvise our coding part in Html5

You are right but some example is very simple in w3school, Need more complicated Example for learn Possible solution with optimum Effort any new Source.