控制覆盖在iPhone/iPad上的视频

Controls overlay for video on iPhone/iPad

本文关键字：iPad 的视频 iPhone 覆盖 控制      更新时间：2023-09-26

我正在写一个web应用程序，我需要显示一个视频和一些(非标准)控件，它应该出现在覆盖。因此，创建一些div并将它们放置在视频上方，使用更高的z-index。

不过，在iPhone和iPad上，这些控件似乎是不可点击的。我为click事件注册了操作，但是当我点击控件时根本不会触发操作。我知道我可以没有控制，而视频实际上正在播放(它甚至全屏)，但问题是，控制是不可用的，即使视频被停止。

我还试图从视频中删除controls属性，但没有效果。

是否有一种方法来注册点击事件的元素，定位在iPhone/iPad上的视频?

我有同样的问题，并通过设置HTML5视频元素的CSS属性而使其工作，而

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

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

问题在于iOS上的HTML5视频元素似乎劫持了视频元素边界框中包含的区域(顶层元素的区域)中的点击事件。如果使用缩放(0.01)将边界框缩小，或者使用translateX(-2560px)将边界框推出屏幕，则没有元素区域直接位于视频元素上方，并且点击事件将被触发。

要尝试的一件事是使带有控件的元素阻塞整个视频，而不仅仅是其中的一部分-这将有助于您在任何情况下调试它。另一种方法是使用触摸事件而不是点击事件。它们执行得更快，而且通常不会被重写。示例代码会有所帮助。

相关文章：