Question

我在Safari浏览器中为我的移动网站使用html5视频标签。视频代码工作正常但我也有一些'a'链接重叠在该视频上。我添加了绝对位置的链接。当我点击链接时，它们无法正常工作。

有人对此有任何解决方案吗？

这是我的代码：

CSS: .absDiv{
    background: #fff; position: absolute; top: 90px; left: 30px; padding: 4px; z-index:9999; font-size: 1.2em;
}

HTML: 
<div style="border: 1px solid #f00; position: relative;">

<div class="absDiv">I am <a href="http://www.google.co.in/">absolute</a> positioned div</div>

<video width="320" height="240"  autoplay="autoplay" loop="loop" controls="controls" tabindex="0">
    <source src="video1.ogv" /> 
    <source src="video1.mp4" />     
</video>

</div>

我用谷歌搜索但找不到任何帮助。

提前致谢。

Answer 1

此处的问题是视频标记上的“控件”。在iOS上，当视频播放器设置为使用其默认控件时，它将忽略视频上的所有其他触摸/点击事件（以及视频顶部的任何内容）。

要使您的链接正常工作，您可以使用以下内容替换您的开场视频代码：

<video width="320" height="240"  autoplay="autoplay" loop="loop" tabindex="0">

但这确实意味着你将不再拥有播放/暂停按钮，擦洗器等，所以你要么不需要这些按钮，要么自己滚动。

Answer 2

您是否尝试将锚标记的z-index设置为高于视频标记？

所以例如

a{position:absolute; top:whatever; left:whatever; z-index:10;}
video{position:relative; z-index:1;}

Answer 3

尝试将playsinline =“ playsinline” webkit-playsinline属性添加到视频标签：

<video src="..." playsinline="playsinline" webkit-playsinline></video>

'a'链接无法在iPhone Safari中使用html5视频标记

3 个答案: