HTML5 Demos

Demos

Hooking up <audio> to the Web Audio API
createMediaSoureElement() allows HTML5 audio to be the source to the Web Audio API.
Live Photobooth
navigator.getUserMedia() to capture the camera, rendered to a <canvas> with CSS filters applied.
Video subtitles
The <track> element has a full API to add track information to a HTMLMediaElement.
HTML5 Filesystem Playground
Playground to showcase filer.js, a library for the HTML5 Filesystem API.
CSS Filter Effects
Playground to experiment with CSS filters on DOM elements.
Styled file inputs
Styling <input type="file"> using a fake button and another using ::before.
Transferable Objects
Demonstrates the performance gain from using webkitPostMessage(), which uses transferable objects.
MediaSource API
Uses the MediaSource API and the File APIs to split a movie into chunks and 'stream' each chunk to a <video> element.
Fullscreen API
Using the Fullscreen API to take a content <div> into the browser's full screen mode, programmatically.
Saving named file downloads, client-side
Using window.URL.createObjectURL() to create a file and the download attribute to specify it's a download.
navigator.onLine
Using navigator.onLine and online/offline events to check for connectivity.
Generating URIs to File Resources
Using window.URL.createObjectURL(), FileEntry.toURL(), and dataURLs with the FileSystem API.
Background News [ install ]
Using Google Chrome 10's background feature.
Book of the Day [ install ]
Using Google Chrome 10's background feature.
Clock
A clock implemented using <canvas> and Server-Sent Events

Presentations

The Edge of HTML5
Jan. 2012
What's New in HTML5 Media
SF HTML5 Meetup, Jan. 2012
Bleeding Edge HTML5
DevFests/Google Developer Day 2011 (Philippines, Thailand, Japan, Singapore, Indonesia), Sept/Oct/Nov 2011
Building Modern Web Applications
DevFests/Google Developer Day 2011 (Philippines, Thailand, Japan, Singapore, Indonesia), Sept/Oct/Nov 2011
The Latest in HTML5
Google Developer Relations Brown Bag, July 2011
HTML5 Showcase for Web Developers: The Wow and the How
Google I/O, 2011
Utilizing HTML5 in Google Chrome Extensions
Add-On Con, 2010
HTML5 Storage
Sencha Conference, 2010
Google Developer Day 2010 (Brazil) Keynote Demos
Sao Paulo, Brazil

Demos

Presentations

Other