Safari HTML 5视频标记在链接标记内无法正常工作

时间:2012-01-07 22:21:37

标签: html5 video safari

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

2 个答案:

答案 0 :(得分:1)

<video>元素中甚至不允许使用<a>元素。根据{{​​3}}:

  

a元素可以包裹整个段落,列表,表格等,甚至整个部分,只要 中没有交互式内容(例如按钮或其他链接)。< / p>

即使HTML5验证器说锚内的视频是有效的(暂时),我会认为视频是交互式内容,但我找不到任何具体列出HTML5中哪个元素的内容> 被视为“互动内容”。

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

无论哪种方式,我个人认为,我会考虑将一个视频放在一个锚中作为不好的做法。祝你好运。

答案 1 :(得分:0)

我在OS X上的Safari 5.1.1上为我提供了一个简单的视频,并发现poster上的<video>属性阻止它在Safari中工作,而不是{{1缠绕它。如果删除<a>属性,它在Safari上运行正常。除了删除poster属性(除了较小的poster并完全限定width所以它会起作用之外,我保持您的代码完全相同,但这两者都没有影响结果)。< / p>

另一个视频

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

src

您的视频

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

更改:

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

要:

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