javascript - Controls overlay for video on iPhoneiPad - Stack Overflow

admin管理员组

文章数量:1410674

I am writing a webapp where I need to display a video and some (non standard) controls for it, which should appear in overlay. So create some divs and position them over the video, with a higher z-index.

Still, on iPhone and iPad, it appears those controls are not clickable. I register actions for the click event, but that is not fired at all when I tap on the controls. I understand I can have no control while the video is actually playing (it even goes fullscreen), but the problem is that the controls are unusable even when the video is stopped.

I have also tried to remove the controls attribute from the video, with no effect.

Is there a way to register click events for elements that are positioned over a video on iPhone/iPad?

I am writing a webapp where I need to display a video and some (non standard) controls for it, which should appear in overlay. So create some divs and position them over the video, with a higher z-index.

Still, on iPhone and iPad, it appears those controls are not clickable. I register actions for the click event, but that is not fired at all when I tap on the controls. I understand I can have no control while the video is actually playing (it even goes fullscreen), but the problem is that the controls are unusable even when the video is stopped.

I have also tried to remove the controls attribute from the video, with no effect.

Is there a way to register click events for elements that are positioned over a video on iPhone/iPad?

• javascript
• iphone
• ipad
• video
• html5-video

Share Improve this question Follow asked Nov 30, 2011 at 11:37 AndreaAndrea 20.5k2525 gold badges117117 silver badges186186 bronze badges 1

• Try adding style="pointer-events:none;" to the video element. This should make the video unclickable, and thus your buttons clickable. Not sure if it works though – Gerben Commented Nov 30, 2011 at 16:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I had the same problem and got it working by setting the CSS property of the HTML5 video element while

paused to -webkit-transform:scale(0.01);

playing to -webkit-transform:scale(1);

The problem is that the HTML5 video element on iOS seems to hijack the click events in the areas (of the elements layered on top) that are contained in the bounding box of the video element. If the bounding box is made smaller with scale(0.01) or the bounding box is pushed off the screen with translateX(-2560px), no element areas are directly above the video element and the click events will get fired.

One thing to try is to make the element with controls obstruct the whole video, not just a section of it - this will help you debug it in any case. Another approach is to use touch events instead of click events. These execute faster and are usually not over-ridden. Sample code would be helpful.

本文标签： javascriptControls overlay for video on iPhoneiPadStack Overflow