19 KiB
vjs.SubtitlesTrack
EXTENDS: vjs.TextTrack
DEFINED IN: src/js/tracks.js#L696
The track component for managing the hiding and showing of subtitles
INDEX
-
- activate
inherited
- activeCues
inherited
- addChild
inherited
- addClass
inherited
- adjustFontSize
inherited
- buildCSSClass
inherited
- children
inherited
- contentEl
inherited
- createEl
inherited
- cues
inherited
- deactivate
inherited
- dflt
inherited
- dimensions
inherited
- disable
inherited
- dispose
inherited
- el
inherited
- enableTouchActivity
inherited
- getChild
inherited
- getChildById
inherited
- height
inherited
- hide
inherited
- id
inherited
- init
inherited
- initChildren
inherited
- kind
inherited
- label
inherited
- language
inherited
- mode
inherited
- name
inherited
- off
inherited
- on
inherited
- one
inherited
- options
inherited
- player
inherited
- ready
inherited
- readyState
inherited
- removeChild
inherited
- removeClass
inherited
- show
inherited
- src
inherited
- title
inherited
- trigger
inherited
- triggerReady
inherited
- width
inherited
- activate
-
- resize
inherited
- resize
METHODS
activate()
Turn on cue tracking. Tracks that are showing OR hidden are active.
inherited from: src/js/tracks.js#L391
activeCues()
Get the track active cues
RETURNS:
Array
inherited from: src/js/tracks.js#L270
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#L356
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#L672
adjustFontSize()
Change the font size of the text track to make it larger when playing in fullscreen mode and restore it to its normal size when not in fullscreen mode.
inherited from: src/js/tracks.js#L315
buildCSSClass()
Allows sub components to stack CSS class names
RETURNS:
String
The constructed class name
inherited from: src/js/component.js#L515
children()
Get an array of all child components
var kids = myComponent.children();
RETURNS:
Array
The children
inherited from: src/js/component.js#L290
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#L233
createEl()
Create basic div to hold cue text
RETURNS:
Element
inherited from: src/js/tracks.js#L331
cues()
Get the track cues
RETURNS:
Array
inherited from: src/js/tracks.js#L255
deactivate()
Turn off cue tracking.
inherited from: src/js/tracks.js#L414
dflt()
Get the track default value. ('default' is a reserved keyword)
RETURNS:
Boolean
inherited from: src/js/tracks.js#L196
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#L784
disable()
Disable: Mode Off/Disable (0) Indicates that the text track is not active. Other than for the purposes of exposing the track in the DOM, the user agent is ignoring the text track. No cues are active, no events are fired, and the user agent will not attempt to obtain the track's cues.
inherited from: src/js/tracks.js#L377
dispose()
Dispose of the component and all child components
inherited from: src/js/component.js#L78
el()
Get the component's DOM element
var domEl = myComponent.el();
RETURNS:
Element
inherited from: src/js/component.js#L214
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.
inherited from: src/js/component.js#L963
getChild( name )
Returns a child component with the provided name
PARAMETERS:
- name
RETURNS:
vjs.Component
inherited from: src/js/component.js#L324
getChildById( id )
Returns a child component with the provided ID
PARAMETERS:
- id
RETURNS:
vjs.Component
inherited from: src/js/component.js#L307
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 heightNumber|String
The height, when getting
inherited from: src/js/component.js#L773
hide()
Hide: Mode Hidden (1) Indicates that the text track is active, but that the user agent is not actively displaying the cues. If no attempt has yet been made to obtain the track's cues, the user agent will perform such an attempt momentarily. The user agent is maintaining a list of which cues are active, and events are being fired accordingly.
inherited from: src/js/tracks.js#L362
id()
Get the component's ID
var id = myComponent.id();
RETURNS:
String
inherited from: src/js/component.js#L252
init( player, options )
PARAMETERS:
- player
- options
inherited from: src/js/tracks.js#L134
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 } ] });
inherited from: src/js/component.js#L475
kind()
Get the track kind value
RETURNS:
String
inherited from: src/js/tracks.js#L167
label()
Get the track label value
RETURNS:
String
inherited from: src/js/tracks.js#L240
language()
Get the track language value
RETURNS:
String
inherited from: src/js/tracks.js#L225
mode()
Get the track mode
RETURNS:
Number
inherited from: src/js/tracks.js#L307
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#L271
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#L554
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#L540
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#L566
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#L173
player()
Return the component's player
RETURNS:
vjs.Player
inherited from: src/js/component.js#L120
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#L625
readyState()
Get the track readyState
RETURNS:
Number
inherited from: src/js/tracks.js#L289
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#L414
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#L683
show()
Show: Mode Showing (2) Indicates that the text track is active. If no attempt has yet been made to obtain the track's cues, the user agent will perform such an attempt momentarily. The user agent is maintaining a list of which cues are active, and events are being fired accordingly. In addition, for text tracks whose kind is subtitles or captions, the cues are being displayed over the video as appropriate; for text tracks whose kind is descriptions, the user agent is making the cues available to the user in a non-visual fashion; and for text tracks whose kind is chapters, the user agent is making available to the user a mechanism by which the user can navigate to any point in the media resource by selecting a cue. The showing by default state is used in conjunction with the default attribute on track elements to indicate that the text track was enabled due to that attribute. This allows the user agent to override the state if a later track is discovered that is more appropriate per the user's preferences.
inherited from: src/js/tracks.js#L347
src()
Get the track src value
RETURNS:
String
inherited from: src/js/tracks.js#L181
title()
Get the track title value
RETURNS:
String
inherited from: src/js/tracks.js#L210
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
inherited from: src/js/component.js#L580
triggerReady()
Trigger the ready listeners
RETURNS:
vjs.Component
inherited from: src/js/component.js#L644
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 widthNumber|String
The width, when getting
inherited from: src/js/component.js#L756
EVENTS
resize EVENT
Fired when the width and/or height of the component changes
inherited from: src/js/component.js#L863