HTML5 Demos

Demos

Google Hangouts Chat web component: <hangout-chat>
Google Hangouts Chat built using Polymer and Web Components
Screensharing with getUserMedia()
Shows the screensharing API in getUserMedia().
<gangnam-style> web component
Gangnam style web component using Polymer
ShadowDOM Visualizer
A visual representation of how Shadow DOM works.
Animate a background using <canvas> as the source
Use <canvas> as a background image using CSS -webkit-canvas().
Create .webm from getUserMedia()
Create a .webm file from a getUserMedia() stream.
Sticky Blog Titles
CSS position: sticky sample.
Image Importer using Folder Drag & Drop
Folder drag and drop and input[type="file"].webkitEntries sample.
"Holy Grail" of Application Layout
CSS Flexbox to achieve web app layout.
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

Demos

Presentations

Other