Skip to content
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
Cannot retrieve contributors at this time
<!doctype html>
<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">
<!-- 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.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 = "";
<!-- 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 -->
(function(window, videojs) {
var player = window.player = videojs('videojs-overlay-player');
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));