Multiple HTML5 media elements on one page in iOS (iPad)

Question

My research has led me to learn that Apple's media element handler is a singleton, meaning I can't have a video playing while an audio is playing in the background. I'm tasked to build a slideshow presentation framework and the client wants a background audio track, timed audio voice-overs which match bullet points, and variable media which can either be an image or video - or a timed cycle of multiple media elements.

Of course, none of the media works on iOS. Each media element cancels out the previous.

My initial thought is to embed the voice-over audio into the video when there's a video present, but there's an existing Flash version of this setup which depends on existing assets so I pretty much have to use what's delivered.

Is there ANY work-around for this? I'm testing on iOS 4.3.5. The smartest devs in the world are on this site - we've got to be able to come up with something.

EDIT: Updated my iPad to iOS 5.0.1 and the issue remains.

Answer 1

How about do it with CSS to do the trick.
Maybe you know about a company called vdopia that distribute video ad on mobile. http://mobile.vdopia.com/index.php?page=mobilewebsolutions
They claim to developed what so called vdo video format, that actually just to do a css sprite running on that :D
I mean you could have your "video" as a framed image, then attach html5 audio tag on there.

I would like to know your response

Answer 2

Are you working on a Web App or on a Native Application?

If you are working on a Web App you're in a world of hurt. This is because you simply do not have much control over things that Mobile Safari doesn't provide right away. If this is the case I would come forth and be honest with the stakeholders.

If you are working on a Native Application you can resort to a mechanism that involves some back and forth communication between UIWebView and ObjC. It's actually doable.

The idea is the following:

Insert special <object> elements in your HTML5 documents, that you handcraft yourself according to your needs, taking special care to maintain the attr-* naming convention for non-standard attributes. Here you could insert IDs, paths and other control variables in the multimedia artifacts that you want to play.

Then you could actually build some javascript (on top of jQuery,p.e.) that communicates with ObjC through the delegation mechanism on the UIWebView or through HTTP. I'll go over this choice down below.

Say that on $(document).ready() you go through all the objects that have a special class. A class that you carefully choose to identify all the special <object>. You build a list of such objects and pass them on to the ObjC part of your application. You could easily serialize such list using JSON. Then in ObjC you can do what you want with them. Play them through AVPlayer or some other framework whenever you want them played (again you would resort to a JS - ObjC bridge to actually signal the native part to play a particular element).

You can "communicate" with ObjC through the delegation pattern in UIWebView or through HTTP. You would then have a JS - ObjC bridge in place.

The HTTP approach makes sense in some cases but it involves a lot of extra code and is resource hungry.

If you are building an ObjC application and want further details on how to actually build an ObjC - JS bridge that fits these needs get back to us :)

I'm halting this post as of now because it would be nice to know if it is in fact a Native App.

Cheers.