This Article is exploring new features in HTML 5. Recently we heard a lot more about HTML 5 and it's features, advantages and all other stuff. So, "What Does It All Mean??!!" - a common question we ask our self.
Let's get started exploring html5.
History of HTML
HTML was Born in late 1990, inveted by Tim Berners-Lee(wiki link).He said "this
is good" and proposed a draft to the Internet Engineering Task Force (IETF), a
standards organization. IETF drafts require implementations, so the HTML draft
referenced Mosaic, a web browser that later became Netscape, which later became
Firefox. Mosaic, of course, would have been rather worthless without HTML. So a
symbiosis between browsers and web standards drove the web from the beginning.
When the original HTML draft expired in 1994, the IETF created the first HTML
Working Group (HTMLWG), who created HTML 2. Also in 1994, Tim created the World
Wide Web Consortium (W3C), with a mission "To lead the World Wide Web to its
full potential by developing protocols and guidelines that ensure long-term
growth for the Web." If that sounds like what the HTMLWG was doing, that's
because it was. The two
standards bodies didn't run in parallel for long.
In 1996, after a series of additions to HTML 2, the IETF HTMLWG was closed and
further work on HTML moved to the W3C. The W3C published HTML 3.2 and HTML 4,
both in 1997. In December of 1999, HTML 4.01 was published.
In the seventh year (1998), the W3C rested. And rested. And rested. HTML hasn't
changed since.
Get Started
You may ask: "How can I start using HTML5 if older browsers don't support
it?" But the question itself is misleading. HTML5 is not one big thing; it is a
collection of individual features. So you can't detect "HTML5 support," because
that doesn't make any sense. But you can detect support for individual features,
like canvas, video, or geolocation.
Detection Techniques
When your browser renders a web page, it constructs a Document Object Model
(DOM), a collection of objects that represent the HTML elements on the page.
Every element - every <p>, every <div>, every <span> - is represented in the DOM
by a different object. (There are also global objects, like window and
document,that aren't tied to specific elements.)
All DOM objects share a set of common properties, but some objects have more
than others.
In browsers that support HTML5 features, certain objects will have unique
properties. A quick peek at the DOM will tell you which features are supported.
There are four basic techniques for detecting whether a browser supports a
particular feature.
From simplest to most complex:
- Check if a certain property exists on a
global object (such as window or navigator).
function supports_geolocation() {
return !!navigator.geolocation;
}
- Create an element, then check if a certain
property exists on that element.
function supports_canvas() {
return !!document.createElement('canvas').getContext;
}
- Create an element, check if a certain
method exists on that element, then call the method and check the value it
returns.
function supports_h264_baseline_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}
- Create an element, set a property to a
certain value, then check if the property has retained its value.
var i = document.createElement("input");
i.setAttribute("type", "color");
return i.type !== "text";
Canvas
HTML 5 defines the <canvas> element as "a resolution-dependent bitmap canvas
which can be used for rendering graphs, game graphics, or other visual images on
the fly." A canvas is a rectangle in your page where you can use JavaScript to
draw anything you want.
So what does a canvas look like? Nothing, really. A <canvas> element has no
content and no border of its own.
The markup looks like this:
<canvas width="300" height="225"></canvas>
You can have more than one <canvas> element on the same page. Each canvas will
show up in the DOM, and each canvas maintains its own state. If you give each
canvas an id attribute, you can access them just like any other element.
Let's expand that markup to include an id attribute:
<canvas id="a" width="300" height="225"></canvas>
Now you can easily find that <canvas> element in the DOM.
var a_canvas = document.getElementById("a");
So, you have a <canvas> element, and you have its drawing context. The drawing
context is where all the drawing methods and properties are defined. There's a
whole group of properties and methods devoted to drawing rectangles:
The fillStyle property can be a CSS color, a pattern, or a gradient. The default fillStyle is solid black, but you can set it to
whatever you like. Each drawing context remembers its own properties as long as
the page is open, unless you do something to reset it.
-
fillRect(x, y, width, height) draws a rectangle filled with the current fill
style.
-
The strokeStyle property is like fillStyle - it can be a CSS color, a pattern,
or a gradient.
-
strokeRect(x, y, width, height) draws an rectangle with the current stroke
style. strokeRect doesn't fill in the middle; it just draws the edges.
-
clearRect(x, y, width, height) clears the pixels in the specified rectangle.
Video
Anyone who has visited YouTube.com in the past four years knows that you can
embed video in a web page. But prior to HTML5, there was no standards-based way
to do this. Virtually all the video you've ever watched "on the web" has been
funneled through a third-party plugin - maybe QuickTime, maybe RealPlayer, maybe
Flash. (YouTube uses Flash.) These plugins integrate with your browser well
enough that you may not even be aware that you're using them. That is, until you try to watch a video on
a platform that doesn't support that plugin.
HTML5 defines a standard way to embed video in a web page, using a <video>
element. Support for the <video> element is still evolving, which is a polite
way of saying it doesn't work yet. At least, it doesn't work everywhere. But
don't despair! There are alternatives and fallbacks and options galore.
If your eyes haven't glazed over yet, you're doing better than most. As you can
tell, video (and audio) is a complicated subject - and this was the abridged
version! I'm sure you're wondering how all of this relates to HTML5. Well, HTML5
includes a <video> element for embedding video into a web page. There are no
restrictions on the video codec, audio codec, or container format you can use
for your video. One <video> element can link to multiple video files, and the
browser will choose the first video file it can actually play. It is up to you
to know which browsers support which containers and codecs.
HTML5 gives you two ways to include video on your web page. Both of them involve
the <video> element. If you only have one video file, you can simply link to it
in a src attribute. This is remarkably similar to including an image with an <img
src="..."> tag.
<video src="pr6.webm"></video>
Technically, that's all you need. But just like an <img> tag, you should always
include width and height attributes in your <video> tags. The width and height
attributes can be the same as the maximum width and height you specified during
the encoding process. Don't worry if one dimension of the video is a little
smaller than that. Your browser will center the video inside the box defined by
the <video> tag. It won't ever be swooshed or stretched out of proportion.
<video src="pr6.webm" width="320" height="240"></video>
There are two other optional attributes I want to mention before we go any
further: preload and autoplay.Don't shoot the messenger; let me explain why
these are useful. The preload attribute tells the browser that you would like it
to start downloading the video file as soon as the page loads. This makes sense
if the entire point of the page is to view the video. On the other hand, if it's
just supplementary material that only a few visitors will watch, then you can
set preload to none to tell the browser to minimize network traffic.
Here's an example of a video that will start downloading (but not playing) as
soon as the page loads:
<video src="pr6.webm" width="320" height="240" preload></video>
And here's an example of a video that will not start downloading as soon as the
page loads:
<video src="pr6.webm" width="320" height="240" preload="none"></video>
The autoplay attribute does exactly what it sounds like: it tells the browser
that you would like it to start downloading the video file as soon as the page
loads, and you would like it to start playing the video automatically as soon as
possible. Some people love this; some people hate it. But let me explain why
it's important to have an attribute like this in HTML5. Some people are going to
want their videos to play automatically, even if it annoys their visitors. If
HTML5 didn't define a standard way to auto-play videos, people would resort to
JavaScript hacks to do it anyway.
(For example, by calling the video's play() method during the window's load
event.) This would be much harder for visitors to counteract. On the other hand,
it's a simple matter to add an extension to your browser (or write one, if
necessary) to say "ignore the autoplay attribute,
I don't ever want videos to play automatically."
Here's an example of a video that will start downloading and playing as soon as
possible after the page loads:
<video src="pr6.webm" width="320" height="240" autoplay></video>
Here Other example shows how to detect when a video has failed to play
correctly:
<script>
function failed(e) {
// video playback failed - show a message saying why
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
alert('You aborted the video playback.');
break;
case e.target.error.MEDIA_ERR_NETWORK:
alert('A network error caused the video download to fail part-way.');
break;
case e.target.error.MEDIA_ERR_DECODE:
alert('The video playback was aborted due to a corruption problem or because the
video used features your browser did not support.');
break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
alert('The video could not be loaded, either because the server or network
failed or because the format is not supported.');
break;
default:
alert('An unknown error occurred.');
break;
}
}
</script>
<p><video src="tgif.vid" autoplay controls onerror="failed(event)"></video></p>
<p><a href="tgif.vid">Download the video file</a>.</p>
some Html5 points will be coming soon in next articles...............