vjs.Component

EXTENDS: vjs.CoreObject
DEFINED IN: src/js/component.js#L35

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

<div class="video-js">
  <div class="vjs-button">Button</div>
</div>

Components are also event emitters.

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

button.trigger('customevent');

INDEX

METHODS
- addChild
- addClass
- buildCSSClass
- children
- clearInterval
- clearTimeout
- contentEl
- createEl
- dimensions
- dispose
- el
- enableTouchActivity
- getChild
- getChildById
- hasClass
- height
- hide
- id
- init
- initChildren
- name
- off
- on
- one
- options
- player
- ready
- removeChild
- removeClass
- setInterval
- setTimeout
- show
- trigger
- triggerReady
- width
EVENTS
- resize

METHODS

addChild( child, [options] )

Adds a child component inside this component

myComponent.el();
// -> <div class='my-component'></div>
myComonent.children();
// [empty array]

var myButton = myComponent.addChild('MyButton');
// -> <div class='my-component'><div class="my-button">myButton<div></div>
// -> myButton === myComonent.children()[0];

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

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

PARAMETERS:

child String|vjs.Component The class name or instance of a child to add
options Object (OPTIONAL) Options, including options to be passed to children of the child.

RETURNS:

vjs.Component The child component (created by this process if a string was used)

defined in: src/js/component.js#L362

addClass( classToAdd )

Add a CSS class name to the component's element

PARAMETERS:

classToAdd String Classname to add

RETURNS:

vjs.Component

defined in: src/js/component.js#L826

buildCSSClass()

Allows sub components to stack CSS class names

RETURNS:

String The constructed class name

defined in: src/js/component.js#L536

children()

Get an array of all child components
var kids = myComponent.children();

RETURNS:

Array The children

defined in: src/js/component.js#L296

clearInterval( intervalId )

Clears an interval and removes the associated dispose listener

PARAMETERS:

intervalId Number The id of the interval to clear

RETURNS:

Number Returns the interval ID

defined in: src/js/component.js#L1219

clearTimeout( timeoutId )

Clears a timeout and removes the associated dispose listener

PARAMETERS:

timeoutId Number The id of the timeout to clear

RETURNS:

Number Returns the timeout ID

defined in: src/js/component.js#L1181

contentEl()

Return the component's DOM element for embedding content. Will either be el_ or a new element defined in createEl.

RETURNS:

Element

defined in: src/js/component.js#L239

createEl( [tagName], [attributes] )

Create the component's DOM element

PARAMETERS:

tagName String (OPTIONAL) Element's node type. e.g. 'div'
attributes Object (OPTIONAL) An object of element attributes that should be set on the element

RETURNS:

Element

defined in: src/js/component.js#L200

dimensions( width, height )

Set both width and height at the same time

PARAMETERS:

width Number|String
height Number|String

RETURNS:

vjs.Component The component

defined in: src/js/component.js#L938

dispose()

Dispose of the component and all child components

defined in: src/js/component.js#L84

el()

Get the component's DOM element
var domEl = myComponent.el();

RETURNS:

Element

defined in: src/js/component.js#L220

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: src/js/component.js#L1120

getChild( name )

Returns a child component with the provided name

PARAMETERS:

name

RETURNS:

vjs.Component

defined in: src/js/component.js#L330

getChildById( id )

Returns a child component with the provided ID

PARAMETERS:

id

RETURNS:

vjs.Component

defined in: src/js/component.js#L313

hasClass( classToCheck )

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

PARAMETERS:

classToCheck String Classname to check

RETURNS:

vjs.Component

defined in: src/js/component.js#L816

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:

num Number|String (OPTIONAL) New component height
skipListeners Boolean (OPTIONAL) Skip the resize event trigger

RETURNS:

vjs.Component This component, when setting the height
Number|String The height, when getting

defined in: src/js/component.js#L927

hide()

Hide the component element if currently showing

RETURNS:

vjs.Component

defined in: src/js/component.js#L857

id()

Get the component's ID
var id = myComponent.id();

RETURNS:

String

defined in: src/js/component.js#L258

init( player, options, ready )

the constructor function for the class

PARAMETERS:

player
options
ready

defined in: src/js/component.js#L41

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: {
    myChildOption: true
  }
}

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

The children option can also be an Array of child names or child options objects (that also include a 'name' key).

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

defined in: src/js/component.js#L481

name()

Get the component's name. The name is often used to reference the component.
var name = myComponent.name();

RETURNS:

String

defined in: src/js/component.js#L277

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:

first String|vjs.Component (OPTIONAL) The event type or other component
second Function|String (OPTIONAL) The listener function or event type
third Function (OPTIONAL) The listener for other component

RETURNS:

vjs.Component

defined in: src/js/component.js#L646

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 vjs.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 vjs.trigger(el, 'dispose') on it to clean up references to it and allow the browser to garbage collect it.

PARAMETERS:

first String|vjs.Component The event type or other component
second Function|String The event handler or event type
third Function The event handler

RETURNS:

vjs.Component self

defined in: src/js/component.js#L577

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:

first String|vjs.Component The event type or other component
second Function|String The listener function or event type
third Function (OPTIONAL) The listener function for other component

RETURNS:

vjs.Component

defined in: src/js/component.js#L691

options( obj )

Deep merge of options objects

Whenever a property is an object on both options objects the two properties will be merged using vjs.obj.deepMerge.

This is used for merging options for child components. We want it to be easy to override individual options on a child component without having to rewrite all the other default options.
Parent.prototype.options_ = {
  children: {
    'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
    'childTwo': {},
    'childThree': {}
  }
}
newOptions = {
  children: {
    'childOne': { 'foo': 'baz', 'abc': '123' }
    'childTwo': null,
    'childFour': {}
  }
}

this.options(newOptions);
RESULT
{
  children: {
    'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
    'childTwo': null, // Disabled. Won't be initialized.
    'childThree': {},
    'childFour': {}
  }
}

PARAMETERS:

obj Object Object of new option values

RETURNS:

Object A NEW object of this.options_ and obj merged

defined in: src/js/component.js#L179

player()

Return the component's player

RETURNS:

vjs.Player

defined in: src/js/component.js#L126

ready( fn )

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:

fn Function Ready listener

RETURNS:

vjs.Component

defined in: src/js/component.js#L769

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:

component vjs.Component Component to remove

defined in: src/js/component.js#L420

removeClass( classToRemove )

Remove a CSS class name from the component's element

PARAMETERS:

classToRemove String Classname to remove

RETURNS:

vjs.Component

defined in: src/js/component.js#L837

setInterval( fn, interval )

Creates an interval and sets up disposal automatically.

PARAMETERS:

fn Function The function to run every N seconds.
interval Number Number of ms to delay before executing specified function.

RETURNS:

Number Returns the interval ID

defined in: src/js/component.js#L1198

setTimeout( fn, timeout )

Creates timeout and sets up disposal automatically.

PARAMETERS:

fn Function The function to run after the timeout.
timeout Number Number of ms to delay before executing specified function.

RETURNS:

Number Returns the timeout ID

defined in: src/js/component.js#L1158

show()

Show the component element if hidden

RETURNS:

vjs.Component

defined in: src/js/component.js#L847

trigger( event )

Trigger an event on an element

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

PARAMETERS:

event Event|Object|String A string (the type) or an event object with a type attribute

RETURNS:

vjs.Component self

defined in: src/js/component.js#L724

triggerReady()

Trigger the ready listeners

RETURNS:

vjs.Component

defined in: src/js/component.js#L788

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:

num Number|String (OPTIONAL) Optional width number
skipListeners Boolean Skip the 'resize' event trigger

RETURNS:

vjs.Component This component, when setting the width
Number|String The width, when getting

defined in: src/js/component.js#L910

EVENTS

resize `EVENT`

Fired when the width and/or height of the component changes

defined in: src/js/component.js#L1020

Files

vjs.Component.md

Latest commit

History

vjs.Component.md

File metadata and controls

vjs.Component

INDEX

METHODS

addChild( child, [options] )

PARAMETERS:

RETURNS:

addClass( classToAdd )

PARAMETERS:

RETURNS:

buildCSSClass()

RETURNS:

children()

RETURNS:

clearInterval( intervalId )

PARAMETERS:

RETURNS:

clearTimeout( timeoutId )

PARAMETERS:

RETURNS:

contentEl()

RETURNS:

createEl( [tagName], [attributes] )

PARAMETERS:

RETURNS:

dimensions( width, height )

PARAMETERS:

RETURNS:

dispose()

el()

RETURNS:

enableTouchActivity()

getChild( name )

PARAMETERS:

RETURNS:

getChildById( id )

PARAMETERS:

RETURNS:

hasClass( classToCheck )

PARAMETERS:

RETURNS:

height( [num], [skipListeners] )

PARAMETERS:

RETURNS:

hide()

RETURNS:

id()

RETURNS:

init( player, options, ready )

PARAMETERS:

initChildren()

name()

RETURNS:

off( [first], [second], [third] )

PARAMETERS:

RETURNS:

on( first, second, third )

PARAMETERS:

RETURNS:

one( first, second, [third] )

PARAMETERS:

RETURNS:

options( obj )

PARAMETERS:

RETURNS:

player()

RETURNS:

ready( fn )

PARAMETERS:

RETURNS:

removeChild( component )

PARAMETERS:

removeClass( classToRemove )

PARAMETERS:

RETURNS:

resize `EVENT`