无法通过 iPhone 上的 HTML5 视频元素访问文本字段

Question

我正在构建一个具有完整宽度背景视频的页面。为了实现这一目标，我将视频绝对定位，将其拉伸，并给它带来负面的z索引。作为页面内容，我添加了一个表格。

<style type="text/css"></style> 
    #video-background{
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -1000;
        overflow: hidden;
    }
</style>
<video id="video-background" preload="auto" autoplay="true" muted="muted" volume="0">
    <source src="../../css/video/globe.mp4" type="video/mp4">
</video>
<form action="#">
    <input type="email" name="email" value="Enter your email address">
    <input type="submit" name="submit" value="Submit Email">
</form>

当我在iPhone（Safari）上访问此页面并尝试使用Textfield时，我无法集中精力。好像有些东西要么阻止元素或阻止触摸事件。这里放置的文字也不可选。

相对定位表格并给出更高的z指数似乎没有任何效果。

form{
    position: relative;
    z-index: 1000;
}

我已经在iPhone 4和5上测试了此页面，均运行iOS 7.0.4。

任何建议都将不胜感激。

Answer 1

不必担心更多示例。由于苹果公司的限制性政策，您尝试做的事情目前是不可能的。iPhone禁止"内联"视频（官方术语）。不过，它将在iPad上使用。有解决方法，但它要求网站在容器应用程序中使用。在3.1版

之前，您将在所有Android上遇到相同的问题

该视频将始终在本机QuickTime播放器中播放，并且确实涵盖了您放在其顶部的任何一层 - 即使您可以在视频停顿时可以看到它，但通常会被Quicktime捕获

有关更多信息，请检查我的其他答案 - 我现在正在手机上...