videojs-overlay-hyperlink 🔗

A simple video.js plugin to display hyperlinks during video playback using overlays.

This plugin is built upon 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

The main section of your setup, where 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".

See also:

• Highly customizable video player framework, video.js.
• Similar video.js plugins and skins.