Methods
-
$(selector [, context])
-
Finds a single DOM element matching
selectorwithin the optionalcontextof another DOM element (defaulting todocument).Parameters:
Name Type Argument Default Description selectorString A valid CSS selector, which will be passed to
querySelector.contextElement | String <optional>
document A DOM element within which to query. Can also be a selector
string in which case the first matching element will be used
as context. If missing (or no element matches selector), falls
back todocument.Returns:
- Type
- Element | null
-
$$(selector [, context])
-
Finds a all DOM elements matching
selectorwithin the optionalcontextof another DOM element (defaulting todocument).Parameters:
Name Type Argument Default Description selectorString A valid CSS selector, which will be passed to
querySelectorAll.contextElement | String <optional>
document A DOM element within which to query. Can also be a selector
string in which case the first matching element will be used
as context. If missing (or no element matches selector), falls
back todocument.Returns:
- Type
- NodeList
-
addElClass(element, classToAdd)
-
Add a CSS class name to an element
Parameters:
Name Type Description elementElement Element to add class name to
classToAddString Classname to add
-
appendContent(el, content)
-
Normalizes and appends content to an element.
Parameters:
Name Type Description elElement contentString | Element | TextNode | Array | function See:
normalizeContentReturns:
- Type
- Element
-
blockTextSelection()
-
Attempt to block the ability to select text while dragging controls
Returns:
- Type
- Boolean
-
buildCSSClass()
-
Allow sub components to stack CSS class names
Returns:
The constructed class name
- Type
- String
-
buildCSSClass()
-
Allow sub components to stack CSS class names
Returns:
The constructed class name
- Type
- String
-
buildCSSClass()
-
Allow sub components to stack CSS class names
Returns:
The constructed class name
- Type
- String
-
buildCSSClass()
-
Allow sub components to stack CSS class names
Returns:
The constructed class name
- Type
- String
-
buildCSSClass()
-
Allow sub components to stack CSS class names
Returns:
The constructed class name
- Type
- String
-
buildCSSClass()
-
Allow sub components to stack CSS class names
Returns:
The constructed class name
- Type
- String
-
buildCSSClass()
-
Allow sub components to stack CSS class names
Returns:
The constructed class name
- Type
- String
-
buildCSSClass()
-
Allow sub components to stack CSS class names
Returns:
The constructed class name
- Type
- String
-
buildCSSClass()
-
Allow sub components to stack CSS class names
Returns:
The constructed class name
- Type
- String
-
buildCSSClass()
-
Allow sub components to stack CSS class names
Returns:
The constructed class name
- Type
- String
-
canHandleSource(source)
-
Checks if we can handle source from source object
Parameters:
Name Type Description sourceObject Source for playback
Returns:
- Type
- probably | maybe | *
-
canHandleSource(source)
-
Checks if we can handle source from source object
Parameters:
Name Type Description sourceObject Source for playback
Returns:
- Type
- probably | maybe | *
-
canHandleSource(source)
-
Checks if we can handle source from source object
Parameters:
Name Type Description sourceObject Source for playback
Returns:
- Type
- probably | maybe | *
-
canPlayType(type)
-
Determine if we can play type
Parameters:
Name Type Description typeString mime-type
Returns:
- Type
- probably | ''
-
canPlayType(type)
-
Determine if we can play type
Parameters:
Name Type Description typeString mime-type
Returns:
- Type
- probably | ''
-
canPlayType(type)
-
Determine if we can play type
Parameters:
Name Type Description typeString mime-type
Returns:
- Type
- probably | ''
-
classRegExp(className)
-
Produce a regular expression for matching a class name.
Parameters:
Name Type Description classNameString Returns:
- Type
- RegExp
-
createEl()
-
Create the component's DOM element
Returns:
- Type
- Element
-
createEl()
-
Create the component's DOM element
Returns:
- Type
- Element
-
createEl( [tagName] [, properties] [, attributes])
-
Creates an element and applies properties.
Parameters:
Name Type Argument Default Description tagNameString <optional>
'div' Name of tag to be created.
propertiesObject <optional>
{} Element properties to be applied.
attributesObject <optional>
{} Element attributes to be applied.
Returns:
- Type
- Element
-
createEl()
-
Create the component's DOM element
Returns:
- Type
- Element
-
createEl()
-
Create the component's DOM element
Returns:
- Type
- Element
-
createEl()
-
Create the component's DOM element
Returns:
- Type
- Element
-
createEl()
-
Create the component's DOM element
Returns:
- Type
- Element
-
createItems()
-
Create caption menu items
Returns:
Array of menu items
- Type
- Array
-
emptyEl(el)
-
Empties the contents of an element.
Parameters:
Name Type Description elElement Returns:
- Type
- Element
-
findElPosition(el)
-
Offset Left
getBoundingClientRect technique from
John Resig http://ejohn.org/blog/getboundingclientrect-is-awesome/Parameters:
Name Type Description elElement Element from which to get offset
Returns:
- Type
- Object
-
getEl(id)
-
Shorthand for document.getElementById()
Also allows for CSS (jQuery) ID syntax. But nothing other than IDs.Parameters:
Name Type Description idString Element ID
Returns:
Element with supplied ID
- Type
- Element
-
getElData(el)
-
Returns the cache object where data for an element is stored
Parameters:
Name Type Description elElement Element to store data for.
Returns:
- Type
- Object
-
getPercent()
-
Get percentage of video played
Returns:
Percentage played
- Type
- Number
-
getPointerPosition(el, event)
-
Get pointer position in element
Returns an object with x and y coordinates.
The base on the coordinates are the bottom left of the element.Parameters:
Name Type Description elElement Element on which to get the pointer position on
eventEvent Event object
Returns:
This object will have x and y coordinates corresponding to the mouse position
- Type
- Object
-
handleClick()
-
Handle click on mute
-
handleClick()
-
Handle click on text track
-
handleMouseDown()
-
Handle mouse down on seek bar
-
handleMouseMove()
-
Handle mouse move on seek bar
-
handleMouseUp()
-
Handle mouse up on seek bar
-
handleSource(source, tech)
-
Handle source
Parameters:
Name Type Description sourceObject Source for playback
techTech Tech object to use for playback
-
handleSource(source, tech)
-
Handle source
Parameters:
Name Type Description sourceObject Source for playback
techTech Tech object to use for playback
-
handleSource(source)
-
Handle source
Source handler for dash playback.
Parameters:
Name Type Description sourceObject Source object for playback
-
handleSource(source, tech)
-
Handle source
Parameters:
Name Type Description sourceObject Source for playback
techTech Tech object to use for playback
-
handleSource(source)
-
Handle source
Source handler for dash playback.
Parameters:
Name Type Description sourceObject Source object for playback
-
handleTracksChange()
-
Handle text track change
-
handleTracksChange(event)
-
Handle text track change
Parameters:
Name Type Description eventObject Event object
-
hasElClass(element, classToCheck)
-
Check if an element has a CSS class
Parameters:
Name Type Description elementElement Element to check
classToCheckString Classname to check
-
insertContent(el, content)
-
Normalizes and inserts content into an element; this is identical to
appendContent(), except it empties the element first.Parameters:
Name Type Description elElement contentString | Element | TextNode | Array | function See:
normalizeContentReturns:
- Type
- Element
-
isEl(value)
-
Determines, via duck typing, whether or not a value is a DOM element.
Parameters:
Name Type Description valueMixed Returns:
- Type
- Boolean
-
isNonBlankString(str)
-
Detect if a value is a string with any non-whitespace characters.
Parameters:
Name Type Description strString Returns:
- Type
- Boolean
-
isTextNode(value)
-
Determines, via duck typing, whether or not a value is a text node.
Parameters:
Name Type Description valueMixed Returns:
- Type
- Boolean
-
log()
-
Log plain debug messages
-
newGUID()
-
Get the next unique ID
Returns:
- Type
- String
-
normalizeContent(content)
-
Normalizes content for eventual insertion into the DOM.
This allows a wide range of content definition methods, but protects
from falling into the trap of simply writing toinnerHTML, which is
an XSS concern.The content for an element can be passed in multiple types and
combinations, whose behavior is as follows:String
Normalized into a text node.Element, TextNode
Passed through.Array
A one-dimensional array of strings, elements, nodes, or functions (which
return single strings, elements, or nodes).Function
If the sole argument, is expected to produce a string, element,
node, or array.
Parameters:
Name Type Description contentString | Element | TextNode | Array | function Returns:
- Type
- Array
-
off(elem, type, fn)
-
Removes event listeners from an element
Parameters:
Name Type Description elemElement | Object Object to remove listeners from
typeString | Array Type of listener to remove. Don't include to remove all events from element.
fnfunction Specific listener to remove. Don't include to remove listeners for an event type.
-
on(elem, type, fn)
-
Add an event listener to element
It stores the handler function in a separate cache object
and adds a generic handler to the element's event,
along with a unique id (guid) to the element.Parameters:
Name Type Description elemElement | Object Element or object to bind listeners to
typeString | Array Type of event to bind to.
fnfunction Event listener.
-
one(elem, type, fn)
-
Trigger a listener only once for an event
Parameters:
Name Type Description elemElement | Object Element or object to
typeString | Array Name/type of event
fnfunction Event handler function
-
onSeekInput_()
-
Collect input events and seek when things have been stable for 125ms
-
onSeekInputTimeout_()
-
on Seek Input Timeout
-
plugin(name, fn)
-
Create a Video.js player plugin
Plugins are only initialized when options for the plugin are included
in the player options, or the plugin function on the player instance is
called.
See the plugin guide in the docs for a more detailed example// Make a plugin that alerts when the player plays videojs.plugin('myPlugin', function(myPluginOptions) { myPluginOptions = myPluginOptions || {}; var player = this; var alertText = myPluginOptions.text || 'Player is playing!' player.on('play', function(){ alert(alertText); }); }); // USAGE EXAMPLES // EXAMPLE 1: New player with plugin options, call plugin immediately var player1 = videojs('idOne', { myPlugin: { text: 'Custom text!' } }); // Click play // --> Should alert 'Custom text!' // EXAMPLE 3: New player, initialize plugin later var player3 = videojs('idThree'); // Click play // --> NO ALERT // Click pause // Initialize plugin using the plugin function on the player instance player3.myPlugin({ text: 'Plugin added later!' }); // Click play // --> Should alert 'Plugin added later!'Parameters:
Name Type Description nameString The plugin name
fnfunction The plugin function that will be called with options
- Mixes In:
- videojs
-
removeElClass(element, classToRemove)
-
Remove a CSS class name from an element
Parameters:
Name Type Description elementElement Element to remove from class name
classToRemoveString Classname to remove
-
setCurrentTime(time)
-
Set current time
Parameters:
Name Type Description timeNumber Current time of video
-
setCurrentTime(time)
-
Set current time
Parameters:
Name Type Description timeNumber Current time of video
-
setSrc( [src])
-
Set video
Parameters:
Name Type Argument Description srcObject <optional>
Source object
-
stepBack()
-
Move more quickly rewind for keyboard-only users
-
stepForward()
-
Move more quickly fast forward for keyboard-only users
-
textContent(el, text)
-
Injects text into an element, replacing any existing contents entirely.
Parameters:
Name Type Description elElement textString Returns:
- Type
- Element
-
throwIfWhitespace(str)
-
Throws an error if the passed string has whitespace. This is used by
class methods to be relatively consistent with the classList API.Parameters:
Name Type Description strString Returns:
- Type
- Boolean
-
toggleElClass(element, classToToggle [, predicate])
-
Adds or removes a CSS class name on an element depending on an optional
condition or the presence/absence of the class name.Parameters:
Name Type Argument Description elementElement classToToggleString predicateBoolean | function <optional>
Can be a function that returns a Boolean. If
true, the class
will be added; iffalse, the class will be removed. If not
given, the class will be added if not present and vice versa. -
trigger(elem, event [, hash])
-
Trigger an event for an element
Parameters:
Name Type Argument Description elemElement | Object Element to trigger an event on
eventEvent | Object | String A string (the type) or an event object with a type attribute
hashObject <optional>
data hash to pass along with the event
Returns:
Returned only if default was prevented
- Type
- Boolean
-
unblockTextSelection()
-
Turn off text selection blocking
Returns:
- Type
- Boolean
-
update()
-
Update caption menu items
-
updateARIAAttributes()
-
Update ARIA accessibility attributes
-
updateContent()
-
Update time display
-
updateContent()
-
Update time display
-
updateContent()
-
Update time display
Events
-
ABORT
-
Fired when playback is aborted
-
ADD_TRACK
-
Fired when an AudioTrack object has been added to an AudioTrackList object.
-
BEFORE_MODAL_CLOSE
-
Used when a modal html view will be closed. Fired by VideoJS on the ModalDialog
-
BEFORE_MODAL_EMPTY
-
Used when a modal html view will clear its content. Fired by VideoJS on the ModalDialog
-
BEFORE_MODAL_FILL
-
Used when a modal html view will be populated with html content. Fired by VideoJS on the ModalDialog
-
BEFORE_MODAL_OPEN
-
Used when a modal html view is about to be opened. Fired by VideoJS on the ModalDialog
-
BITRATE_CHANGED
-
Fired when the video bitrate changes
-
BLUR
-
Used when an html element loses focus. Fired by VideoJS on components
-
CAN_PLAY
-
Fired when the player can start playback
-
CAN_PLAY_THROUGH
-
Enough data has been loaded to play the media up to its end
-
CHANGE
-
Fired when a state changes. Used for example when an AudioTrack changes its enabled value
-
CLICK
-
Used when an html element is clicked. Fired by VideoJS on components
-
CLOSE
-
Used when something closes. Fired by VideoJS when the CloseButton closes
-
CONTROLS_DISABLED
-
When controls are disabled
-
CONTROLS_ENABLED
-
When controls are enabled
-
DISPOSE
-
Fired when the player is destroyed.
-
DURATION_CHANGE
-
Fired when the video duration changes
-
EMPTIED
-
When the current playlist is empty
-
ENDED
-
Fired when video playback ends
-
ENTER_FULL_WINDOW
-
When fullscreen isn't supported and the video will resize to the window
-
ERROR
-
Fired when an error occurs
-
EXIT_FULL_WINDOW
-
When exiting full window
-
FIRST_PLAY
-
Video is played for the first time
-
FOCUS
-
Used when an html element gains focus. Fired by VideoJS on components
-
FULLSCREEN_CHANGE
-
When the fullscreen state changes
-
KEY_DOWN
-
When a key is down
-
KEY_UP
-
When a key is up
-
LOAD_START
-
Fired when the video is starting to load
-
LOADED_DATA
-
Fired when the player has downloaded data at the current playback position
-
LOADED_METADATA
-
Fired when the player has initial duration and dimension information
-
METRIC_CHANGED
-
Fired by Dash.js when a metric changes
-
MODAL_CLOSE
-
Used when a modal html view has been closed. Fired by VideoJS on the ModalDialog
-
MODAL_EMPTY
-
Used when a modal html view has cleared its content. Fired by VideoJS on the ModalDialog
-
MODAL_FILL
-
Used when a modal html view has been populated with html content. Fired by VideoJS on the ModalDialog
-
MODAL_OPEN
-
Used when a modal html view has been opened. Fired by VideoJS on the ModalDialog
-
MODE_CHANGE
-
Fired when an AudioTrack object changes its enabled value
-
MOUSE_DOWN
-
When the mouse is down
-
MOUSE_MOVE
-
When the mouse is moved
-
MOUSE_UP
-
When the mouse is up
-
PAUSE
-
Fired when the player is paused
-
PLAY
-
Fired when the player will start playing
-
PLAYING
-
Fired when the player has starting playback
-
POSTER_CHANGE
-
When the video poster changes
-
PROGRESS
-
When the user agent is downloading media data
-
RATE_CHANGE
-
When the playing speed of the audio/video is changed
-
READY
-
Used when something is ready. Fired when the tech is ready
-
RECOVERABLE_ASSET_ERROR
-
Fired when a recoverable asset error occurs
-
REMOVE_TRACK
-
Fired when an AudioTrack object has been removed from an AudioTrackList object.
-
RESIZE
-
Used when an html element resizes. Fired when the video element changes size
-
SEEKED
-
Fired when the player seeked to a different point in time
-
SEEKING
-
Fired when the player started seeking
-
SLIDER_ACTIVE
-
Fired when a VideoJS slider is active
-
SLIDER_INACTIVE
-
Fired when a VideoJS slider is inactive
-
STALLED
-
When the player is trying to get media data, but data is not available
-
SUSPEND
-
When the player is suspended from downloading media data
-
TAP
-
Used when an html element is tapped. Fired by VideoJS on components
-
TEXT_TRACK_CHANGE
-
When the text track has been changed
-
TIME_UPDATE
-
Fired when the current playback position has changed
-
TOUCH_CANCEL
-
When a touch point has been disrupted
-
TOUCH_END
-
When touch ended
-
TOUCH_LEAVE
-
When a touch point is moved off the interactive area of an element
-
TOUCH_MOVE
-
When touch moved
-
TOUCH_START
-
When touch started
-
TRACK_CHANGE
-
When the track has been changed
-
USER_ACTIVE
-
Fired when the user is active
-
USERIN_ACTIVE
-
Fired when the user is inactive
-
USING_CUSTOM_CONTROLS
-
When custom controls are being used
-
USING_NATIVE_CONTROLS
-
When native tech or device controls are being used
-
VOLUME_CHANGE
-
Fired when the volume changes
-
WAITING
-
Fired when the player starts buffering
EMP Html5 Player