Safari HTML 5 视频标签在链接标签内不起作用

Posted 2023-03-12

【中文标题】Safari HTML 5 视频标签在链接标签内不起作用

【英文标题】：Safari HTML 5 video tag not working inside a link tag

【发布时间】：2012-01-07 22:21:37

【问题描述】：

问题在于 Safari。视频标签。 我在链接标签内放置了一个视频标签。 我正在尝试将视频作为链接。 它适用于除 Safari 之外的所有浏览器。 有问题的页面在这里：neumatic.com 在 Safari 中，它只会转到海报图像，但不会播放视频。 我已经尝试将链接标签进一步移动到 div 树上，但没有成功。

【参考方案1】：

在<a> 元素中甚至不允许使用<video> 元素。根据html specifications：

只要有内部没有交互内容（例如按钮或其他链接），a 元素可以环绕整个段落、列表、表格等，甚至整个部分。

尽管 HTML5 验证器表示锚点内的视频是有效的（暂时），但我会认为视频是交互式内容，但我找不到任何具体列出 HTML5 中的哪个元素的内容 被视为“交互式内容”。

如果有效：这似乎只是浏览器兼容性问题。以前，在锚点中不允许块级内容（包括视频元素）。 Safari 目前可能只是存在有关块级内容的错误或实现问题，甚至可能特定于视频元素。您必须记住，HTML5 仍然是新的并且正在开发中，您一定会在某个地方遇到一些奇怪的故障和问题。尝试使用 Safari 提交错误报告。

无论哪种方式，在我个人看来，我都认为将视频放在锚点内是不好的做法。祝你好运。

【讨论】：

来自您的链接：互动内容：(...) 视频（如果存在 controls 属性）

感谢您的回复，非常感谢。好吧，这是一个解决方法。我实际上是想在视频顶部获得一个可点击的按钮。我猜想让 div 重叠是一种方法。不过谢谢，它有帮助。

【参考方案2】：

我在 OS X 上的 Safari 5.1.1 上为我制作了一个简单的视频，发现是 <video> 上的 poster 属性阻止它在 Safari 中工作，而不是 <a> 包裹它。如果您删除 poster 属性，它在 Safari 上运行良好。除了删除 poster 属性之外，我保持您的代码完全相同（除了较小的 width 和完全限定 src 以便它可以播放，这两者都不会影响结果）。

另一个视频

演示：http://jsfiddle.net/ThinkingStiff/8vTN7/

<a href="http://thinkingstiff.com" target="_top">
<video controls="controls"  >
<source src="http://html5videoformatconverter.com/data/images/happyfit2.mp4">
</video>
</a>

您的视频

演示：http://jsfiddle.net/ThinkingStiff/cRx4a/

改变：

<video class="video-js" autoplay="" loop="" preload="" poster="_neumatic-video/neumatic-video-production-intro/neumatic-video-production_poster.jpg" id="intro">

收件人：

<video class="video-js" autoplay="" loop="" preload="" id="intro" >

【讨论】：

是的，经过长时间的试用，我也发现了这一点。谢谢！它只在此页面上执行此操作，因此它是链接标签和海报属性的组合。感谢您的帮助，这是一个很大的帮助。