Video overlay control on iPhone / iPad

Question

I am writing a webapp where I need to display a video and some (non-standard) controls for it that should be displayed in the overlay. So create some divs and place them on top of the video with a higher z-index.

However, on the iPhone and iPad it seems that these controls are not clickable. I register actions for the click event, but this does not fire at all when I click on the controls. I understand that I can’t control while the video is actually playing (it even goes into full screen mode), but the problem is that the controls are unusable even when the video is stopped.

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

Is there a way to register click events for items located above the video on the iPhone / iPad?

Answer 1

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

suspended until -webkit-transform:scale(0.01);

play before -webkit-transform:scale(1);

The problem is that the HTML5 video element on iOS seems to capture click events in areas (from the layers located above) that are contained in the bounding box of the video element. If the bounding box is scaled down (0.01) or the bounding box is moved off the screen using translateX (-2560px), no areas of the elements are located directly above the video element and click events will be triggered.

Answer 2

One thing to try and make an element with an obstacle control for the entire video, and not just a part of it - this will help you debug it anyway. Another approach is to use touch events instead of click events. They run faster and are usually not overloaded. Sample code would be helpful.