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: 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
