overlay over dynamically inserted video tag in ipad

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).

Answer 2

No Ipad can handle dynamic inserted video by Jquery, on the Ipad videos do not respond to touch or move as by default you have to click on a link like play button to trigger the video audio so you can just use Jquery to do this like below

video

var vid = $('video').get(0);

$('#someselector').click(function() {
 vid.play();

 });
$('#someselector').click(function() {
 vid.stop();

 });

audio

var aud = $('audio').get(0);

$('#someselector').click(function() {
 aud.play();

 });
$('#someselector').click(function() {
 aud.stop();

 });

Hope this helped.

Answer 3

The solution for me was to remove the controls using jQuery for all videos like this

$('video').each(function() {
    $(this).removeAttr("controls");
});

Then, the overlay elements also respond to the corresponding events. To make the video working again, I've added jquery click event that plays/pause the video:

$('video').click(function() {
    $(this).trigger('play');
});

Hope that helps.