videojs-overlay

    2.1.5 • Public • Published

    videojs-overlay

    Build Status Greenkeeper badge Slack Status

    NPM

    A plugin to display simple overlays - similar to YouTube's "Annotations" feature in appearance - during video playback.

    Note: This meaning of an "overlay" is distinct from that of a modal dialog, which can overlay the entire player. This is built into video.js as the ModalDialog component.

    Maintenance Status: Stable

    Getting Started

    Once you've added the plugin script to your page, you can use it with any video:

    <script src="path/to/videojs-overlay.js"></script>
    <script>
      videojs(document.querySelector('video')).overlay();
    </script>

    There's also a working example of the plugin you can check out if you're having trouble.

    Documentation

    Plugin Options

    You may pass in an options object to the plugin upon initialization. This object may contain any of the following properties:

    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".

    showBackground

    Type: Boolean Default: true

    This setting can be overridden by being set on individual overlay objects.

    Whether or not to include background styling & padding around the overlay.

    attachToControlBar

    Type: Boolean, String Default: false

    This setting can be overridden by being set on individual overlay objects.

    If set to true or a string value, bottom aligned overlays will adjust positioning when the control bar minimizes. This has no effect on overlays that are not aligned to bottom, bottom-left, or bottom-right. For use with the default control bar, it may not work for custom control bars.

    The value of string must be the name of a ControlBar component.

    Bottom aligned overlays will be inserted before the specified component. Otherwise, bottom aligned overlays are inserted before the first child component of the ControlBar. All other overlays are inserted before the ControlBar component.

    class

    Type: String Default: ""

    This setting can be overridden by being set on individual overlay objects.

    A custom HTML class to add to each overlay element.

    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. An 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, 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.

    And it can optionally include align, class, and/or content to override top-level settings.

    All properties are currently optional. That is, you may leave start or end off and the plugin will not complain, but you should always pass a start and an end. This will be required in a future release.

    Examples

    You can setup overlays to be displayed when particular events are emitted by the player, including your own custom events:

    player.overlay({
      overlays: [{
    
        // This overlay will appear when a video is playing and disappear when
        // the player is paused.
        start: 'playing',
        end: 'pause'
      }, {
    
        // This overlay will appear when the "custom1" event is triggered and
        // disappear when the "custom2" event is triggered.
        start: 'custom1',
        end: 'custom2'
      }]
    });

    Multiple overlays can be displayed simultaneously. You probably want to specify an alignment for one or more of them so they don't overlap:

    player.overlay({
      overlays: [{
    
        // This overlay appears at 3 seconds and disappears at 15 seconds.
        start: 3,
        end: 15
      }, {
    
        // This overlay appears at 7 seconds and disappears at 22 seconds.
        start: 7,
        end: 22,
        align: 'bottom'
      }]
    });

    Install

    npm i videojs-overlay

    DownloadsWeekly Downloads

    2,613

    Version

    2.1.5

    License

    Apache-2.0

    Unpacked Size

    176 kB

    Total Files

    18

    Last publish

    Collaborators

    • a_castillo_h
    • salleko
    • aperezbrightcove
    • jack.terranova
    • ireyes94
    • brightcove-admin
    • gkatsev
    • tedk
    • abradley-brightcove
    • bc-alive
    • ytaye
    • misteroneill
    • mrocajr
    • forbesjo
    • brandonocasey
    • gesinger
    • lasanchezc
    • apadhye
    • marguinbc
    • brightcove-user
    • kmason
    • tomruggs
    • bsahlas
    • cbarstow
    • hikeh
    • myerramalla
    • pdias
    • misterben
    • twalling
    • jwhisenant
    • mjneil
    • abarstow
    • jordanramey
    • rtezera1
    • tfelippe
    • rjune
    • larsmaultsby
    • amanningbcov
    • jonbwalsh
    • khaipham
    • wswanbeck
    • mjholland
    • gastafurov
    • adalwani
    • revinkey
    • ekelson-bcove
    • syseng
    • bc_rpeck
    • zhongqil
    • mcarreiro
    • elbadawimustafa
    • asinclair
    • jedwards53
    • hwoodbury
    • jcapitao
    • jblaker
    • mdeltorob
    • bcmauleon
    • paco_oblea_bc
    • jsepulveda
    • dchavez
    • bzhang-bcov
    • biswaranjan
    • barroyo
    • jgouveia
    • bmartinez
    • tteixeira
    • bc-jcarlson
    • eledezma
    • jcueto
    • erodrigues
    • psousa
    • acruzr
    • sgopalakrishna
    • egoulding
    • marcogaray
    • ipadilla
    • jorduno
    • diegocruz1991
    • javibright
    • bcpsalas
    • etobin
    • ackbabe
    • cvillasenor
    • vchistyakov
    • omartinez
    • mgonzalez_bc
    • pdohertybcov
    • muthukumar.bc
    • dmkelly
    • bzizmond
    • jmpmacedo
    • scorreia
    • lescorcio
    • cavieira
    • mbalasubramaniam
    • arunjeyaprasad
    • bvilvanathan
    • anand.gangadharan
    • rahul.yadav
    • rociosantos
    • fdelgado_bc
    • syurishi
    • agarciabcov
    • priyadharsshini
    • attinder
    • quillad
    • vnavarro
    • lauralopez
    • granganathan
    • skumar85
    • hrodriguez2
    • nhaseena.mohamed
    • jasilvaantonio
    • palvarezbc
    • ericramos
    • carlosabajo
    • tomson.george
    • ingrid.s.cruz
    • hkanagarajan
    • jcarfagno-bc
    • luis_fernando_lopez_ruiz
    • vishal64
    • sarathy.a
    • geethu.karthik
    • esvarez
    • tresa.baji
    • chaselounge
    • yhernandez01
    • luis.garcia.brightcove
    • rodrigofdz
    • pgutierrezgil
    • harish17
    • jjeyaprakash
    • rrajendran1698
    • jlomeli
    • jhurtado
    • lgudino
    • sjimenez
    • rwenger_brightcove
    • rujordan
    • brivn
    • eperez-bc
    • stuartmh
    • jherrerabcov
    • mshiwal
    • jmartinezbrightcove
    • divyaudhayakumar
    • ptamizh
    • akamalakkannan
    • luiscruzbc
    • dflores
    • akatare
    • roman-bc
    • hugo.schoch.bc
    • alexbrightcove
    • chrislarocque
    • tnwanna
    • neethu.n
    • bsahlas.npm
    • dherrera1109
    • hswaminathan
    • lramirez-bc
    • hatondo-bcov
    • echengbc
    • sbarrettbc
    • dmlap