{"id":650,"date":"2014-08-24T14:00:43","date_gmt":"2014-08-24T13:00:43","guid":{"rendered":"http:\/\/local.sandjam.co.uk\/?p=650"},"modified":"2018-08-03T13:53:37","modified_gmt":"2018-08-03T12:53:37","slug":"playing-around-with-html5","status":"publish","type":"post","link":"https:\/\/sandjam.co.uk\/sandjam\/2014\/08\/playing-around-with-html5\/","title":{"rendered":"Playing around with HTML5"},"content":{"rendered":"

I’ve spent a little time recently trying out some newer html5 features as well as Facebook Integration.<\/p>\n

Cheers!<\/h2>\n

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.<\/p>\n

Demo<\/h2>\n

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”.<\/p>\n

Audio<\/h2>\n

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:<\/p>\n

\r\nvar src = 'audio\/cheers.mp3';\r\nvar mp3Test = new Audio();\r\nvar canPlayMP3 = (typeof mp3Test.canPlayType === \"function\" && mp3Test.canPlayType(\"audio\/mpeg\") !== \"\");\r\nif (!canPlayMP3) {\r\nsrc = 'audio\/cheers.ogg';\r\n}\r\n<\/pre>\n
Sepia filter<\/h2>\n
The sepia filter isn’t well supported, but in Chrome and Firefox you can use:<\/p>\n
\r\n-webkit-filter: sepia(100%);\r\n-moz-filter: sepia(100%);\r\nfilter: sepia(100%);\r\n<\/pre>\n
 <\/p>\n
Try out the demo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":3,"featured_media":949,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4],"tags":[29,87,14],"class_list":["post-650","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code","tag-facebook","tag-html5","tag-javascript"],"acf":[],"_links":{"self":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/650","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/comments?post=650"}],"version-history":[{"count":4,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/650\/revisions"}],"predecessor-version":[{"id":947,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/650\/revisions\/947"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/media\/949"}],"wp:attachment":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/media?parent=650"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/categories?post=650"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/tags?post=650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}