HTML5 Video on the iPad—5 Essential Lessons
This is one of the first projects I’ve had as the Hot Studio Senior Design Engineer where I really flexed my muscles with all sorts of CSS and jQuery Voodoo. In the next three posts, I’ll give you a close-up, first person account of how Hot’s engineering team tackled the project and ultimately created an entirely new magazine experience.
Imagine you’re flipping through a magazine and you see a photo you like. You tap the photo and up pops a bunch of additional content. That could include more images, text, or, better yet, videos from the photo shoot.
That’s what Hot’s designers envisioned when they created a series of exquisitely designed modules that would launch from Zinio’s static magazine content. They had poured over the interactions, and had gone through several iterations until they had something that, in my opinion, was really sleek. Now it was up to me and the Hot engineering team to make that vision a reality.
Of special note are the ways the modules are displayed. They launch inside the app, and don’t show browser bars at all. If I did the scripting and CSS properly, it would feel just as native as a normal video player, but with the ease of being written as editable HTML, something publishers are widely getting better at.
I started with the slideshow, making it feel as native as possible. I got tips from iPhone developers about what Mobile Safari apps lacked compared to normal apps and incorporated the feedback. Once the slideshow was humming (don’t worry, there will be another post about that process), it was time to tackle the HTML5 video and audio components.
I started out fearless, thinking that even if we went completely overboard on customizations (which we did and they turned out amazing for all our efforts), it was only a few controls. How hard could that possibly be?
Why? Mostly because there was so much that wasn’t documented or talked about yet. Sure, lots of people are buzzing about HTML5 video, but nobody is really talking about wiring up your own controls (not even in the forums). That being said, there are some fantastic resources that we ran into here, here (invaluable resource, even if all the events didn't work), and here. Hot’s designers (and myself) felt those controls were essential to maintain the essence of the Zinio brand, and so we trudged on in a very new world of HTML5 Video.
What We Learned
Volume controls are out in Mobile Safari.
I’ll explain why we wanted the iPad to have volume controls later, but, in short, we felt they were integral to the experience. Apple’s Mobile Safari team apparently did not.
Prepare to get creative with the events that Mobile Safari gives you.
We went with stretching the video as much as possible, depending on orientation. This ultimately presented a huge amount of problems: from jittery animations to loads of orientation math for vertical & horizontal centering.
There’s no auto play, either.
Not only that, there’s no way around it it's pretty hacky to get around this. I’ll get into the reasons why later.
Audio tags? Not if you want one that actually works.
So we used the video tag, which worked exceedingly well. I’ll explain how we did it and why it worked in a later post.
That’s it for now. In the next post, I’ll walk you through our experience with the volume controls and talk about the challenges we faced with Mobile Safari events (code samples included). Then finally in the third post, we'll chat about Full Screen (which covers some pretty great CSS Transitions and CSS3), auto play, and the Audio tag.