new CurrentTimeDisplay(player [, options])
Creates an instance of this class.
Parameters:
Name | Type | Argument | Description |
---|---|---|---|
player |
Player | The |
|
options |
Object |
<optional> |
The key/value store of player options. |
- Source:
- control-bar/time-controls/current-time-display.js
Extends
Methods
-
$(selector [, context])
-
Find a single DOM element matching a
selector
. This can be within theComponent
scontentEl()
or another custom context.Parameters:
Name Type Argument Default Description selector
string A valid CSS selector, which will be passed to
querySelector
.context
Element | string <optional>
this.contentEl() A DOM element within which to query. Can also be a selector string in which case the first matching element will get used as context. If missing
this.contentEl()
gets used. Ifthis.contentEl()
returns nothing it falls back todocument
.- Inherited From:
- Source:
- component.js
- See:
Returns:
the dom element that was found, or null
- Type
- Element | null
-
$$(selector [, context])
-
Finds all DOM element matching a
selector
. This can be within theComponent
scontentEl()
or another custom context.Parameters:
Name Type Argument Default Description selector
string A valid CSS selector, which will be passed to
querySelectorAll
.context
Element | string <optional>
this.contentEl() A DOM element within which to query. Can also be a selector string in which case the first matching element will get used as context. If missing
this.contentEl()
gets used. Ifthis.contentEl()
returns nothing it falls back todocument
.- Inherited From:
- Source:
- component.js
- See:
Returns:
a list of dom elements that were found
- Type
- NodeList
-
addChild(child [, options] [, index])
-
Add a child
Component
inside the currentComponent
.Parameters:
Name Type Argument Default Description child
string | Component The name or instance of a child to add.
options
Object <optional>
{} The key/value store of options that will get passed to children of the child.
index
number <optional>
this.children_.length The index to attempt to add a child into.
- Inherited From:
- Source:
- component.js
Returns:
The
Component
that gets added as a child. When using a string theComponent
will get created by this process.- Type
- Component
-
addClass(classToAdd)
-
Add a CSS class name to the
Component
s element.Parameters:
Name Type Description classToAdd
string CSS class name to add
- Inherited From:
- Source:
- component.js
Returns:
Returns itself; method can be chained.
- Type
- Component
-
blur()
-
Remove the focus from this component
- Inherited From:
- Source:
- component.js
-
<abstract> buildCSSClass()
-
Builds the default DOM class name. Should be overriden by sub-components.
- Inherited From:
- Source:
- component.js
Returns:
The DOM class name for this object.
- Type
- string
-
children()
-
Get an array of all child components
- Inherited From:
- Source:
- component.js
Returns:
The children
- Type
- Array
-
clearInterval(intervalId)
-
Clears an interval that gets created via
window.setInterval
or Component#setInterval. If you set an inteval via Component#setInterval use this function instead ofwindow.clearInterval
. If you don't your dispose listener will not get cleaned up until Component#dispose!Parameters:
Name Type Description intervalId
number The id of the interval to clear. The return value of Component#setInterval or
window.setInterval
.- Inherited From:
- Source:
- component.js
- See:
Returns:
Returns the interval id that was cleared.
- Type
- number
-
clearTimeout(timeoutId)
-
Clears a timeout that gets created via
window.setTimeout
or Component#setTimeout. If you set a timeout via Component#setTimeout use this function instead ofwindow.clearTimout
. If you don't your dispose listener will not get cleaned up until Component#dispose!Parameters:
Name Type Description timeoutId
number The id of the timeout to clear. The return value of Component#setTimeout or
window.setTimeout
.- Inherited From:
- Source:
- component.js
- See:
Returns:
Returns the timeout id that was cleared.
- Type
- number
-
contentEl()
-
Return the
Component
s DOM element. This is where children get inserted. This will usually be the the same as the element returned in Component#el.- Inherited From:
- Source:
- component.js
Returns:
The content element for this
Component
.- Type
- Element
-
createEl()
-
Create the
Component
's DOM element- Overrides:
- Source:
- control-bar/time-controls/current-time-display.js
Returns:
The element that was created.
- Type
- Element
-
currentDimension(widthOrHeight)
-
Get the width or the height of the
Component
elements computed style. Useswindow.getComputedStyle
.Parameters:
Name Type Description widthOrHeight
string A string containing 'width' or 'height'. Whichever one you want to get.
- Inherited From:
- Source:
- component.js
Returns:
The dimension that gets asked for or 0 if nothing was set for that dimension.
- Type
- number
-
currentDimensions()
-
Get an object that contains width and height values of the
Component
s computed style.- Inherited From:
- Source:
- component.js
Returns:
The dimensions of the components element
-
currentHeight()
-
Get the height of the
Component
s computed style. Useswindow.getComputedStyle
.- Inherited From:
- Source:
- component.js
Returns:
height The height of the
Component
s computed style.- Type
- number
-
currentWidth()
-
Get the width of the
Component
s computed style. Useswindow.getComputedStyle
.- Inherited From:
- Source:
- component.js
Returns:
width The width of the
Component
s computed style.- Type
- number
-
dimension(widthOrHeight [, num] [, skipListeners])
-
Get or set width or height of the
Component
element. This is the shared code for the Component#width and Component#height.Things to know:
- If the width or height in an number this will return the number postfixed with 'px'.
- If the width/height is a percent this will return the percent postfixed with '%'
- Hidden elements have a width of 0 with
window.getComputedStyle
. This function defaults to theComponent
sstyle.width
and falls back towindow.getComputedStyle
. See this for more information - If you want the computed style of the component, use Component#currentWidth and {Component#currentHeight
Parameters:
Name Type Argument Description widthOrHeight
string 8 'width' or 'height'
num
number | string <optional>
8 New dimension
skipListeners
boolean <optional>
Skip resize event trigger
- Inherited From:
- Source:
- component.js
Fires:
Returns:
- the dimension when getting or 0 if unset
- Returns itself when setting; method can be chained.
- Type
- Component
-
dimensions(width, height)
-
Set both the width and height of the
Component
element at the same time.Parameters:
Name Type Description width
number | string Width to set the
Component
s element to.height
number | string Height to set the
Component
s element to.- Inherited From:
- Source:
- component.js
Returns:
Returns itself; method can be chained.
- Type
- Component
-
dispose()
-
Dispose of the
Component
and all child components.- Inherited From:
- Source:
- component.js
Fires:
-
el()
-
Get the
Component
s DOM element- Inherited From:
- Source:
- component.js
Returns:
The DOM element for this
Component
.- Type
- Element
-
enableTouchActivity()
-
This function reports user activity whenever touch events happen. This can get turned off by any sub-components that wants touch events to act another way.
Report user touch activity when touch events occur. User activity gets used to determine when controls should show/hide. It is 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 as
touchstart
andtouchend
toggle player controls. So touch events can't help us at the player level either.User activity gets 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. Furthermore atouchmove
event and anything other than a tap, should not turn controls back on.- Inherited From:
- Source:
- component.js
Listens to Events:
- Component#event:touchstart
- Component#event:touchmove
- Component#event:touchend
- Component#event:touchcancel
-
focus()
-
Set the focus to this component
- Inherited From:
- Source:
- component.js
-
getAttribute(attribute)
-
Get the value of an attribute on the
Component
s element.Parameters:
Name Type Description attribute
string Name of the attribute to get the value from.
- Inherited From:
- Source:
- component.js
- See:
Returns:
- The value of the attribute that was asked for.
- Can be an empty string on some browsers if the attribute does not exist or has no value - Most browsers will return null if the attibute does not exist or has no value.
- Type
- string | null
-
getChild(name)
-
Returns the child
Component
with the givenname
.Parameters:
Name Type Description name
string The name of the child
Component
to get.- Inherited From:
- Source:
- component.js
Returns:
The child
Component
with the givenname
or undefined.- Type
- Component | undefined
-
getChildById(id)
-
Returns the child
Component
with the givenid
.Parameters:
Name Type Description id
string The id of the child
Component
to get.- Inherited From:
- Source:
- component.js
Returns:
The child
Component
with the givenid
or undefined.- Type
- Component | undefined
-
hasClass(classToCheck)
-
Check if a component's element has a CSS class name.
Parameters:
Name Type Description classToCheck
string CSS class name to check.
- Inherited From:
- Source:
- component.js
Returns:
- True if the
Component
has the class.- False if the `Component` does not have the class`
- Type
- boolean
-
height( [num] [, skipListeners])
-
Get or set the height of the component based upon the CSS styles. See Component#dimension for more detailed information.
Parameters:
Name Type Argument Description num
number | string <optional>
The height that you want to set postfixed with '%', 'px' or nothing.
skipListeners
boolean <optional>
Skip the resize event trigger
- Inherited From:
- Source:
- component.js
Returns:
- The width when getting, zero if there is no width. Can be a string
postpixed with '%' or 'px'. - Returns itself when setting; method can be chained.
- Type
- Component | number | string
-
hide()
-
Hide the
Component
s element if it is currently showing by adding the 'vjs-hidden` class name to it.- Inherited From:
- Source:
- component.js
Returns:
Returns itself; method can be chained.
- Type
- Component
-
id()
-
Get this
Component
s ID- Inherited From:
- Source:
- component.js
Returns:
The id of this
Component
- Type
- string
-
initChildren()
-
Add and initialize default child
Component
s based upon options.- Inherited From:
- Source:
- component.js
-
localize(string)
-
Localize a string given the string in english.
Parameters:
Name Type Description string
string The string to localize.
- Inherited From:
- Source:
- component.js
Returns:
The localized string or if no localization exists the english string.
- Type
- string
-
name()
-
Get the
Component
s name. The name gets used to reference theComponent
and is set during registration.- Inherited From:
- Source:
- component.js
Returns:
The name of this
Component
.- Type
- string
-
off( [first] [, second] [, third])
-
Remove an event listener from this
Component
s element. If the second argument is exluded all listeners for the type passed in as the first argument will be removed.Parameters:
Name Type Argument Description first
string | Component | Array.<string> <optional>
The event name, and array of event names, or another
Component
.second
EventTarget~EventListener | string | Array.<string> <optional>
The listener function, an event name, or an Array of events names.
third
EventTarget~EventListener <optional>
The event handler if
first
is aComponent
andsecond
is an event name or an Array of event names.- Inherited From:
- Source:
- component.js
Returns:
Returns itself; method can be chained.
- Type
- Component
-
on( [first] [, second] [, third])
-
Add an
event listener
to thisComponent
s element.The benefit of using this over the following:
VjsEvents.on(otherElement, 'eventName', myFunc)
otherComponent.on('eventName', myFunc)
Is that the listeners will get cleaned up when either component gets disposed.
- It will also bind
myComponent
as the context ofmyFunc
.NOTE: If you remove the element from the DOM that has used
on
you need toclean up references using: `myComponent.trigger(el, 'dispose')` This will also allow the browser to garbage collect it. In special cases such as with `window` and `document`, which are both permanent, this is not necessary.
Parameters:
Name Type Argument Description first
string | Component | Array.<string> <optional>
The event name, and array of event names, or another
Component
.second
EventTarget~EventListener | string | Array.<string> <optional>
The listener function, an event name, or an Array of events names.
third
EventTarget~EventListener <optional>
The event handler if
first
is aComponent
andsecond
is an event name or an Array of event names.- Inherited From:
- Source:
- component.js
Listens to Events:
Returns:
Returns itself; method can be chained.
- Type
- Component
-
one( [first] [, second] [, third])
-
Add an event listener that gets triggered only once and then gets removed.
Parameters:
Name Type Argument Description first
string | Component | Array.<string> <optional>
The event name, and array of event names, or another
Component
.second
EventTarget~EventListener | string | Array.<string> <optional>
The listener function, an event name, or an Array of events names.
third
EventTarget~EventListener <optional>
The event handler if
first
is aComponent
andsecond
is an event name or an Array of event names.- Inherited From:
- Source:
- component.js
Returns:
Returns itself; method can be chained.
- Type
- Component
-
options(obj)
-
Deep merge of options objects with new options.
Note: When both
obj
andoptions
contain properties whose values are objects. The two properties get merged using module:mergeOptionsParameters:
Name Type Description obj
Object The object that contains new options.
- Inherited From:
- Deprecated:
-
- since version 5
- Source:
- component.js
Returns:
A new object of
this.options_
andobj
merged together.- Type
- Object
-
player()
-
Return the Player that the
Component
has attached to.- Inherited From:
- Source:
- component.js
Returns:
The player that this
Component
has attached to.- Type
- Player
-
ready(fn [, sync])
-
Bind a listener to the component's ready state. If the ready event has already happened it will trigger the function immediately.
Parameters:
Name Type Argument Default Description fn
Component~ReadyCallback A function to call when ready is triggered.
sync
boolean <optional>
false Execute the listener synchronously if
Component
is ready.- Inherited From:
- Source:
- component.js
Returns:
Returns itself; method can be chained.
- Type
- Component
-
removeAttribute(attribute)
-
Remove an attribute from the
Component
s element.Parameters:
Name Type Description attribute
string Name of the attribute to remove.
- Inherited From:
- Source:
- component.js
- See:
Returns:
Returns itself; method can be chained.
- Type
- Component
-
removeChild(component)
-
Remove a child
Component
from thisComponent
s list of children. Also removes the childComponent
s element from thisComponent
s element.Parameters:
Name Type Description component
Component The child
Component
to remove.- Inherited From:
- Source:
- component.js
-
removeClass(classToRemove)
-
Remove a CSS class name from the
Component
s element.Parameters:
Name Type Description classToRemove
string CSS class name to remove
- Inherited From:
- Source:
- component.js
Returns:
Returns itself; method can be chained.
- Type
- Component
-
setAttribute(attribute, value)
-
Set the value of an attribute on the
Component
's elementParameters:
Name Type Description attribute
string Name of the attribute to set.
value
string Value to set the attribute to.
- Inherited From:
- Source:
- component.js
- See:
Returns:
Returns itself; method can be chained.
- Type
- Component
-
setInterval(fn, interval)
-
Creates a function that gets run every
x
milliseconds. This function is a wrapper aroundwindow.setInterval
. There are a few reasons to use this one instead though.- It gets cleared via Component#clearInterval when Component#dispose gets called.
- The function callback will be a Component~GenericCallback
Parameters:
Name Type Description fn
Component~GenericCallback The function to run every
x
seconds.interval
number Execute the specified function every
x
milliseconds.- Inherited From:
- Source:
- component.js
- See:
Listens to Events:
Returns:
Returns an id that can be used to identify the interval. It can also be be used in Component#clearInterval to clear the interval.
- Type
- number
-
setTimeout(fn, timeout)
-
Creates a function that runs after an
x
millisecond timeout. This function is a wrapper aroundwindow.setTimeout
. There are a few reasons to use this one instead though:- It gets cleared via Component#clearTimeout when Component#dispose gets called.
- The function callback will gets turned into a Component~GenericCallback
Note: You can use
window.clearTimeout
on the id returned by this function. This will cause its dispose listener not to get cleaned up! Please use Component#clearTimeout or Component#dispose.Parameters:
Name Type Description fn
Component~GenericCallback The function that will be run after
timeout
.timeout
number Timeout in milliseconds to delay before executing the specified function.
- Inherited From:
- Source:
- component.js
- See:
Listens to Events:
Returns:
Returns a timeout ID that gets used to identify the timeout. It can also get used in Component#clearTimeout to clear the timeout that was set.
- Type
- number
-
show()
-
Show the
Component
s element if it is hidden by removing the 'vjs-hidden' class name from it.- Inherited From:
- Source:
- component.js
Returns:
Returns itself; method can be chained.
- Type
- Component
-
toggleClass(classToToggle [, predicate])
-
Add or remove a CSS class name from the component's element.
classToToggle
gets added when Component#hasClass would return false.classToToggle
gets removed when Component#hasClass would return true.
Parameters:
Name Type Argument Description classToToggle
string The class to add or remove based on (@link Component#hasClass}
predicate
boolean | Dom~predicate <optional>
An Dom~predicate function or a boolean
- Inherited From:
- Source:
- component.js
Returns:
Returns itself; method can be chained.
- Type
- Component
-
trigger(event [, hash])
-
Trigger an event on an element.
Parameters:
Name Type Argument Description event
EventTarget~Event | Object | string The event name, and Event, or an event-like object with a type attribute set to the event name.
hash
Object <optional>
Data hash to pass along with the event
- Inherited From:
- Source:
- component.js
Returns:
Returns itself; method can be chained.
- Type
- Component
-
triggerReady()
-
Trigger all the ready listeners for this
Component
.- Inherited From:
- Source:
- component.js
Fires:
-
updateContent( [event])
-
Update current time display
Parameters:
Name Type Argument Description event
EventTarget~Event <optional>
The
timeupdate
event that caused this function to run.- Source:
- control-bar/time-controls/current-time-display.js
Listens to Events:
-
width( [num] [, skipListeners])
-
Get or set the width of the component based upon the CSS styles. See Component#dimension for more detailed information.
Parameters:
Name Type Argument Description num
number | string <optional>
The width that you want to set postfixed with '%', 'px' or nothing.
skipListeners
boolean <optional>
Skip the resize event trigger
- Inherited From:
- Source:
- component.js
Returns:
- The width when getting, zero if there is no width. Can be a string
postpixed with '%' or 'px'. - Returns itself when setting; method can be chained.
- Type
- Component | number | string
Events
-
dispose
-
Triggered when a
Component
is disposed.Type: EventTarget~Event
- Inherited From:
- Source:
- component.js
Properties:
Name Type Argument Default Description bubbles
boolean <optional>
false set to false so that the close event does not bubble up
-
ready
-
Triggered when a
Component
is ready.Type: EventTarget~Event
- Inherited From:
- Source:
- component.js
-
resize
-
Triggered when a component is resized.
Type: EventTarget~Event
- Inherited From:
- Source:
- component.js
-
tap
-
Triggered when a
Component
is tapped.Type: EventTarget~Event
- Inherited From:
- Source:
- component.js