embedding hyperlinks in a HTML5 video player_问答_开发者

embedding hyperlinks in a HTML5 video player

开发者 https://www.devze.com 2022-12-30 01:39 出处：网络

Is there anyway to embed html hyperlinks (readable when javascript is off in the browser) within an HTML5 video player?

相关专题：video

Is there anyway to embed html hyperlinks (readable when javascript is off in the browser) within an HTML5 video player?

Maybe an embedded link within the video musing CSS, or a link in the title bar开发者_如何学Python?

Thanks

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