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).

Learn the power tools for your job: git, SASS, require.js and more

One day of tutorials run by 3 different teachers. Choose 4 topics from: git, require.js, SASS, testing, debugging and build processes - and master your tools.

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

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

HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage
Fork me on GitHub