Can I Skin HTML5 Video on the iPhone / iPad?

Question

I've seen lots of tutorials on how to skin html5 video for desktop browsers, but can't find anything relating to skinning the html5 <video> on an iPad / iPhone.

I'm assuming that this is because it can't be done.

Anyone draw a line under this for me?

Thanks!

Answer 1

You can actually skin them, but there's limitations, which is why you'll see most HTML5 video players just use the built in controller.

For instance, you can't trigger fullscreen mode on the iPad through javascript. So you can't build a custom button in HTML that will trigger it. You can only do it through the built in controller (or a reverse pinch). It's an unfortunate limitation of mobile Safari.

Also, once in native fullscreen mode (browser or mobile device) the default controls take over anyway. So in the case of the iPhone, which always plays in fullscreen, there's really no benefit to having custom controls.

Mozilla (Firefox) is actually taking the approach where developers can make any element on the page expand to fullscreen. This means custom controls can persist even in fullscreen mode. I really appreciate this direction. I haven't checked if that works in FF4 yet, but that's apparently the plan.

Answer 2

Everything you read about skinning html5 videos is valid for iPad/iPhone. The <video> element is launched in a UIWebView which is rendered by the Webkit engine (Chrome, Safari)