In this part of the tutorial, you will discover interactive examples (you will be able to change the code and see the results interactively) of HTML features. Some APIs or features are not yet available on every web browser, so you may need to try switch from one browser to another in order to run all the examples.

Forms

Excellent, detailed presentations with lots of examples of HTML5 forms by:

Estelle Weyl : http://standardista.com/forms/
Tiffany B. Brown from Opera : http://tiffanybbrown.com/presentatio...11/html5forms/

New attributes for input fields : placeholder, pattern, autofocus CSS pseudo classes...

Example of pattern, placeholder and autofocus + pseudo classes : http://jsbin.com/arifih/2/edit

Selecting files and directory

Use of the new "multiple" attribute for selecting several files at a time. In addition, uses the HTML5 File API for reading pictures and preview them : http://jsbin.com/ozacel/2/edit
Use of the new "directory" attribute for selecting a directory. Works only in webkit-based browsers (Chrome, Safari) : http://jsbin.com/iyixaf/3/edit
Note that in the example the attribute is named "webkitdirectory" instead of "directory" as this is still an experimental implementation.

Date, time, etc.

Play with the new date input field (Opera only) : http://jsbin.com/otovut/2/edit

Color

Play with the new type=color input field (Opera only) : http://jsbin.com/itufey/2/edit

Number

Example of input field type=number (Opera, WebKit) : http://jsbin.com/unagec/2/edit

Range

Example of input type=range (Opera, Webkit) : http://jsbin.com/ezuvir/3/edit

Email

Example of a form with a type=email input field : http://jsbin.com/uxajif/3/edit, see the use of pseudo CSS class invalid for styling. Try to submit the form to see Browser validation.
Example of a type=email input field with the use of the "multiple" attribute : http://jsbin.com/opaqam/2/edit

Tel

Example of input type=tel with use of attributes "placeholder" and "pattern" for custom validation : http://jsbin.com/equyim/2/edit

Url, search, voice recognition

Examples of these types of input fields. Note : voice recognition only works in Chrome so far : http://jsbin.com/ifamoq/3/edit

The new <output> field

Example of usage of the new <output> field : http://jsbin.com/evecux/2/edit

The new <datalist> element

Try this example that shows a <datalist> element in action for autocompleting an input field without the need of JavaScript code : http://jsbin.com/uwozih/2/edit

Declare <input> fields out of the <form></form>

Try this example : http://jsbin.com/adewof/2/edit

Drag'n'drop and File API

Access file details (name, size, type) :

See this example that shows how to use the File descriptor : http://jsbin.com/ofelet/2/edit

Instant preview dropped images

Simple "drag images and instant preview"example : http://jsbin.com/ewarak/2/edit
Same example but this time we added two input fields : one for selecting multiple files (<input type="file" multiple/>) and one for selecting a directory. Notice that both dropped files or selected files can be processed by the same piece of code for instant preview : http://jsbin.com/orurip/11/edit

Canvas

Good references :

Simple examples

The most simple example, draw a red filled rectangle in a canvas : http://jsbin.com/utihaq/2/edit
Simple example of drawing into a canvas with different colors, widths, shapes : http://jsbin.com/apihec/2/edit
Draw lines and play with line attributes lineWidth, lineJoin, lineCap : http://jsbin.com/iwaqit/2/edit
Draw a circle, play with styles, closePath()... : http://jsbin.com/iyecom/2/edit
For more complex shapes (quadratic and bezier curves), see http://www.html5canvastutorials.com/...dratic-curves/ and http://www.html5canvastutorials.com/...bezier-curves/

Shadows

Draw a rectangle with shadows : http://jsbin.com/oqeyip/2/edit

Gradients

This example shows a gradiant of colors : http://jsbin.com/urucem/3/edit

Clipping/using mask to draw only a part of the canvas

This example shows an example of clipping using a triangle shape (borrowed from : http://projects.joshy.org/presentati...sentation.html) : http://projects.joshy.org/presentati...sentation.html

Track mouse events

This example shows how to draw like a pencil, drawing lines between each mouse move : http://jsbin.com/idegay/2/edit

Stack canvases in layers

This example shows how we create two canvases one on top of another. Mouse draws in the canvas at the back, while the mouse position is displayed in the front canvas. Each the mouse moves, the front canvas is cleared before redrawing the mouse position, while the back canvas remains intact. Try it : http://jsbin.com/ogehin/2/edit

Images

Simple image loading and drawing in a canvas : http://jsbin.com/emixuc/4/edit
Use an image as a pattern for drawing shapes : http://jsbin.com/etufab/3/edit

2D Transformations

Try this example that shows how to translate/rotate/scale objects + how to save/restore the current context in a stack : http://jsbin.com/azacaf/3/edit

Save canvas content

This example shows how to open a new tab in your browser with a PNG image of the canvas content : http://jsbin.com/etirop/2/edit

Access pixels inside a canvas

Draw noise in a canvas, example that shows individual access to canvas's pixels : http://jsbin.com/ikanur/3/edit
The Pixstatic library uses canvases content to apply filters to images. They draw images in a canvas, then apply filters, then getCanvas content back to the image src. See : http://briangrinstead.com/canvasslides/photos4.html for a demonstration + link to the pixstatic lib.

Video

Basic usage

Play a video, providing different encoding so that any browser can stream (source : http://html5doctor.com/video-canvas-magic/) : http://jsbin.com/irofib/6/edit
Use external buttons to control the video player : http://jsbin.com/irofib/5/edit
More impressive demo with opacity and text overlapping the video while it plays (use "view source") : http://www.w3.org/2010/Talks/0430-ww...plh/video.html

Change properties on the fly (size, position, angle etc.)

Change size on the fly : http://jsbin.com/uretal/3/edit
Change video size and rotation when the mouse is over it : http://jsbin.com/ahunon/3/edit
Other funny (and ugly) demos of video transformed : http://www.w3.org/2010/Talks/0430-ww...plh/ugly.xhtml

Video special effects : incrustation / blue screening

Impressive demo by Mozilla developer (FF) : https://developer.mozilla.org/sample...ey/index.xhtml, use view source + look at the main.js file.
Another similar demo (Chrome, IE, for codec reasons) : http://david.blob.core.windows.net/h...reenscreen.htm, detailed explanation are available here : http://blogs.msdn.com/b/davrous/arch...anvas-2-4.aspx

Video capture

For these example to run, you need a browser that supports the getUserMedia API. See : Get a web browser that supports the getUserMedia API.

Resources : http://www.html5rocks.com/en/tutorials/getusermedia/intro/, most interactive examples come from there.

Display webcam stream in a video element

Simple display of webcam stream in a <video> element : http://jsbin.com/ipeyal/5/edit

Apply CSS effects on a video element with live webcam

Try this example that shows how to use the getUserMedia API : http://jsbin.com/ipeyal/6/edit

Take a snapshot from the live webcam stream

The trick consists in drawing the current image from the video element into a canvas : http://jsbin.com/owohil/2/edit

Other demos

The paint program proposed in the "geek path" of this tutorial shows a Paint Program in which you can paint with your live picture coming from the webcam stream while sending it through WebSockets to other people using the program at the same time : http://mainline.essi.fr
Look at the demos at the end of : http://www.html5rocks.com/en/tutorials/getusermedia/intro/

Récupéré depuis "http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/HTML5_Tutorial/HTML5_discovery_tutorial"