HTML5 Video for iPad (p2)

A couple of things to remember when designing your layout is that you’re working with some slightly odd dimensions.  Consequently you’ll want to plan your visual layout to maximize visibility, and carry those to the bitrate profiles when encoding.

In landscape mode, the window dimensions are 981×661, which gives you enough space to do a “fullscreen” (really “full page”) when you’re showing 16:9 (and still have room for the controls) but if your video is 4:3 you may want to reduce the video to 816×612 which will still give you room for the controls.  Remember that unlike mouse hover controls that have become the standard over the last couple of years, iPad doesn’t have a “hover” state so your controls have to be visible pretty much all the time.  Still, since you really only have a minimal number to play with, you could work on alternate layouts.

In portrait mode, the inner dimensions grow to 980×1208 which gives you a lot of room to work with but since many users would opt to go with the largest viewable video window, it’s probably unlikely that they’d choose to watch the video in portrait mode unless you provide some compelling, potentially interactive content.

Some things to consider:

• Do I expect to allow multiples sizes (standard and “fullscreen”) or just one?
• Do I intend to have banner advertising?  Is it being triggered by the video? Can I use spiders or overlays instead?  Do I need a 728×90 or can some other size work better?
• Will my delivery page have content other than the player?
• How will the video interact with other content on the page?
• How does the shrinkage when moving to portrait mode affect the hit range of the controls?  Do I need to enlarge them in that mode?

Next we’ll look at some of the possible solutions depending on the case scenarios.