video.js/docs/api/vjs.TextTrackButton.md

vjs.TextTrackButton

EXTENDS: vjs.MenuButton
DEFINED IN: src/js/tracks.js#L807

The base class for buttons that toggle specific text track types (e.g. subtitles)

---

INDEX

• METHODS

  • init
  • addChild inherited
  • addClass inherited
  • buildCSSClass inherited
  • children inherited
  • contentEl inherited
  • createEl inherited
  • createItems inherited
  • dimensions inherited
  • disable inherited
  • dispose inherited
  • el inherited
  • getChild inherited
  • getChildById inherited
  • height inherited
  • hide inherited
  • id inherited
  • initChildren inherited
  • name inherited
  • off inherited
  • on inherited
  • one inherited
  • options inherited
  • player inherited
  • ready inherited
  • removeChild inherited
  • removeClass inherited
  • show inherited
  • trigger inherited
  • triggerReady inherited
  • width inherited

• EVENTS

  • resize inherited

---

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)

inherited from: src/js/component.js#L343

---

addClass( classToAdd )

Add a CSS class name to the component's element

PARAMETERS:

• classToAdd String Classname to add

RETURNS:

• vjs.Component

inherited from: src/js/component.js#L628

---

buildCSSClass()

Allows sub components to stack CSS class names

inherited from: src/js/menu.js#L157

---

children()

Get an array of all child components

var kids = myComponent.children();

RETURNS:

• Array The children

inherited from: src/js/component.js#L277

---

contentEl()

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

RETURNS:

• Element

inherited from: src/js/component.js#L220

---

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

inherited from: src/js/component.js#L190

---

createItems()

Create the list of menu items. Specific to each subclass.

inherited from: src/js/menu.js#L154

---

dimensions( width, height )

Set both width and height at the same time

PARAMETERS:

• width Number|String
• height Number|String

RETURNS:

• vjs.Component The component

inherited from: src/js/component.js#L737

---

disable()

Disable component by making it unshowable

inherited from: src/js/component.js#L691

---

dispose()

Dispose of the component and all child components

inherited from: src/js/component.js#L74

---

el()

Get the component's DOM element

var domEl = myComponent.el();

RETURNS:

• Element

inherited from: src/js/component.js#L201

---

getChild( name )

Returns a child component with the provided name

PARAMETERS:

• name

RETURNS:

• vjs.Component

inherited from: src/js/component.js#L311

---

getChildById( id )

Returns a child component with the provided ID

PARAMETERS:

• id

RETURNS:

• vjs.Component

inherited from: src/js/component.js#L294

---

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

inherited from: src/js/component.js#L726

---

hide()

Hide the component element if currently showing

RETURNS:

• vjs.Component

inherited from: src/js/component.js#L659

---

id()

Get the component's ID

var id = myComponent.id();

RETURNS:

• String

inherited from: src/js/component.js#L239

---

init( player, options )

PARAMETERS:

• player
• options

defined in: src/js/tracks.js#L809

---

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
  }
}

inherited from: src/js/component.js#L439

---

name()

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

var name = myComponent.name();

RETURNS:

• String

inherited from: src/js/component.js#L258

---

off( [type], [fn] )

Remove an event listener from the component's element

myComponent.off("eventName", myFunc);

PARAMETERS:

• type String (OPTIONAL) Event type. Without type it will remove all listeners.
• fn Function (OPTIONAL) Event listener. Without fn it will remove all listeners for a type.

RETURNS:

• vjs.Component

inherited from: src/js/component.js#L510

---

on( type, fn )

Add an event listener to this component's element

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

myPlayer.on("eventName", myFunc);

The context will be the component.

PARAMETERS:

• type String The event type e.g. 'click'
• fn Function The event listener

RETURNS:

• vjs.Component self

inherited from: src/js/component.js#L496

---

one( type, fn )

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

PARAMETERS:

• type String Event type
• fn Function Event listener

RETURNS:

• vjs.Component

inherited from: src/js/component.js#L522

---

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

inherited from: src/js/component.js#L169

---

player()

Return the component's player

RETURNS:

• vjs.Player

inherited from: src/js/component.js#L116

---

ready( fn )

Bind a listener to the component's ready state

Different from event listeners in that if the ready event has already happend it will trigger the function immediately.

PARAMETERS:

• fn Function Ready listener

RETURNS:

• vjs.Component

inherited from: src/js/component.js#L581

---

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

inherited from: src/js/component.js#L401

---

removeClass( classToRemove )

Remove a CSS class name from the component's element

PARAMETERS:

• classToRemove String Classname to remove

RETURNS:

• vjs.Component

inherited from: src/js/component.js#L639

---

show()

Show the component element if hidden

RETURNS:

• vjs.Component

inherited from: src/js/component.js#L649

---

trigger( type, event )

Trigger an event on an element

myComponent.trigger('eventName');

PARAMETERS:

• type String The event type to trigger, e.g. 'click'
• event Event|Object The event object to be passed to the listener

RETURNS:

• vjs.Component self

inherited from: src/js/component.js#L536

---

triggerReady()

Trigger the ready listeners

RETURNS:

• vjs.Component

inherited from: src/js/component.js#L600

---

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

inherited from: src/js/component.js#L709

---

EVENTS

resize EVENT

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

inherited from: src/js/component.js#L816

---