Permalink
Cannot retrieve contributors at this time
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Set hyperlink on video overlays using video.js | Demo</title> | |
<!-- CSS for video.js and other handles styling and positioning of the overlays. --> | |
<link href="css/video-js.css" rel="stylesheet"> | |
<link href="css/videojs-overlay-hyperlink.css" rel="stylesheet"> | |
</head> | |
<body> | |
<!-- Here you can choose to customize the video player's skin and provide the source for your video playback. --> | |
<video id="videojs-overlay-player" class="video-js vjs-default-skin" controls> | |
<source src="video/oceans.mp4" type='video/mp4'> | |
</video> | |
<!-- video.js for achieveing core functionality and other js file to handle overlay behaviour --> | |
<script src="js/video.js"></script> | |
<script src="js/videojs-overlay-hyperlink.js"></script> | |
<!-- TARGET hyperlink --> | |
<script type='text/javascript'> | |
var yourLink = "https://www.google.com/search?q=documentaries+on+oceans"; | |
</script> | |
<!-- js for serving the title and positioning of the hyperlink, you can also leverage 'align' option to set it the desired position, see the style sheets for more options --> | |
<script> | |
(function(window, videojs) { | |
var player = window.player = videojs('videojs-overlay-player'); | |
player.overlay({ | |
content: '<a href=# onclick="location.href=yourLink;return false;">Checkout More Documentaries on Oceans</a>', | |
debug: true, | |
overlays: [{ | |
start: 0, | |
end: 15, | |
align: 'bottom-left' | |
}, { | |
start: 15, | |
end: 30, | |
align: 'bottom' | |
}, { | |
start: 30, | |
end: 45, | |
align: 'bottom-right' | |
}] | |
}); | |
}(window, window.videojs)); | |
</script> | |
</body> | |
</html> |