The below list of useful HTML5 Web sites is mostly for my own reference, so I can find HTML5 resources when I need them. The list will be updated as I come across new HTML5 resources. Feel free to add sites you find interesting in the comments section below.

http://videojs.com/
VideoJS is an HTML5 Video Player, built with Javascript and CSS, with a fallback to a Flash video player for when the browser doesn’t support HTML5 video.

http://www.diveintohtml5.org/
Dive Into HTML 5 is a book written about HTML5. It is published online (free) in its entirety under a creative commons license. You can read all about MIME types, the history of HTML standards and the W3C and, of course, details on various HTML5 features and how to check to see if various current web browsers support that specific feature. This is important because while there are many proposed HTML5 features, and of those many features some that have been finalized, each browser developer (Apple, Microsoft, Mozilla, Google, etc) has varying levels of support for the individual features that collectively make up HTML5.

http://www.niallkennedy.com/blog/2010/02/html5-video-markup.html
Niall Kennedy breaks down how a browser understands your html5 video code and cascades through your code to find a version of the video that it can understand and play. Since not all browsers support the same video / audio codecs, you have to upload various versions of the same video. Each browser sniffs out the version of your video that it can play back.

http://www.webmproject.org/
WebM is an open, royalty-free, media file format designed for the web.

WebM defines the file container structure, video and audio formats. WebM files consist of video streams compressed with the VP8 video codec (which Google acquired from on2 and subsequently opensourced) and audio streams compressed with the Vorbis audio codec. The WebM file structure is based on the Matroska container.

The WebM project is dedicated to developing a high-quality, open video format for the web that is freely available to everyone. The WebM launch is supported by Mozilla, Opera, Adobe, Google and more than forty other publishers, software and hardware vendors.

How about Apple?!? For more on that, let’s go inside the mind of Steve Jobs.

http://www.firefogg.org/
Fireogg is a Firefox plugin that allows people to encode and upload video right within the Firefox browser. I just downloaded the plugin and uploaded a quicktime .mov video from my desktop to the browser-based video encoder.

http://handbrake.fr/
HandBrake is an open-source, GPL-licensed, multiplatform, multithreaded video transcoder, available for MacOS X, Linux and Windows. What does that mean in plain English? It’s a free desktop video encoder that takes a variety of input formats and can export to

  • File format: MP4 and MKV
  • Video: MPEG-4, H.264, or Theora
  • Audio: AAC, CoreAudio AAC (OS X Only), MP3, or Vorbis. AC-3 pass-through, DTS pass-thorugh (MKV only)

Kind of like my favorite lifesaving tool I use when I’m in dire encoding / transcoding straights, MPEG StreamClip.

I haven’t played around with handbrake yet.

http://camendesign.com/code/video_for_everybody
Video for Everybody is simply a chunk of HTML code that embeds a video into a website using the HTML5 <video> element, falling back to Flash automatically, without the use of JavaScript or browser-sniffing. It therefore works in RSS readers (no JavaScript), on the iPhone / iPad (don’t support Flash) and on many, many browsers and platforms.

Translation, you can use this code snippet so that when someone visits your site you can detect what browser they are using and if the browser supports HTML5, then an HTML5 video will play. If not, then the site will detect whether the visitors browser supports flash and display a flash video. If no flash is detected, it will display a still image, rather than prompt the user to download flash, and allow the visitor to download the video file to his desktop to watch.

Everywhere you want to display video, you would upload both an Ogg and an MP4 version of the video clip to your server.

http://www.apple.com/html5/showcase/video/
Um, cool stuff from Apple. And Apple’s opportunity to hold the middle finger up to Adobe. Flash is no longer the only game in town. Hopefully this means that every time I go to ESPN.com my browser won’t crash anymore.

http://www.chiptune.com/starfield/starfield.html
When you’re ready to kill 5 minutes, go here and play with the pretty stars.

http://kevs3d.co.uk/dev/lsystems/
An interesting HTML5 + JavaScript Canvas Demo.

http://www.phpguru.org/static/rgraph-text.html?text=Welcome
More on HTML5 Canvas. Good resource. Note that only some browsers that offer HTML5 currently support the canvas tag. More browser developers will support the canvas tag as time goes on.

HTML5 Rocks
An HTML5 based PowerPoint like presentation with functioning working demos of HTML5 features built into the presentation. If that doesn’t make sense it’s like looking at yourself in a mirror in a mirror in a mirror in a mirror. Check it out. Covers javascript APIs (new selectors, web storage, application cache, web workers, web sockets, notifications, drag and drop, geolocation), HTML5 features (semantic tags, link relations, microdata, ARIA attributes, form fields, html5 video, canvas, SVG), and a whole bunch of CSS stuff.

http://www.thewildernessdowntown.com/
Music Video meets HTML5 & Google Maps API. Enter your home address and your house is part of the show.

http://wistia.com/product/playlist
HTML5 video playlist: Built entirely in JavaScript, the Slimlist supports all desktop browsers and iOS devices out of the box.

Keep up with the Online Video Platform Companies

Vimeo HTML5
YouTube HTML5
Brightcove HTML5
Kaltura HTML5

http://www.html5video.org/
An HTML5 Video site run by Online Video Platform company Kaltura that focuses on Kaltura’s HTML5 Video efforts. Not sure if it’s just a marketing site with a very very search engine friendly URL or if it aims to be more than that – a resource on, you know, HTML5.