Apr 13, 2010

HTML5 Video on the iPad—5 Essential Lessons

Ken Hanson's picture
Ken Hanson
Design Engineer
4 comments

I just got the amazing opportunity to attack a set of interactive content modules that Hot’s design team put together for Zinio’s new iPad application.

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.

Background

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?

Shockingly hard.

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

So, here are the key takeaways. I’m passing them on because you’ll want to get on top of them right away if your rolling your own controls with HTML and Javascript...  

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.

The HTML5 spec has all these lovely events that you get to play with. Mobile Safari, well… doesn’t. For instance, writing the scrubber's "buffer bar" Javascript was something I thought would be trivial (because I was already familiar with the available events for HTML5 Video through the spec).  Boy, was I wrong. Without a few key events, it became a very kludgy affair.  

Full screen from Javascript is not exposed.

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.

Update: Rob in the comments has posted a great demo of getting around this by wiring up a play event to a link and using Javascript to click it. Check it out below! 

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.

Because you're a Hottie, please log in before commenting:

4 comments

HTML5 Video on the iPad – 5 Essential Lessons | ItPak.net's picture

[...] Update: Rob in the comments has posted a great demo of getting around this by wiring up a play event to a link and using Javascript to click it. Check it out below! [...]

Ken Hanson's picture

Hey Rob, thanks for the example! Great idea! We had gone round and round about possibly doing that, but were a bit nervous about ruffling Apple feathers just for autoplay, especially since Apple had taken a personal interest in the Zinio app.

I knew we could just fake a users click with JS on our play button, but we decided to be "good" boys and girls and stick within the guidelines.

That said, I'll definitely update the post and link to your example! Theres no reason that someone shouldn't do this in all honesty, especially if they aren't under our constraints.

Appreciate the feedback!

Maria Giudice's picture

Fantastic post, Ken! Thanks so much for sharing!

Rob's picture

Here's an example I tossed together of autoplay in action (works on iPad and iPhone):
http://www.roblaplaca.com/examples/html5AutoPlay/

You have to make a fake link with your event bound to it, and then simulate a click on it via JS. It's a hack... but it works.

Post new comment