I have a video tag playing an mp4 movie, with some html & js controls floating on top. The controls have a few bits of interaction, and are draggable. I've hosted a stripped-down version of this in the public folder of my dropbox (so apologies for any linkrot, people of the future):
https://dl.dropboxusercontent.com/u/846812/video_test/index.html
(Note - this link won't work in firefox as firefox doesn't support mp4 playback)
This works fine in chrome, and safari on a mac, but doesn't work in Safari on my iPad 1: the html controls are unresponsive: it seems like the video "takes" all the interaction.
There's a few posts about this problem, but they generally have a subtly different requirement: that people can open a menu to do stuff, and that while the menu is open the video can be disabled, or hidden, or the native controls disabled, or something like that. That is not acceptable in this case: the html controls need to be active while the video is playing. Basically the idea is that the user can switch between different videos using the menu, and have the menu sitting on top of the video while the video is playing. Also they can maximise/minimise the html menu, and also ideally drag it around (dragging is working in chrome/safari-mac).
Here's some posts which talk about this problem (or the related problem of the html not showing up at all)
iPad Safari mobile seems to ignore z-indexing position for html5 video elements
Mobile Safari: link (<a>) element over video element does not work on click
Things i've tried based on this:
1) setting 3d style rules: z-index: 10; -webkit-transform: translateZ(0); -webkit-transform-style: preserve-3d;
I might be missing something here though.
2) bgiframe - iframe shenanigans https://github.com/brandonaaron/bgiframe
Any other ideas? Thanks! max
