HTML 5 Demos and Examples (original) (raw)
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). HTML5 also presents new challenges to online privacy, so if you're at all concerned about your privacy please read my comprehensive notes on VPN Services like ExpressVPN and NordVPN.
| 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