I am facing the same problem on a project I am working right now.
Apparently the video element, on the iPad, will swallow events if you use the controls attribute. You have to provide your own controls if you want the element to respond to touch events.
I found this reason and a solution on stackOverflow.Since this is my first post on this forum I am not able to post links.So here is the solution that worked for a user named Nick
I found a pretty nice work-around. I'm using jquery, so that's one thing to keep in mind.
My issue was, I was building a Ipad web-app, with a navigation button at the bottom left (I can't give a link as it's a client project). When the user would click (tap) the button in the lower left, a drop-up menu would animate in, and then you could click the buttons in those menu's to get to deeper sub-menu's.
The problem:
any li tags (or anything for that matter) that was over the video, wouldn't be clickable, so on the pages with video, part of my tap-navigation (the part over the video wouldn't work). Reading posts here actually lead me to my solution, simple, and it may or may not work for your case, but I hope it does.
My workaround:
var myNav = $("TAG_SELECTOR_HERE");
myNav.toggle(function(){
var videos = $("video");
videos.removeAttr("controls");
},
function(){
var videos = $("video");
videos.attr("controls","true");
})
Now I know I may be missing some semi-colons, or my coding may be off, but I'm just posting for reference. Basically, when my menu is clicked, or is active, I'm removing the controls attribute from all videos, and then when the menu is deactivated, I'm bringing the controls back.
You could use this method anywhere you like...you could remove the controls after a video ends, after someone hovers over something (assuming that something isn't already over the video), when the mouse is within certain coordinates (may be your only solution in extreme cases) but this should work.
I am gonna try this solution for my project today.
sunnyM
