View on GitHub

VideoJS Endcards

Simple, customizable end card solution for VideoJS.

Download this project as a .zip file Download this project as a tar.gz file

Skip to the end to see the end card:

Note: if you can't skip, refresh and try again

This plugin adds an end card container, which shows/hides based on the VideoJS's playing and ended events. By implementing the getRelatedContent function, it can display thumbnails for content your users might be interested in, and you can implement the getNextVid function to drive your users to a page after x amount of seconds.

The plugin is unopiniated on what kind of markup your thumbnails have - it just takes whatever you give it and appends it to the corresponding container div.

Clone the repo and take a look!

Getting Started

<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<link href="http://theonion.github.io/videojs-endcard/stylesheets/videojs.endcard.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
<script src="http://theonion.github.io/videojs-endcard/javascripts/videojs.endcard.js"></script>
<script>
// Sync or Async, you decide.
function getRelatedContent(callback) {
    var div = document.createElement('div');
    var p = document.createElement('p');
    p.innerHTML = "So Cool You'll HAVE to Click This!";
    div.appendChild(p);
    setTimeout(function(){
        // Needs an array
        callback([div]);
    }, 0);
}

function getNextVid(callback) {
    var div = document.createElement('div');
    var anchor = document.createElement('a');
    anchor.innerHTML = "Users will be taken to the VideoJS website after 10 seconds!"
    anchor.href = "http://www.videojs.com/"
    div.appendChild(anchor)
    setTimeout(function(){
        callback(div);
    }, 0);
}

var video = videojs('video');
video.endcard({
    getRelatedContent: getRelatedContent,
//  getNextVid: getNextVid    //uncomment this for auto-playing video
})
</script>

Styling

Check out videojs.endcard.less for ideas on how to style the endcard. The default id's are in the options.

Options

Functions:

getRelatedContent : Required for display of related content. It must invoke the callback function, which takes an array of DOM Elements and appends them to the "related-content" container.

getNextVid : Required for autoplaying video. It must invoke the callback function, which takes a single DOM Element and appends it to the "next-video" container. When the countdown ends, the user is taken to the first anchor href that is found in the DOM Element passed to the callback function.

Styling Stuff: