The Official
Moosylvania Blog

In our last post, we discussed how we created our Moosylvania Holiday Card that utilized HTML5 Video and Audio tags. Using this technology led to many issues on mobile devices though, so today we will explain how we worked around these issues during the mobile application development phase.

The first issue that we encountered on mobile devices is that any time you try to play an HTML5 video, the video will open up in a new window or the mobile device’s internal media player. Due to this, we simply couldn’t place the video underneath the moose’s head.

To solve this issue, we used the same jQuery Spritely library that we used for our animating lights and eyes. When using this library, we had to turn our video into one large sprite. We did this with Photoshop’s video importer that allows you to save the frames of the movie to layers of a PSD image.

This itself lead into many issues as you currently cannot save an image that is wider than 30,000 pixels and you can only import 500 frames at a time. So in the end, we ended up utilizing every 5th frame of the video along with 3 separate sprites. If we then played the sprite back at 6 fps, this allowed the sprite to animate closely to the way the video looked, which was encoded at 30 fps.

The second issue that we encountered was that on iOS devices, you currently can only play one HTML5 audio file at a time in Safari. Due to this, we had to completely hide our sound board for iOS devices. While this was not optimal, we felt it was the best solution at the time.

As you can see, HTML5 is anything but a finished spec to be used on the web, so when using this new technology, hopefully you can learn from our past experience. This also shows the importance of testing your HTML5 application on all types of mobile devices and platforms.

In our next post, we will discuss how we took our mobile version of the page and turned it into native apps for the iOS devices and Android phones. Be the first to know by signing up for our RSS feed here.