Infotainment, anyone?
January 17th, 2012 by Gage Pacifera
One of my early development projects working with Red Lemon Creative was a feature-rich site for infotainment guru Brian Walter. Brian puts on highly entertaining educational shows for clients like PepsiCo, Starbucks and Microsoft using a mix of humor, video, music and showmanship. Genevieve at Red Lemon put together a quirky, engaging site design and Harmonic Northwest did the development work.
The site includes a lot of features that I tend to use in my other WordPress sites: blog, contact forms, RSS feed, multiple page templates, basic SEO tag editing, analytics tracking and the ability for the client to easily add/edit pages. But the real standout features of the site are a couple of special additions that helped emphasize Brian’s creativity and talent: a custom video player and a sophisticated header animation sequence.
The Video Player
We needed to implement a feature-rich video player to show off Brian’s work. Player features needed to include:
- playlist support
- custom theming
- iOS compatibility
- video thumbnails
- allow client to easily manage videos, playlists and thumbnails
I ended up going with JW Player, a player I had used before while working with CMD. I knew that JW Player had a good javascript API, HTML5 and flash support, iOS support and also had a WordPress plugin for managing videos. Turns out it was a great choice: it delivered on all counts, including being super convenient to manage videos and video thumbnails through the WordPress admin panel. The video player also had YouTube-y display features like maximize screen, control volume, scrub through timeline bar, etc.
We also implemented a iOS swipe feature for the video playlists in the JW Player.. so when a user browses the videos on his iPhone, he gets a nice iOS-y user experience. I used the iScroll javascript plugin to make that work.
The Animation
Initially I put together the quirky home page animation in Flash, but later we decided that we needed the animation to be iOS compatible, too.. which meant we needed to put together a non-flash version.
So I put a Flash detect and then if Flash wasn’t detected, we would use a HTML/jQuery-driven version of the animation. And that turned out pretty well. The jQuery animation doesn’t quite do everything the Flash animation does, but it is about 80% the same and super smooth. And the overall effect of being to see a Flash-like animation on the iPhone and iPad is definitely really cool.
To put that together I used the jQuery 2d translate plugin (which I believe was free when I downloaded it) and this Penner easing plugin.