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）上访问此页面并尝试点击文本字段时，我无法专注于该元素。好像有什么东西要么阻挡元素要么阻止触摸事件。放在这里的文字也是不可选择的。

相对定位表单并赋予它更高的z-index似乎没有任何影响。

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

我在iPhone 4和5上测试了这个页面，两者都运行iOS 7.0.4。

任何建议都将不胜感激。

Answer 1

不要担心更多的例子。由于Apple的限制性政策，您目前无法做到这一点。 iPhone上禁止使用“内联”视频（官方用语）。它可以在iPad上运行。有一种解决方法，但它要求网站位于容器App中。在版本3.1之前，您将在所有机器上遇到相同的问题

视频将始终在原生QuickTime播放器中播放，并且实际上覆盖了您放在其上的任何图层 - 即使您在视频暂停时能够看到它，您触摸事件通常也会被QuickTime捕获

有关详细信息，请查看我的其他答案 - 我现在正在使用我的手机...

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

1 个答案: