Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including videojs-overlay-hyperlink with all npm packages installed. Try it out:

var videojsOverlayHyperlink = require("videojs-overlay-hyperlink")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

videojs-overlay-hyperlink v1.0.1

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

videojs-overlay-hyperlink :link:

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

videojs-overlay-hyperlink

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:

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free