videojs-overlay-hyperlink

A simple video.js plugin to display hyperlinks during video playback using overlays. The plugin is built on a popular video.js plugin called videojs-overlay.

Static Preview

Live Demo: Link

Download

Click here to download videojs-overlay-hyperlink or git clone it into your production directory.

git clone https://github.com/anuditverma/videojs-overlay-hyperlink.git

Getting Started

First of all, import the plugin’s javascript and CSS files into your webpage.

<!-- js -->
<script src="path/to/js/video.js"></script>
<script src="path/to/js/videojs-overlay-hyperlink.js"></script>

<!-- css -->
<link href="path/to/css/video-js.css" rel="stylesheet">
<link href="path/to/videojs-overlay-hyperlink.css" rel="stylesheet">

After importing, your HTML document should look something like this.

Define Hyperlink

Add another javascript to define your target hyperlink, just assign yourLink variable with your preferred value.

<script type='text/javascript'>
  var yourLink = "https://www.google.com/search?q=documentaries+on+oceans";
</script>

Configure Setup

This is the main section of your setup. Here you can configure the positioning and duration of the hyperlink.

<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>

Meaning of the plugin options:

`content`

Type: String, Element, DocumentFragment Default: "This overlay will show up while the video is playing"

This setting can be overridden by being set on individual overlay objects.

The default HTML that the overlay includes.

`overlays`

Type: Array Default: an array with a single example overlay

An array of overlay objects. Here you can define your hyperlink name, and this overlay object should consist of:

start (String or Number): When to show the overlay. If its value is a string, it is understood as the name of an event. If it is a number (in seconds), the overlay will be shown when that moment in the playback timeline is passed.
end (String or Number): When to hide the overlay. The values of this property have the same semantics as start.

`align`

Type: String Default: "top-left"

This setting can be overridden by being set on individual overlay objects.

Where to display overlays, by default. Assuming the included stylesheet is used, the following values are supported: "top-left", "top", "top-right", "right", "bottom-right", "bottom", "bottom-left", "left".