HTML5 Demo: File API (simple)

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.

Filter demos: canvas classlist contenteditable dataset dnd events file-api file geolocation getUserMedia hidden history manifest offline postMessage sql-database storage svg video websocket workers xhr2

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