The Official
Moosylvania Blog

It’s that time of year again – when agencies send out holiday gifts to surprise and delight clients who are busy trying to wrap things up before the end of the year. So, what did Moose send out this year?

We’ve been working on a special gift for clients, with a few interesting aspects. The base of the gift is a portable, powerful speaker that was concepted, designed and created by our talented team of designers. To demonstrate the speaker’s capabilities, the interactive team took over and created a mobile-friendly landing page (with a related landing page geared for those viewing on desktop), an iPhone app, and an Android app.

We call it our Holiday Moose. And here’s how we did it.

What is the Holiday Moose?

The Moosylvania Holiday Card is a singing moose developed using HTML5 and jQuery plugin called Spritely. It incorporates the video, audio and image animations to produce a fun holiday card that can be viewed on both, desktop and mobile devices.

Using HTML5 to achieve intended results

By utilizing HTML5 tags, we were able to place the mouth video behind the moose image to give the appearance that the moose is singing. The main reason we used these HTML5 tags is that it gave us full control of animations and the ability to play, pause, stop and restart on demand without flash.

With HTML5 audio, we were then able to create a soundboard that was placed on top of the video as well. By using this great technology, we were able to play multiple audio files simultaneously.

Resolving cross-browser issues

As great as HTML5 is getting to be, making it cross-browser compatible is still a challenge. Different browsers support different audio files. For example, IE9 supports MP3, but Firefox 5+ doesn’t. Chrome 12 supports OGG but Safari 5 doesn’t. The way we solved this issue is by providing all possible fallback formats for both audio and video tags. For example, if you are viewing the website in IE9, which doesn’t support MP3, it automatically detects the next format in line and starts playing it.

Resolving mobile browser issues

One of the biggest issues with mobile devices is the fact that many mobile browsers will treat the audio and video tags differently. Instead of playing the video within the browser, the mobile device will prompt you to play it in your video player provided by your device. Some mobile browsers, such as Safari on iPhone, do not let you play audio files simultaneously.

Tune in for our next post when we will discuss everything we did to solve HTML5 issues on mobile devices. Be the first to know by signing up for our RSS feed here.