This documentation is for an outdated version of Video.js. See documentation for the current release.

API Index

Component Methods

Class Methods

Inherited Methods from Button

Inherited Methods from ClickableComponent

Inherited Methods from Component

Component

Base UI Component class Components are embeddable UI objects that are represented by both a javascript object and an element in the DOM. They can be children of other components, and can have many children themselves.

    // adding a button to the player
    var button = player.addChild('button');
    button.el(); // -> button element
    
Button

Components are also event targets.

    button.on('click', function(){
      console.log('Button Clicked!');
    });
    button.trigger('customevent');

DEFINED IN: component.js line number: 18

EXTENDS: button.js

Constructor

Component( player,[options],[ready] )

Parameters

nameTypeRequiredDescription
playerObjectyesMain Player
optionsObjectnoObject of option names and values
readyfunctionnoReady callback function

Methods

$( selector, [context] )

Finds a single DOM element matching selector within the component's contentEl or another custom context.

Parameters

nameTypeRequiredDescription
selectorStringyesA valid CSS selector, which will be passed to querySelector.
contextElement|StringnoA DOM element within which to query. Can also be a selector string in which case the first matching element will be used as context. If missing (or no element matches selector), falls back to document.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 841

[back to top]

$$( selector, [context] )

Finds a all DOM elements matching selector within the component's contentEl or another custom context.

Parameters

nameTypeRequiredDescription
selectorStringyesA valid CSS selector, which will be passed to querySelectorAll.
contextElement|StringnoA DOM element within which to query. Can also be a selector string in which case the first matching element will be used as context. If missing (or no element matches selector), falls back to document.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 861

[back to top]

addChild( child, [options] )

Adds a child component inside this component

    myComponent.el();
    // -> 
myComponent.children(); // [empty array] var myButton = myComponent.addChild('MyButton'); // ->
myButton
// -> myButton === myComponent.children()[0];

Pass in options for child constructors and options for children of the child

    var myButton = myComponent.addChild('MyButton', {
      text: 'Press Me',
      buttonChildExample: {
        buttonChildOption: true
      }
    });

Parameters

nameTypeRequiredDescription
childString|ComponentyesThe class name or instance of a child to add
optionsObjectnoOptions, including options to be passed to children of the child.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 315

[back to top]

addClass( classToAdd )

Add a CSS class name to the component's element

Parameters

nameTypeRequiredDescription
classToAddStringyesClassname to add

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 892

[back to top]

buildCSSClass()

Allows sub components to stack CSS class names

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 593

[back to top]

children()

Get an array of all child components

    var kids = myComponent.children();

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 282

[back to top]

clearInterval( intervalId )

Clears an interval and removes the associated dispose listener

Parameters

nameTypeRequiredDescription
intervalIdNumberyesThe id of the interval to clear

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1295

[back to top]

clearTimeout( timeoutId )

Clears a timeout and removes the associated dispose listener

Parameters

nameTypeRequiredDescription
timeoutIdNumberyesThe id of the timeout to clear

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1252

[back to top]

contentEl()

Return the component's DOM element where children are inserted. Will either be the same as el() or a new element defined in createEl().

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 245

[back to top]

createEl( [tagName], [properties], [attributes] )

Create the component's DOM element

Parameters

nameTypeRequiredDescription
tagNameStringnoElement's node type. e.g. 'div'
propertiesObjectnoAn object of properties that should be set
attributesObjectnoAn object of attributes that should be set

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 208

[back to top]

dimensions( width, height )

Set both width and height at the same time

Parameters

nameTypeRequiredDescription
widthNumber|StringyesWidth of player
heightNumber|StringyesHeight of player

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1015

[back to top]

dispose()

Dispose of the component and all child components

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 101

[back to top]

el()

Get the component's DOM element

    var domEl = myComponent.el();

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 195

[back to top]

enableTouchActivity()

Report user touch activity when touch events occur User activity is used to determine when controls should show/hide. It's relatively simple when it comes to mouse events, because any mouse event should show the controls. So we capture mouse events that bubble up to the player and report activity when that happens. With touch events it isn't as easy. We can't rely on touch events at the player level, because a tap (touchstart + touchend) on the video itself on mobile devices is meant to turn controls off (and on). User activity is checked asynchronously, so what could happen is a tap event on the video turns the controls off, then the touchend event bubbles up to the player, which if it reported user activity, would turn the controls right back on. (We also don't want to completely block touch events from bubbling up) Also a touchmove, touch+hold, and anything other than a tap is not supposed to turn the controls back on on a mobile device. Here we're setting the default component behavior to report user activity whenever touch events happen, and this can be turned off by components that want touch events to act differently.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1174

[back to top]

static extend( props ) (deprecated)

Sets up the constructor using the supplied init method or uses the init of the parent object

Parameters

nameTypeRequiredDescription
propsObjectyesAn object of properties

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1350

[back to top]

getChild()

Returns a child component with the provided name

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 305

[back to top]

getChildById()

Returns a child component with the provided ID

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 295

[back to top]

static getComponent( name )

Gets a component by name

Parameters

nameTypeRequiredDescription
nameStringyesName of the component to get

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1331

[back to top]

hasClass( classToCheck )

Check if a component's element has a CSS class name

Parameters

nameTypeRequiredDescription
classToCheckStringyesClassname to check

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 881

[back to top]

height( num, [skipListeners] )

Get or set the height of the component (CSS values) Setting the video tag dimension values only works with values in pixels. Percent values will not work. Some percents can be used, but width()/height() will return the number + %, not the actual computed width/height.

Parameters

nameTypeRequiredDescription
numNumber|StringyesNew component height
skipListenersBooleannoSkip the resize event trigger

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 998

[back to top]

initChildren()

Add and initialize default child components from options

    // when an instance of MyComponent is created, all children in options
    // will be added to the instance by their name strings and options
    MyComponent.prototype.options_ = {
      children: [
        'myChildComponent'
      ],
      myChildComponent: {
        myChildOption: true
      }
    };

    // Or when creating the component
    var myComp = new MyComponent(player, {
      children: [
        'myChildComponent'
      ],
      myChildComponent: {
        myChildOption: true
      }
    });

The children option can also be an array of child options objects (that also include a 'name' key). This can be used if you have two child components of the same type that need different options.

    var myComp = new MyComponent(player, {
      children: [
        'button',
        {
          name: 'button',
          someOtherOption: true
        },
        {
          name: 'button',
          someOtherOption: false
        }
      ]
    });

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 455

[back to top]

name()

Get the component's name. The name is often used to reference the component.

    var name = myComponent.name();

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 269

[back to top]

off( first, second, [third] )

Remove an event listener from this component's element

    myComponent.off('eventType', myFunc);

If myFunc is excluded, ALL listeners for the event type will be removed. If eventType is excluded, ALL listeners will be removed from the component. Alternatively you can use off to remove listeners that were added to other elements or components using myComponent.on(otherComponent.... In this case both the event type and listener function are REQUIRED.

    myComponent.off(otherElement, 'eventType', myFunc);
    myComponent.off(otherComponent, 'eventType', myFunc);

Parameters

nameTypeRequiredDescription
firstString|ComponentyesThe event type or other component
secondfunction|StringyesThe listener function or event type
thirdfunctionnoThe listener for other component

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 680

[back to top]

on( first, second, third )

Add an event listener to this component's element

    var myFunc = function(){
      var myComponent = this;
      // Do something when the event is fired
    };

    myComponent.on('eventType', myFunc);

The context of myFunc will be myComponent unless previously bound. Alternatively, you can add a listener to another element or component.

    myComponent.on(otherElement, 'eventName', myFunc);
    myComponent.on(otherComponent, 'eventName', myFunc);

The benefit of using this over VjsEvents.on(otherElement, 'eventName', myFunc) and otherComponent.on('eventName', myFunc) is that this way the listeners will be automatically cleaned up when either component is disposed. It will also bind myComponent as the context of myFunc. NOTE: When using this on elements in the page other than window and document (both permanent), if you remove the element from the DOM you need to call myComponent.trigger(el, 'dispose') on it to clean up references to it and allow the browser to garbage collect it.

Parameters

nameTypeRequiredDescription
firstString|ComponentyesThe event type or other component
secondfunction|StringyesThe event handler or event type
thirdfunctionyesThe event handler

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 605

[back to top]

one( first, second, [third] )

Add an event listener to be triggered only once and then removed

    myComponent.one('eventName', myFunc);

Alternatively you can add a listener to another element or component that will be triggered only once.

    myComponent.one(otherElement, 'eventName', myFunc);
    myComponent.one(otherComponent, 'eventName', myFunc);

Parameters

nameTypeRequiredDescription
firstString|ComponentyesThe event type or other component
secondfunction|StringyesThe listener function or event type
thirdfunctionnoThe listener function for other component

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 728

[back to top]

options( obj )

Deep merge of options objects Whenever a property is an object on both options objects the two properties will be merged using mergeOptions.

    Parent.prototype.options_ = {
      optionSet: {
        'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
        'childTwo': {},
        'childThree': {}
      }
    }
    newOptions = {
      optionSet: {
        'childOne': { 'foo': 'baz', 'abc': '123' }
        'childTwo': null,
        'childFour': {}
      }
    }

    this.options(newOptions);

RESULT

    {
      optionSet: {
        'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
        'childTwo': null, // Disabled. Won't be initialized.
        'childThree': {},
        'childFour': {}
      }
    }

Parameters

nameTypeRequiredDescription
objObjectyesObject of new option values

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 145

[back to top]

ready( fn, sync )

Bind a listener to the component's ready state. Different from event listeners in that if the ready event has already happened it will trigger the function immediately.

Parameters

nameTypeRequiredDescription
fnfunctionyesReady listener
syncBooleanyesExec the listener synchronously if component is ready

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 787

[back to top]

static registerComponent( name, comp )

Registers a component

Parameters

nameTypeRequiredDescription
nameStringyesName of the component to register
compObjectyesThe component to register

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1314

[back to top]

removeChild( component )

Remove a child component from this component's list of children, and the child component's element from this component's element

Parameters

nameTypeRequiredDescription
componentComponentyesComponent to remove

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 415

[back to top]

removeClass( classToRemove )

Remove a CSS class name from the component's element

Parameters

nameTypeRequiredDescription
classToRemoveStringyesClassname to remove

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 904

[back to top]

setInterval( fn, interval )

Creates an interval and sets up disposal automatically.

Parameters

nameTypeRequiredDescription
fnfunctionyesThe function to run every N seconds.
intervalNumberyesNumber of ms to delay before executing specified function.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1271

[back to top]

setTimeout( fn, timeout )

Creates timeout and sets up disposal automatically.

Parameters

nameTypeRequiredDescription
fnfunctionyesThe function to run after the timeout.
timeoutNumberyesNumber of ms to delay before executing specified function.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1227

[back to top]

toggleClass( classToToggle, [predicate] )

Add or remove a CSS class name from the component's element

Parameters

nameTypeRequiredDescription
classToToggleString
predicateBoolean|functionnoCan be a function that returns a Boolean. If true, the class will be added; if false, the class will be removed. If not given, the class will be added if not present and vice versa.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 916

[back to top]

trigger( event, [hash] )

Trigger an event on an element

    myComponent.trigger('eventName');
    myComponent.trigger({'type':'eventName'});
    myComponent.trigger('eventName', {data: 'some data'});
    myComponent.trigger({'type':'eventName'}, {data: 'some data'});

Parameters

nameTypeRequiredDescription
eventEvent|Object|StringyesA string (the type) or an event object with a type attribute
hashObjectnodata hash to pass along with the event

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 768

[back to top]

width( num, skipListeners )

Set or get the width of the component (CSS values) Setting the video tag dimension values only works with values in pixels. Percent values will not work. Some percents can be used, but width()/height() will return the number + %, not the actual computed width/height.

Parameters

nameTypeRequiredDescription
numNumber|StringyesOptional width number
skipListenersBooleanyesSkip the 'resize' event trigger

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 981

[back to top]

handleKeyPress()

Handle KeyPress (document level) - Extend with specific functionality for button

Defined in https://github.com/videojs/video.js/blob/master/src/js/button.js line number: 74

[back to top]

controlText( el )

create control text

Parameters

nameTypeRequiredDescription
elElementyesParent element for the control text

Defined in https://github.com/videojs/video.js/blob/master/src/js/clickable-component.js line number: 65

[back to top]

handleClick()

Handle Click - Override with specific functionality for component

Defined in https://github.com/videojs/video.js/blob/master/src/js/clickable-component.js line number: 132

[back to top]

handleFocus()

Handle Focus - Add keyboard functionality to element

Defined in https://github.com/videojs/video.js/blob/master/src/js/clickable-component.js line number: 139

[back to top]