javascript - 在 ipad 中覆盖动态插入的视频标签

Question

我目前正在开发一个支持 ipad 的视频播放器。
它更像是一个 jquery 插件。它在桌面上运行良好，我什至设法在 iPad 上添加自定义控件。
到目前为止一切顺利。
问题是我正在动态创建和插入视频元素，这让 ipad 有点困惑。我采用这种方法是因为我发现(几个小时后)如果您尝试将视频包装 ($.wrap) 到容器中，视频将会崩溃。
插入视频后，它几乎正常运行(可以播放并响应事件)，但它的位置/显示属性搞砸了:我无法在其上添加任何叠加层。这是个问题，因为我希望我的控件能够显示在视频之上。

此外，视频本身不响应正常的touchmove touchstart touchend 事件。经过一番研究后发现，如果您没有打开默认控件，视频会捕获所有事件 ( iPad touch events on <video> tag )。
我的第二个问题是，在包含默认控件之后，视频元素似乎仍然忽略了我的事件处理程序。

所以，我的问题是(都只针对 Ipad 情况):

• 您遇到过这个问题吗？当然，如果遇到过，您是如何解决的？
• 是否仅硬编码视频元素触发事件？

Answer 1

经过更多挖掘，我找到了答案。
看起来像 this stackoverflow question 中未标记的答案拿着 key 。
所以，作为 Jaffa The Cake (我非常感谢谁)说:“您可以通过提供视频元素 -webkit-transform-style:preserve-3d 来修复动态创建的视频的 z-index”，唯一的解决方法是使用 css3 属性 -webkit-transform-style: preserve-3d.
这样，就可以在视频之上放置一个叠加层，它可以处理所有事件(例如播放/暂停)。