Below are some HTML5 test pages I created while studying an oreilly.com HTML5 training course. They demo features such as Video, Audio, Geolocation, Canvas and also there’s a Massive Attack Video and Audio player, made entirely in HTML5, which is a modification to an example on the training course.
HTML5 Video
https://www.patwalsh.co.uk/code/html5/dev-html5-video.html
HTML5 Geolocation – Example with Alertbox
https://www.patwalsh.co.uk/code/html5/dev-html5-geo-alertboxonly.html
HTML5 Geolocation – Example with Google Maps
https://www.patwalsh.co.uk/code/html5/dev-html5-geo-maps.html
HTML5 Canvas – Examples of working with images and drawing a grid
This example uses the canvas element to load an image and display it several times to the screen and also has an example of drawing a grid.
https://www.patwalsh.co.uk/code/html5/dev-html5-canvas1.html
HTML5 Canvas – Drawing animations
This is quite a cool little animation of falling spots, where you click the mouse on a part of the browser screen and a random-sized spot appears. This then begins falling off the browser screen. If you click the Paint checkbox, the spot will paint all the way down to the bottom. This doesn’t work with all browsers (ok on Chrome and IE at moment) and works particularly well on a device with Touch screen.
https://www.patwalsh.co.uk/code/html5/dev-html5-canvas-ani2.html
HTML5 Canvas – Massive Attack Video and Audio Player
This example puts together a lot of the above elements and combines them to make a Massive Attack Video and Audio Player, all entirely made out of HTML5, CSS and the video and audio files.
The icons in the top left corner select between Video Player and Audio Player.
https://www.patwalsh.co.uk/code/html5/html5-massiveattack.html