Playing around with HTML5

Posted by on Aug 24, 2014 in Code Chat | No Comments
Playing around with HTML5

I’ve spent a little time recently trying out some newer html5 features as well as Facebook Integration.

Cheers!

I was browsing through my Facebook photos recently and the shots of friends enjoying drinks on a night out reminded me of the opening credits from Cheers. Wouldn’t it be great, I thought, if you could create your own version of this iconic intro using pictures of your own friends.

Demo

The demo project I’ve been working on allows you to log in to Facebook and select an album of photos. These photos are then treated with a sepia filter and animated through pan-zoom transitions to the familiar tune “Where everybody knows your name”.

Audio

The music is played using an HTML5 audio element. Don’t forget, when using HTML 5 audio that mp3 encoding isn’t supported in some Windows versions of Firefox so you need to use an ogg file instead. You can check whether mp3 is supported before attaching the source using something like:

var src = 'audio/cheers.mp3';
var mp3Test = new Audio();
var canPlayMP3 = (typeof mp3Test.canPlayType === "function" && mp3Test.canPlayType("audio/mpeg") !== "");
if (!canPlayMP3) {
src = 'audio/cheers.ogg';
}

Sepia filter

The sepia filter isn’t well supported, but in Chrome and Firefox you can use:

-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
filter: sepia(100%);

 

Try out the demo

Leave a Reply