“a”链接不适用于 iPhone Safari 中的 html5 视频标签答案

【问题标题】：'a' links are not working on html5 Video tag in iPhone Safari“a”链接不适用于 iPhone Safari 中的 html5 视频标签
【发布时间】：2011-10-30 17:35:40
【问题描述】：

我在 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>

我搜索了它，但找不到任何帮助。

提前致谢。

【问题讨论】：

标签： iphone ios html html5-video

【解决方案1】：

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

例如

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

【讨论】：

有机会发个链接吗？

【解决方案2】：

这里的问题是您的视频标签上的“控件”。在 iOS 上，虽然视频播放器设置为使用其默认控件，但它将忽略视频上的所有其他触摸/点击事件（以及来自视频顶部的任何内容）。

要使您的链接正常工作，您可以将开始视频标签替换为以下内容：

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

但这确实意味着您将不再拥有播放/暂停按钮、洗涤器等，因此您要么不使用这些按钮，要么自己动手。

【讨论】：

【解决方案3】：

尝试在视频标签中添加playsinline="playsinline" webkit-playsinline 属性：

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

【讨论】：