Skip to content
Permalink
master
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?

videojs-overlay-hyperlink/index.html

Go to file
 
 
Cannot retrieve contributors at this time
49 lines (46 sloc) 1.71 KB
Raw Blame
Open in GitHub Desktop
<!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>