Question

I’m currently developing a video player with support for ipad.
It’s more of a jquery plugin. It works great on desktop and I even managed to add my custom controls on the ipad.
So far so good.
The problem is that I am creating and inserting dynamically the video element, fact that messes up the ipad a bit. I followed this approach because I found out (after a few long hours) that if you try to wrap ($.wrap) the video into a container, the video will crash.
After inserting the video, it acts almost as normal (it is playable and responds to events), but it’s position/display properties are messed up: I can’t add any overlay on top of it. This is an issue, because I want my controls to be able to be displayed on top of the video.

Moreover, the video itself does not respond to the normal touchmove touchstart touchend events. After some research, it turns out that if you do not have the default controls turned on, the video captures all the events (iPad touch events on <video> tag).
My second problem is that after including the default controls, the video element still seems to ignore my event-handlers.

So, my questions are (both only in Ipad cases):

• have you ever faced this problem, and of course if you did, how did you fix it?
• do only hard-coded video elements trigger events?

Answer 1

After some more digging I’ve found the answer.
Looks like the unmarked answer in this stackoverflow question holds the key.
So, as Jaffa The Cake (who I ow a bucket of thanks) sais : “You can fix z-index on dynamically created videos by giving the video element -webkit-transform-style: preserve-3d”, the only workaround is to use the css3 property -webkit-transform-style: preserve-3d.
This way, one can put an overlay on top of the video which can handle all the events (such as play/pause).