iPhone/iPad 上的视频控制叠加

Posted 2023-05-08

【中文标题】iPhone/iPad 上的视频控制叠加

【英文标题】：Controls overlay for video on iPhone/iPad

【发布时间】：2012-01-09 15:38:14

【问题描述】：

我正在编写一个 web 应用程序，我需要在其中显示视频和一些（非标准）控件，这些控件应该出现在叠加层中。所以创建一些 div 并将它们放置在视频上，具有更高的 z-index。

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

我也试过从视频中删除controls属性，没有效果。

有没有办法为 iPhone/iPad 上的视频上的元素注册点击事件？

【问题讨论】：

尝试将style="pointer-events:none;" 添加到视频元素。这应该使视频不可点击，因此您的按钮可点击。不知道它是否有效

【参考方案1】：

我遇到了同样的问题，通过设置 html5 视频元素的 CSS 属性使其正常工作

暂停到-webkit-transform:scale(0.01);

播放到-webkit-transform:scale(1);

问题在于，ios 上的 HTML5 视频元素似乎劫持了视频元素边界框中包含的区域（位于顶部的元素）中的点击事件。如果使用 scale(0.01) 使边界框变小，或者使用 translateX(-2560px) 将边界框推离屏幕，则视频元素正上方不会有任何元素区域，并且会触发点击事件。

【讨论】：

你能举个例子吗？

【参考方案2】：

要尝试的一件事是让带有控件的元素遮挡整个视频，而不仅仅是其中的一部分 - 这将有助于您在任何情况下对其进行调试。另一种方法是使用触摸事件而不是点击事件。这些执行速度更快，通常不会被覆盖。 示例代码会很有帮助。