HTML5 in Action; Plugin-free video and browser geolocation

I mentioned HTML5 in my links entry from yesterday and reading about what is coming is great, but seeing some of it in action is even better.  So I've created a few examples of a couple new features that I describe below.

The first is the ability to have video in web-pages without requiring any plug-ins.  This is done with the new <video> element, an example of which can be viewed below or here which happens to show Galen Rupp going sub-4:00 earlier this year.  But take a look at the source of that page and see how simple it is:

<video src="RuppMile.ogv" controls/>

Isn't that easier than relying on plugins and or much more complicated HTML that has to download and use Flash?

Now, a few caveats are that (to my knowledge) this only works in Firefox 3.5 and Safari 4 and the video has to be in Ogg Theora, Ogg Vorbis, or WAV format.  The Ogg media formats are not patent encumbered like other formats are so look for their growth and adoption to increase.  Learn more about it here.

The second is the use of some geolocation APIs that are not part of HTML5.  This can open a whole host of possibilities for applications to take advantage of location and deliver innovative applications for consumers.  I've created a simple example that uses the information provided to create a Google map centered on your location.  Try it here.

The source for this is a little more complicated due to the Javascript and use of Google's APIs but it boils down to the following:

navigator.geolocation.getCurrentPosition(showPosition);

function showPosition(position) {
var latLong = position.coords.latitude + ',' + position.coords.longitude;
document.getElementById('latLong').value = latLong;
loadPage();
}

The first line of code registers a method to be called when the location is known and when that method is called it can retrieve the coordinates and do with it what it wants.  In my case I load the map.

Again, this requires Firefox 3.5 where it uses a service to get your location from your IP address which is somewhat accurate, or you can use Safari on your iPhone which tends to be much more accurate with its cell tower triangulation and GPS capabilities.

Grab Firefox 3.5 and start giving HTML5 a try!

Galen Rupp video requiring no Flash, Silverlight, or other plugin!