在 HTML5 视频播放器中嵌入超链接答案

【问题标题】：embedding hyperlinks in a HTML5 video player在 HTML5 视频播放器中嵌入超链接
【发布时间】：2010-05-07 16:36:05
【问题描述】：

是否有在 HTML5 视频播放器中嵌入 html 超链接（在浏览器中关闭 javascript 时可读）？

可能是视频中使用 CSS 的嵌入链接，或者是标题栏中的链接？

谢谢

【问题讨论】：

【解决方案1】：

大概，您正在寻找类似的东西：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video controls='true'>
<source src='video.ogv' type='video/ogg'>
<a href='http://www.google.com'> test link</a>
</video>
</body>
</html>

不幸的是，这并不像您期望的那样工作。每W3C：

内容可以在视频元素。用户代理不应该向用户显示此内容；这是适用于较旧的 Web 浏览器不支持视频，所以遗留视频插件可以尝试，或者显示给这些老年人的用户发短信浏览器通知他们如何访问视频内容。

因此，内容（示例中的标记）不是一般的故障转移 - 它仅适用于旧版浏览器。为了更优雅地处理播放错误，you'll need to have JavaScript enabled and running on the page.

一个快速而肮脏的解决方案可能是添加带有一些文本方向的 CSS 背景，即：

<video controls='true' style="background-image:url(image.png);width:420px;height:300px">
<source src='video.ogv' type='video/ogg'>
<a href='http://www.google.com'> test link</a>
</video>

不幸的是，将整个内容包装在标签中并不能使其可链接 - 您仍然需要使用启用 JavaScript 的 onclick 函数。

希望有帮助！

最好的，

扎克

开发者，长尾视频

【讨论】：