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?
Thanks
A:
Hi Sattvic,
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
zach at longtail
2010-05-13 16:29:18