HTML 5 Demos and Examples

HTML 5 experimentation and demos I've hacked together. Click on the browser support icon or the technology tag to filter the demos (the filter is an OR filter).

Demo	Support	Technology
Stream video and filter with canvas	ie: nonefirefox: noneopera: livesafari: nonechrome: nightly	getUserMedia canvas
Stream video to the browser Also works on Opera Mobile 12	ie: nonefirefox: noneopera: livesafari: nonechrome: nightly	getUserMedia
Drag and drop and XHR upload	ie: nightlyfirefox: liveopera: nonesafari: nonechrome: live	file dnd xhr2
Hidden property	ie: nonefirefox: liveopera: livesafari: livechrome: live	hidden
Simple class manipulation	ie: nonefirefox: liveopera: livesafari: livechrome: live	classlist
Storage events	ie: livefirefox: liveopera: livesafari: livechrome: live	storage
dataset (data-* attributes)	ie: nonefirefox: liveopera: livesafari: livechrome: live	dataset
History API using pushState	ie: nonefirefox: liveopera: livesafari: livechrome: live	history
Browser based file reading Not part of HTML5	ie: nonefirefox: liveopera: livesafari: nonechrome: live	file-api
Drag files directly into your browser Not directly part of HTML5	ie: nonefirefox: liveopera: nonesafari: nonechrome: live	file-api dnd
Simple chat client	ie: nonefirefox: nightlyopera: nightlysafari: livechrome: live	websocket
Two videos playing in sync	ie: livefirefox: liveopera: livesafari: livechrome: live	video
Interactive canvas gradients	ie: livefirefox: liveopera: livesafari: livechrome: live	canvas
Canvas & Video	ie: livefirefox: liveopera: livesafari: livechrome: live	video canvas
Video	ie: livefirefox: liveopera: livesafari: livechrome: live	video
Canvas	ie: livefirefox: liveopera: livesafari: livechrome: live	canvas
Content Editable	ie: livefirefox: liveopera: livesafari: livechrome: live	contenteditable storage
Geolocation Works on Safari Mobile too	ie: livefirefox: liveopera: livesafari: livechrome: live	geolocation
postMessage same domain	ie: livefirefox: liveopera: livesafari: livechrome: live	postMessage
postMessage cross domain	ie: livefirefox: liveopera: livesafari: livechrome: live	postMessage
drag and drop	ie: livefirefox: liveopera: livesafari: livechrome: live	dnd
drag anything	ie: livefirefox: liveopera: livesafari: livechrome: live	dnd
offline detection Works on Safari Mobile too	ie: nonefirefox: liveopera: livesafari: nonechrome: none	offline events
navigator.onLine tests Doesn't use events, only polls	ie: livefirefox: liveopera: livesafari: nonechrome: none	offline
on/offline event tests	ie: nonefirefox: liveopera: livesafari: nonechrome: none	offline events
offline application using the manifest FF 3.6 is still buggy - doesn't request manifest after initial load	ie: nonefirefox: liveopera: livesafari: livechrome: live	offline manifest
Storage	ie: livefirefox: liveopera: livesafari: livechrome: live	storage
Web SQL Database Storage	ie: nonefirefox: noneopera: livesafari: livechrome: live	sql-database
Web SQL Database - rollback test	ie: nonefirefox: noneopera: livesafari: livechrome: live	sql-database
Web Workers watch out - uses a lot of CPU!example without - will hang your browser	ie: nonefirefox: liveopera: livesafari: livechrome: live	workers

All content, code, video and audio is Creative Commons Share Alike 2.0