Normal Programming Mistake

    videojs-bug

    1.0.0-rc.3 • Public • Published

    videojs-bug

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

    Example screenshot:

    Example Bug Screenshot

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

    Conan Typing

    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 <john.danek@teamcoco.com>

    Install

    npm i videojs-bug

    DownloadsWeekly Downloads

    9

    Version

    1.0.0-rc.3

    License

    MIT

    Last publish

    Collaborators

    • teamcoco-staff