HTML5 Demos and Examples

<!DOCTYPE html> <html id="home" lang="en"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://html5demos.com/","20121215022308","https://web.archive.org/","web","/_static/", "1355538188"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta charset="utf-8"/> <meta name="viewport" content="width=620"/> <title>HTML5 Demos and Examples</title> <link rel="stylesheet" href="/web/20121215022308cs_/http://html5demos.com/css/html5demos.css"/> <script src="/web/20121215022308js_/http://html5demos.com/js/h5utils.js"></script> <script src="/web/20121215022308js_/http://html5demos.com/js/modernizr.custom.js"></script> </head> <body> <section id="wrapper"> <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "https://web.archive.org/web/20121215022308/http://engine.carbonads.com/z/14060/azcarbon_2_1_0_VERT"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div> <header> <h1><abbr>HTML</abbr> 5 Demos and Examples</h1> </header> <article> <abbr>HTML</abbr> 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 <code>OR</code> filter). <section> <a href="https://web.archive.org/web/20121215022308/http://2012.full-frontal.org/workshop/tooling#tooling" id="promo"> 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. </a> </section> <table id="demos"> <thead> <tr> <th>Demo</th> <th>Support</th> <th>Technology</th> </tr> </thead> <tbody> <tr> <td class="demo"><a href="gum-canvas">Stream video and filter with canvas</a></td> <td class="support"> ie: none firefox: none opera: live safari: none chrome: nightly </td> <td class="tags">getUserMedia canvas </td> </tr> <tr> <td class="demo"><a href="gum">Stream video to the browser Also works on Opera Mobile 12</a></td> <td class="support"> ie: none firefox: none opera: live safari: none chrome: nightly </td> <td class="tags">getUserMedia </td> </tr> <tr> <td class="demo"><a href="dnd-upload">Drag and drop and XHR upload</a></td> <td class="support"> ie: nightly firefox: live opera: none safari: none chrome: live </td> <td class="tags">file dnd xhr2 </td> </tr> <tr> <td class="demo"><a href="hidden">Hidden property</a></td> <td class="support"> ie: none firefox: live opera: live safari: live chrome: live </td> <td class="tags">hidden </td> </tr> <tr> <td class="demo"><a href="classlist">Simple class manipulation</a></td> <td class="support"> ie: none firefox: live opera: live safari: live chrome: live </td> <td class="tags">classlist </td> </tr> <tr> <td class="demo"><a href="storage-events">Storage events</a></td> <td class="support"> ie: live firefox: live opera: live safari: live chrome: live </td> <td class="tags">storage </td> </tr> <tr> <td class="demo"><a href="dataset">dataset (data-* attributes)</a></td> <td class="support"> ie: none firefox: live opera: live safari: live chrome: live </td> <td class="tags">dataset </td> </tr> <tr> <td class="demo"><a href="history">History API using pushState</a></td> <td class="support"> ie: none firefox: live opera: live safari: live chrome: live </td> <td class="tags">history </td> </tr> <tr> <td class="demo"><a href="file-api-simple">Browser based file reading</a> Not part of HTML5</td> <td class="support"> ie: none firefox: live opera: live safari: none chrome: live </td> <td class="tags">file-api </td> </tr> <tr> <td class="demo"><a href="file-api">Drag files directly into your browser</a> Not directly part of HTML5</td> <td class="support"> ie: none firefox: live opera: none safari: none chrome: live </td> <td class="tags">file-api dnd </td> </tr> <tr> <td class="demo"><a href="web-socket">Simple chat client</a></td> <td class="support"> ie: none firefox: nightly opera: nightly safari: live chrome: live </td> <td class="tags">websocket </td> </tr> <tr> <td class="demo"><a href="two-videos">Two videos playing in sync</a></td> <td class="support"> ie: live firefox: live opera: live safari: live chrome: live </td> <td class="tags">video </td> </tr> <tr> <td class="demo"><a href="canvas-grad">Interactive canvas gradients</a></td> <td class="support"> ie: live firefox: live opera: live safari: live chrome: live </td> <td class="tags">canvas </td> </tr> <tr> <td class="demo"><a href="video-canvas">Canvas & Video</a></td> <td class="support"> ie: live firefox: live opera: live safari: live chrome: live </td> <td class="tags">video canvas </td> </tr> <tr> <td class="demo"><a href="video">Video</a></td> <td class="support"> ie: live firefox: live opera: live safari: live chrome: live </td> <td class="tags">video </td> </tr> <tr> <td class="demo"><a href="canvas">Canvas</a></td> <td class="support"> ie: live firefox: live opera: live safari: live chrome: live </td> <td class="tags">canvas </td> </tr> <tr> <td class="demo"><a href="contenteditable">Content Editable</a></td> <td class="support"> ie: live firefox: live opera: live safari: live chrome: live </td> <td class="tags">contenteditable storage </td> </tr> <tr> <td class="demo"><a href="geo">Geolocation</a> Works on Safari Mobile too</td> <td class="support"> ie: live firefox: live opera: live safari: live chrome: live </td> <td class="tags">geolocation </td> </tr> <tr> <td class="demo"><a href="postmessage">postMessage</a> same domain</td> <td class="support"> ie: live firefox: live opera: live safari: live chrome: live </td> <td class="tags">postMessage </td> </tr> <tr> <td class="demo"><a href="postmessage2">postMessage</a> cross domain</td> <td class="support"> ie: live firefox: live opera: live safari: live chrome: live </td> <td class="tags">postMessage </td> </tr> <tr> <td class="demo"><a href="drag">drag and drop</a></td> <td class="support"> ie: live firefox: live opera: live safari: live chrome: live </td> <td class="tags">dnd </td> </tr> <tr> <td class="demo"><a href="drag-anything">drag anything</a></td> <td class="support"> ie: live firefox: live opera: live safari: live chrome: live </td> <td class="tags">dnd </td> </tr> <tr> <td class="demo"><a href="offline">offline detection</a> Works on Safari Mobile too</td> <td class="support"> ie: none firefox: live opera: live safari: none chrome: none </td> <td class="tags">offline events </td> </tr> <tr> <td class="demo"><a href="nav-online">navigator.onLine tests</a> Doesn't use events, only polls</td> <td class="support"> ie: live firefox: live opera: live safari: none chrome: none </td> <td class="tags">offline </td> </tr> <tr> <td class="demo"><a href="offline-events">on/offline event tests</a></td> <td class="support"> ie: none firefox: live opera: live safari: none chrome: none </td> <td class="tags">offline events </td> </tr> <tr> <td class="demo"><a href="offlineapp">offline application using the manifest</a> FF 3.6 is still buggy - doesn't request manifest after initial load</td> <td class="support"> ie: none firefox: live opera: live safari: live chrome: live </td> <td class="tags">offline manifest </td> </tr> <tr> <td class="demo"><a href="storage">Storage</a></td> <td class="support"> ie: live firefox: live opera: live safari: live chrome: live </td> <td class="tags">storage </td> </tr> <tr> <td class="demo"><a href="database">Web SQL Database Storage</a></td> <td class="support"> ie: none firefox: none opera: live safari: live chrome: live </td> <td class="tags">sql-database </td> </tr> <tr> <td class="demo"><a href="database-rollback">Web SQL Database - rollback test</a></td> <td class="support"> ie: none firefox: none opera: live safari: live chrome: live </td> <td class="tags">sql-database </td> </tr> <tr> <td class="demo"><a href="worker">Web Workers</a> watch out - uses a lot of CPU! <a href="non-worker">example without - will hang your browser</a></td> <td class="support"> ie: none firefox: live opera: live safari: live chrome: live </td> <td class="tags">workers </td> </tr> </tbody> </table> All content, code, video and audio is <a rel="license" href="https://web.archive.org/web/20121215022308/http://creativecommons.org/licenses/by-sa/2.0/uk/">Creative Commons Share Alike 2.0</a> </article> <a id="html5badge" href="https://web.archive.org/web/20121215022308/http://www.w3.org/html/logo/"> <img src="https://web.archive.org/web/20121215022308im_/http://www.w3.org/html/logo/badge/html5-badge-h-connectivity-device-graphics-multimedia-performance-semantics-storage.png" width="325" height="64" alt="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage" title="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage"> </a> <footer><a id="built" href="https://web.archive.org/web/20121215022308/http://twitter.com/rem">@rem built this</a></footer> </section> <a href="https://web.archive.org/web/20121215022308/http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://web.archive.org/web/20121215022308im_/http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub"/></a> <script src="https://web.archive.org/web/20121215022308js_/http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script> (function() { var tags = []; $(document).delegate('span.tag', 'click', function () { var $tag = $(this), tag = $tag.text(), type = $tag.closest('td').attr('class') || 'tags'; if ($tag.is('.selected')) { $('.' + type + ' span:contains(' + tag + ')').removeClass('selected'); } else { $('.' + type + ' span:contains(' + tag + ')').addClass('selected'); } // it's an AND filter var $trs = $('.' + type + ':has(span.selected)').closest('tr'); if ($trs.length) { $('tbody tr').hide(); $trs.show(); } else { $('tbody tr').show(); } }); var html = []; $('.tags span.tag').each(function () { var $tag = $(this), tag = $tag.text(); if (!tags[tag]) { tags[tag] = true; html.push('' + tag + ' '); } }); $('#tags').append('Filter demos: ' + html.sort().join('')); $.getJSON('demos.json', function (data) { var i = data.length, $test; while (i--) { if (data[i].test && (new Function('return ' + data[i].test))()) { $('#test-' + data[i].url).addClass('supported').attr('title', 'your browser is supported'); } else if (data[i].test) { $('#test-' + data[i].url).addClass('not-supported').attr('title', 'your browser is NOT supported'); } } }); // $('tr td.demo').click(function () { // window.location = $(this).find('a').attr('href'); // }); }()); var _gaq = [['_setAccount', 'UA-1656750-18'], ['_trackPageview']]; (function(d, t) { var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1; g.src = '//web.archive.org/web/20121215022308/http://www.google-analytics.com/ga.js'; s.parentNode.insertBefore(g, s); }(document, 'script')); </script> </body> </html>

CINXE.COM

HTML5 Demos and Examples