HTML5 Series: 5 - Multimedia (Audio and Video)

A major advantage of HTML5 is the support for multimedia. With HTML5, we don't need to install any external plugin to play audio or video.

Audio:

- No plugin required (Even with plugin, not all browser support same plugin)

- Audio formats: Ogg, Mp3, Wav

Example:

<audio id='audio-clip' controls="controls">

<source src="music.ogv" type="audio/ogg" />

<source src="song.mp3" type="audio/mp3" />

Your browser does not support the audio element.

</audio>

More than one source can be provided so that if browser doesn't support first format then it can play the other audio format. If all are not supported then it will display the not supported message.

Attributes: autoplay (play start as soon as page loads), controls (play control tool bar), loop (repeat play), preload (load along with page load), src (source of audio)

Media Events (Audio+Video): abort, canplay, ended, error, loadeddata, loadstart, pause, play, progress, ratechange, seeked, seeking, suspend, volumechange, waiting

Audio elements can be access in java script:

<script type="text/javascript">

function MuteUnMuteAudio() {

var audioClip = document.getElementById('audio-clip');

audioClip.muted = audioClip.muted ? false : true; //To mute the audio

}

script>

Video:

- No plugin required

- Video Formats

Ogg : Ogg files with Theora video codec and Vorbis audio codec

MPEG4 : MPEG 4 files with H.264 video codec and AAC audio codec

WebM : WebM files with VP8 video codec and Vorbis audio codec

Example:

<video width="300" autoplay loop height="200" controls="controls">

<source src="afunnyCats.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

<source src="chrome.ogv" type="video/ogg" />

Your browser does not support the <video> element.

</video>

Attributes: audio, autoplay, controls, loop, poster (Image for video), preload, src

Video Support: Firefox 3.5+, Opera 10.5+,Chrome 6.0+, IE 9+, Safari 3.0+, IPhone 1.0+, Android 2.0+

Video codec support in browsers:

In next post i will discuss some more interesting features of HTML5 such as canvas, svg, file api, web storage, geo-location, web worker. Thanks.

HTML5 Series 4 - Enhancements in Form elements

HTML5 also provides improved markup for applications: <datalist>, <progress>, <meter>, <details>, <summary>. We also have more descriptive link relations in HTML5. Link relation indicates the relationship between current page and the target page or some other section in the same page. Let's take a look at the code:

New input types in HTML5 for form:

datetime	year, month, day, hour, minute, second, fractions of a second. Encoded- ISO 8601. time zone-UTC.
datetime-local	Same but with no time zone.
date	date (year, month, day)
month	date consisting of a year and a month
week	date consisting of a year and a week number

time	time (hour, minute, seconds, fractional seconds)
number	only numerical value. The step attribute specifies the precision, defaulting to 1
range	contain a value from a range of numbers
email	accepts only email value. Format - email@example.com
url	Should contain a URL address. Format- http://www.example.com or http://example.com

This a new <output> element.

HTML5 also defines new attributes such as placeholder (Default water mark text in any input field), autofocus (Element can get focus as soon as page gets loaded), required (all the required fields should be filled before page post back). In addition to these attributes, it also defines new custom attributes. All these enhancements in attributes make our life as developer very easy. It reduced the javascript dependency which is a big plus.

Custom attribute:

<input type="tel" placeholder="(555) 555-5555" data-country="USA"

pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" />

"data-country" is defined as custom attribute. It can be accessed by following ways:

1. Dom functions: elementObj.getAttribute("data-subject")

2. Dataset: elementObj.dataset.subject [dataset is new in-built property defined for elements for holding all the custom data attributes]

Supported browser: Firefox 3.5+, Opera 10.5+,Chrome 6+, IE 9+

Form enhancements demo (You can view the source of this page for markup):
meter:

A+

Your score is: A+
progress:
working...
Download is: working...
progress:
3/4 complete
Goal is: 3/4 complete

required:

email:

date:

range:

search:

tel: telephone (with placeholder as (555) 555-5555)

color:

number:


New Output form field:

Enter a value :

Output:

HTML5 Series 3 - New Semantics elements article, time, nav, and footer in detail

Article: <article> - A component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently reusable

Examples: Forum post, a magazine article, a user-submitted comment

So any content on the page which is self-explanatory can be placed inside article element. Let's compare earlier and newer markup:

Time: <time> The time element represents either a time on a 24 hour clock, or a precise date. Let's compare the tags:

We can see that time element contains following attributes:

datetime: It is machine readable date time value. Time and time zone can be specified by adding "T" after date.

Nav: <nav> Represents a section of a page that links to other pages or to parts within the page: Only sections that consist of major navigation blocks In particular.

Use cases for nav:

- Motion is limited: a browser add-on allows you to jump to (or jump past) major navigation links

- Sight is limited: Using “screenreader” to go thru the document (screenreader to jump over

the navigation bar and start reading the main content)

SO: Being able to determine navigation links programmatically is important.

Footer:

Footer is a kind of section which contains info such as who wrote it, links to related documents, copyright data, and the like. Let's compare earlier and HTML5 tags:

Footer element can also contain header or hgroup element as we can see in this example of "FAT FOOTER". These days fat footer has replaced site map. We can find all shorts of links in fat footers. See in the this example.

In next post we will look into enhancements to the form elements.

HTML5 Series 2 - New Semantics and enhancements in Markup

HTML5 has shorter markups:

Old way	HTML5 way
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">	<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	<meta charset="utf-8" />
<link rel="stylesheet" href="style-original.css" type="text/css" />	<link rel="stylesheet" href="style-original.css" />
<script type="text/javascript" src="scriptfile.js"></script>	<script src="scriptfile.js"></script>

New Semantic Elements in HTML5:

HTML5 is not just about making existing markup shorter.

<section> The section element represents a generic document or application section.

Examples: A Web site's home page could be split into sections for an introduction, news items, contact information. <div> vs semantic elements (Check – how to select semantic element fig.)

<nav> Represents a section of a page that links to other pages or to parts within the page: Only sections that consist of major navigation blocks In particular

<article> A component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently reusable

Examples: Forum post, a magazine article, a user-submitted comment

<aside> A section of a page that consists of content that is tangentially related to the content

Examples: pull quotes or sidebars, for advertising, for groups of nav elements

<figure> and <figcaption> A unit of content, optionally with a caption, and that can be moved away from the main flow of the document without affecting the document’s meaning. <figure> vs <aside> : If the content is simply related and not essential, use <aside>. If the content is essential but its position in the flow of content isn’t important, use <figure>.

<hgroup> Heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines

<header> The header element represents a group of introductory or navigational aids.

<footer> The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element.

<time> The time element represents either a time on a 24 hour clock, or a precise date

<mark> The mark element represents a run of text in one document marked or highlighted for reference purposes.

So we have so many new semantic elements. It would be really confusing to select one of the them. For example how to select between section, article, aside, figure, or div. To solve this problem we can look into following flow diagram (This is found at html5doctor.com):

How to select among many semantic elements??

In next post: I will discuss some of the semantic elements in detail. Thanks.

HTML5 Series 1 - What is HTML5 and Semantic Markups ?

What is exactly HTML5?

- HTML5 = HTML + CSS + JavaScript

- How developers use improved markup, richer style capabilities and new JavaScript APIs to make the most of new Web development features?

- W3C: all 100-plus of these specifications under the moniker “HTML5”

- A unifying concept for that change

- So: HTML5 is about changes to HTML, CSS and JavaScript. Rather than worrying about all 100-plus specifications

Not as XHTML, HTML5 has lots of flexibility and would support the followings:

–Uppercase tag names.

–Quotes are optional for attributes.

–Attribute values are optional.

–Closing empty elements are optional.

Some rules for HTML5 were established:

–New features should be based on HTML, CSS, DOM, and JavaScript

–Reduce the need for external plugins (like Flash)

–Better error handling

–More markup to replace scripting

–HTML5 should be device independent

–The development process should be visible to the public

What is HTML5 Semantics?

–Elements, attributes, and attribute values in HTML : Have certain meanings (semantics). For example, the ol element represents an ordered list, and the lang attribute represents the language of the content.

–Correct HTML5 markup allow it to be used in wide variety of context.

–Simple example: Same Web page written by an author who only considered desktop computer Web browsers can be viewed by a small browser on a mobile phone.

[Because HTML conveys meaning, rather than presentation]

–Authors must not use elements, attributes, or attribute values for purposes other than their appropriate intended semantic purpose, as doing so prevents software from correctly processing the page.