当前位置：文江博客话题详情

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

发布于 2024-08-31 08:21:44 字数 112 浏览 3 评论 0原文

有没有办法在 HTML5 视频播放器中嵌入 html 超链接（当浏览器中的 javascript 关闭时可读）？

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

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

白鸥掠海 2024-09-07 08:21:44

据推测，您正在寻找类似的内容：

<!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 浏览器
不支持视频，所以遗留
视频插件可以尝试一下，或者展示一下
向这些较旧的用户发送短信
浏览器告诉他们如何
访问视频内容。

因此，内容（示例中的标签）不是一般的故障转移 - 它仅适用于旧版浏览器。为了更优雅地处理播放错误，您需要已启用 JavaScript 并在页面上运行。

一个快速而肮脏的解决方案可能是添加带有一些文本方向的 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 函数。

希望有帮助！

最佳，

扎克

开发者，长尾视频

Presumably, you're looking for something like:

<!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>

Unfortunately, this doesn't work quite the way that you expect. Per W3C:

Content may be provided inside the
video element. User agents should not
show this content to the user; it is
intended for older Web browsers which
do not support video, so that legacy
video plugins can be tried, or to show
text to the users of these older
browsers informing them of how to
access the video contents.

Thus, the content (the tag in the example) isn't a general failover - it's just for legacy browsers. In order to handle playback errors more gracefully, you'll need to have JavaScript enabled and running on the page.

A quick and dirty solution may be to add a CSS background with some text directions, ie:

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

Unfortunately, wrapping the whole thing in an tag doesn't make it linkable - you'd still need to use an onclick function with JavaScript enabled.

Hope that helps!

Best,

Zach

Developer, LongTail Video

回复收藏 0 原文

~没有更多了~