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