docs/legacy-docs/api/volume-bar.html
This documentation is for an outdated version of Video.js. See documentation for the current release.
The bar that contains the volume level and can be clicked on to adjust the level
DEFINED IN: volume-bar.js line number: 11
EXTENDS: slider.js
VolumeBar( player,[options] )
| name | Type | Required | Description |
|---|---|---|---|
| player | Player | Object | |
| options | Object |
Create the component's DOM element
Get percent of volume level
Handle mouse move on volume bar
Decrease volume level for keyboard users
Increase volume level for keyboard users
Update ARIA accessibility attributes
Calculate distance for slider
| name | Type | Required | Description |
|---|---|---|---|
| event | Object | yes | Event object |
Defined in https://github.com/videojs/video.js/blob/master/src/js/slider/slider.js line number: 149
Handle on blur for slider
Defined in https://github.com/videojs/video.js/blob/master/src/js/slider/slider.js line number: 188
Listener for click events on slider, used to prevent clicks from bubbling up to parent elements like button menus.
| name | Type | Required | Description |
|---|---|---|---|
| event | Object | yes | Event object |
Defined in https://github.com/videojs/video.js/blob/master/src/js/slider/slider.js line number: 197
Handle on focus for slider
Defined in https://github.com/videojs/video.js/blob/master/src/js/slider/slider.js line number: 163
Handle key press for slider
| name | Type | Required | Description |
|---|---|---|---|
| event | Object | yes | Event object |
Defined in https://github.com/videojs/video.js/blob/master/src/js/slider/slider.js line number: 172
Handle mouse down on slider
| name | Type | Required | Description |
|---|---|---|---|
| event | Object | yes | Mouse down event object |
Defined in https://github.com/videojs/video.js/blob/master/src/js/slider/slider.js line number: 64
Handle mouse up on Slider
Defined in https://github.com/videojs/video.js/blob/master/src/js/slider/slider.js line number: 92
Update slider
Defined in https://github.com/videojs/video.js/blob/master/src/js/slider/slider.js line number: 111
Get/set if slider is horizontal for vertical
| name | Type | Required | Description |
|---|---|---|---|
| bool | Boolean | yes | True if slider is vertical, false is horizontal |
Defined in https://github.com/videojs/video.js/blob/master/src/js/slider/slider.js line number: 209
Finds a single DOM element matching selector within the component's contentEl or another custom context.
| name | Type | Required | Description |
|---|---|---|---|
| selector | String | yes | A valid CSS selector, which will be passed to querySelector. |
| context | Element | String | no |
Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 841
Finds a all DOM elements matching selector within the component's contentEl or another custom context.
| name | Type | Required | Description |
|---|---|---|---|
| selector | String | yes | A valid CSS selector, which will be passed to querySelectorAll. |
| context | Element | String | no |
Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 861
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
}
});ParametersnameTypeRequiredDescriptionchildString|ComponentyesThe class name or instance of a child to addoptionsObjectnoOptions, 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 elementParametersnameTypeRequiredDescriptionclassToAddStringyesClassname to addDefined 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 namesDefined 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 listenerParametersnameTypeRequiredDescriptionintervalIdNumberyesThe id of the interval to clearDefined 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 listenerParametersnameTypeRequiredDescriptiontimeoutIdNumberyesThe id of the timeout to clearDefined 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]dimensions( width, height )Set both width and height at the same timeParametersnameTypeRequiredDescriptionwidthNumber|StringyesWidth of playerheightNumber|StringyesHeight of playerDefined 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 componentsDefined 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 objectParametersnameTypeRequiredDescriptionpropsObjectyesAn object of propertiesDefined 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 nameDefined 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 IDDefined 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 nameParametersnameTypeRequiredDescriptionnameStringyesName of the component to getDefined 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 nameParametersnameTypeRequiredDescriptionclassToCheckStringyesClassname to checkDefined 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.ParametersnameTypeRequiredDescriptionnumNumber|StringyesNew component heightskipListenersBooleannoSkip the resize event triggerDefined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 998[back to top]hide()Hide the component element if currently showingDefined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 944[back to top]id()Get the component's ID
var id = myComponent.id();Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 256[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);ParametersnameTypeRequiredDescriptionfirstString|ComponentyesThe event type or other componentsecondfunction|StringyesThe listener function or event typethirdfunctionnoThe listener for other componentDefined 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.ParametersnameTypeRequiredDescriptionfirstString|ComponentyesThe event type or other componentsecondfunction|StringyesThe event handler or event typethirdfunctionyesThe event handlerDefined 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);ParametersnameTypeRequiredDescriptionfirstString|ComponentyesThe event type or other componentsecondfunction|StringyesThe listener function or event typethirdfunctionnoThe listener function for other componentDefined 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': {}
}
}ParametersnameTypeRequiredDescriptionobjObjectyesObject of new option valuesDefined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 145[back to top]player()Return the component's playerDefined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 135[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.ParametersnameTypeRequiredDescriptionfnfunctionyesReady listenersyncBooleanyesExec the listener synchronously if component is readyDefined 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 componentParametersnameTypeRequiredDescriptionnameStringyesName of the component to registercompObjectyesThe component to registerDefined 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 elementParametersnameTypeRequiredDescriptioncomponentComponentyesComponent to removeDefined 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 elementParametersnameTypeRequiredDescriptionclassToRemoveStringyesClassname to removeDefined 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.ParametersnameTypeRequiredDescriptionfnfunctionyesThe 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.ParametersnameTypeRequiredDescriptionfnfunctionyesThe 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]show()Show the component element if hiddenDefined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 933[back to top]toggleClass( classToToggle, [predicate] )Add or remove a CSS class name from the component's elementParametersnameTypeRequiredDescriptionclassToToggleStringpredicateBoolean|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'});ParametersnameTypeRequiredDescriptioneventEvent|Object|StringyesA string (the type) or an event object with a type attributehashObjectnodata hash to pass along with the eventDefined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 768[back to top]triggerReady()Trigger the ready listenersDefined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 814[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.ParametersnameTypeRequiredDescriptionnumNumber|StringyesOptional width numberskipListenersBooleanyesSkip the 'resize' event triggerDefined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 981[back to top]