控制iPhone / iPad上的视频叠加

问题描述

限时删除！！

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

但是，在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上的视频叠加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..