videojs-bug

Adds a logo bug to your videojs player with adjustable position, size, link, and opacity.

Example screenshot:

Originally brought to you by Team Coco. Yep, Conan has really been getting into JavaScript lately.

Installation

npm install --save videojs-bug

Example

<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-bug.min.js"></script>
<script>
  var player = videojs('my-video');

  player.bug({
    height: 50,
    imgSrc: 'http://cdn.teamcococdn.com/image/frame:1/teamcoco_twitter_128x128.png',
    link: "http://www.teamcoco.com",
    opacity: 0.5,
    padding: '8px',
    position: 'br',
    width: 50
  });
</script>

Options

height (integer)

Desired height of your bug. If not provided, original img height is used.

imgSrc (String, mandatory)

URL to the image you wish to use as a bug.

link (String)

URL that you would like to use as the <a>'s href value. If left blank, no <a> is used.

opacity (double)

Number between 0 and 1 used for the bug's opacity. Defaults to 0.7.

padding (String)

Padding string set on the bug. Accepts any valid CSS padding value. Defaults to '0px'.

position (String)

Where you want the bug to be placed within the videojs player. Valid values are:

• 'tl' (top left)
• 'tr' (top right)
• 'bl' (bottom left)
• 'br' (bottom right)

Any other value is changed to the default value 'br'.

width (integer)

Desired height of your bug. If not provided, original img width is used.

Usage

To include videojs-bug on your website or web application, use any of the following methods.

<script> Tag

This is the simplest case. Get the script in whatever way you prefer and include the plugin after you include video.js, so that the videojs global is available.

<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-bug.min.js"></script>
<script>
  var player = videojs('my-video');


  player.bug({
    height: 50,
    imgSrc: 'http://cdn.teamcococdn.com/image/frame:1/teamcoco_twitter_128x128.png',
    link: "http://www.teamcoco.com",
    opacity: 0.5,
    padding: '8px',
    position: 'br',
    width: 50
  });
</script>

Browserify

When using with Browserify, install videojs-bug via npm and require the plugin as you would any other module.

var videojs = require('video.js');

// The actual plugin function is exported by this module, but it is also
// attached to the `Player.prototype`; so, there is no need to assign it
// to a variable.
require('videojs-bug');

var player = videojs('my-video');

player.bug({
  height: 50,
  imgSrc: 'http://cdn.teamcococdn.com/image/frame:1/teamcoco_twitter_128x128.png',
  link: "http://www.teamcoco.com",
  opacity: 0.5,
  padding: '8px',
  position: 'br',
  width: 50
});

RequireJS/AMD

When using with RequireJS (or another AMD library), get the script in whatever way you prefer and require the plugin as you normally would:

require(['video.js', 'videojs-bug'], function(videojs) {
  var player = videojs('my-video');

  player.bug({
    height: 50,
    imgSrc: 'http://cdn.teamcococdn.com/image/frame:1/teamcoco_twitter_128x128.png',
    link: "http://www.teamcoco.com",
    opacity: 0.5,
    padding: '8px',
    position: 'br',
    width: 50
  });
});

License

MIT. Copyright (c) johndanek <[email protected]>