控制iPhone / iPad上的视频叠加 [英] Controls overlay for video on iPhone/iPad

问题描述

我正在编写一个webapp，我需要在其中显示一个视频和一些（非标准）控件，它应该以叠加方式显示。因此，创建一些div并将它们放在视频上，具有更高的z-index。

但是，在iPhone和iPad上，似乎这些控件无法点击。我为点击事件注册了操作，但是当我点击控件时，根本没有触发。我知道在视频实际播放时我无法控制（甚至全屏播放），但问题是即使视频停止，控件也无法使用。

我还尝试从视频中删除控件属性，但没有效果。

有没有注册点击被定位在用iPhone / iPad的视频元素的活动方式？

解决方案

我遇到了同样的问题，通过设置HTML5视频元素的CSS属性来实现它的工作，而

暂停到 -webkit-transform：scale（0.01）;

播放到 -webkit-transform：scale（1）;

问题是iOS上的HTML5视频元素似乎劫持了单击视频元素边界框中包含的区域（顶部分层元素）中的事件。如果边框是由具有规模（0.01）或边界盒小推离屏幕平移X（-2560px），没有元素的区域是直接的视频元素上方，单击事件将被解雇。

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

这篇关于控制iPhone / iPad上的视频叠加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！