Boolean indicating whether the HTML5 tech currently supports the timeupdate event.
If this is false, manual timeupdate events will be triggered instead.
Boolean indicating whether the Tech supports volume control.
Default Value:
true
movingMediaElementInDOMboolean
Boolean indicating whether the HTML5 tech currently supports the media element
moving in the DOM. iOS breaks if you move the media element, so this is set this to
false there. Everywhere else this should be true.
static Html5.nativeSourceHandler
Native source handler for Html5, simply passes the source to the media element.
Find a single DOM element matching a selector. This can be within the Components
contentEl() or another custom context.
Name
Type
Default
Description
selector
string
A valid CSS selector, which will be passed to querySelector.
context
Element
|
string
this.contentEl()
optional
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. If this.contentEl() returns
nothing it falls back to document.
Finds all DOM element matching a selector. This can be within the Components
contentEl() or another custom context.
Name
Type
Default
Description
selector
string
A valid CSS selector, which will be passed to querySelectorAll.
context
Element
|
string
this.contentEl()
optional
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. If this.contentEl() returns
nothing it falls back to document.
The value of autoplay from the media element.
- True indicates that the media should start as soon as the page loads.
- False indicates that the media should not start as soon as the page loads.
Get the value of buffered from the media element. buffered is a TimeRange
object that represents the parts of the media that are already downloaded and
available for playback.
If you queue an rAF callback via Component#requestAnimationFrame,
use this function instead of window.cancelAnimationFrame. If you don't,
your dispose listener will not get cleaned up until Component#dispose!
Clears an interval that gets created via window.setInterval or
Component#setInterval. If you set an interval via Component#setInterval
use this function instead of window.clearInterval. If you don't your dispose
listener will not get cleaned up until Component#dispose!
Name
Type
Description
intervalId
number
The id of the interval to clear. The return value of
Component#setInterval or window.setInterval.
Clears a timeout that gets created via window.setTimeout or
Component#setTimeout. If you set a timeout via Component#setTimeout
use this function instead of window.clearTimout. If you don't your dispose
listener will not get cleaned up until Component#dispose!
Name
Type
Description
timeoutId
number
The id of the timeout to clear. The return value of
Component#setTimeout or window.setTimeout.
The value of controls from the media element.
- True indicates that native controls should be showing.
- False indicates that native controls should be hidden.
Get the value of crossOrigin from the media element. crossOrigin indicates
to the browser that should sent the cookies along with the requests for the
different assets/playlists
Get the computed width of the component's element.
Uses window.getComputedStyle.
Returns:
Type
Description
number
The computed width of the component's element.
defaultMuted(){boolean}
Get the value of defaultMuted from the media element. defaultMuted indicates
whether the media should start muted or not. Only changes the default state of the
media. muted and defaultMuted can have different values. Html5#muted indicates the
current state.
The value of defaultMuted from the media element.
- True indicates that the media should start muted.
- False indicates that the media should not start muted
defaultPlaybackRate(){number}
Get the value of defaultPlaybackRate from the media element. defaultPlaybackRate indicates
the rate at which the media is currently playing back. This value will not indicate the current
playbackRate after playback has started, use Html5#playbackRate for that.
Examples:
if defaultPlaybackRate is set to 2, media will play twice as fast.
if defaultPlaybackRate is set to 0.5, media will play half as fast.
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 the Components style.width and falls back to window.getComputedStyle.
See this
for more information
If you want the computed style of the component, use Component#currentWidth
and {Component#currentHeight
value
- The value of disablePictureInPicture from the video element.
- True indicates that the video can't be played in Picture-In-Picture mode
- False indicates that the video can be played in Picture-In-Picture mode
Emit a 'tap' events when touch event support gets detected. This gets used to
support toggling the controls through a tap on the video. They get enabled
because every sub-component would have extra overhead otherwise.
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 and touchend 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 a touchmove event and anything other than a tap, should not turn
controls back on.
Listens to Events:
Component#event:touchstart
Component#event:touchmove
Component#event:touchend
Component#event:touchcancel
ended(){boolean}
Get the value of ended from the media element. ended indicates whether
the media has reached the end or not.
Get the value of the error from the media element. error indicates any
MediaError that may have occurred during playback. If error returns null there is no
current error.
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 attribute does not exist or has
no value.
Returns the descendant Component following the givent
descendant names. For instance ['foo', 'bar', 'baz'] would
try to get 'foo' on the current component, 'bar' on the 'foo'
component and 'baz' on the 'bar' component and return undefined
if any of those don't exist.
Retrieves the position and size information of the component's element.
Returns:
Type
Description
Object
An object with boundingClientRect and center properties.
- boundingClientRect: An object with properties x, y, width,
height, top, right, bottom, and left, representing
the bounding rectangle of the element.
- center: An object with properties x and y, representing
the center point of the element. width and height are set to 0.
Many components used to have a handleKeyPress method, which was poorly
named because it listened to a keydown event. This method name now
delegates to handleKeyDown. This means anyone calling handleKeyPress
will not see their method calls stop working.
If tokens are provided, it'll try and run a simple token replacement on the provided string.
The tokens it looks for look like {1} with the index being 1-indexed into the tokens array.
If a defaultValue is provided, it'll use that over string,
if a value isn't found in provided language files.
This is useful if you want to have a descriptive key for token replacement
but have a succinct localized string and not require en.json to be included.
Currently, it is used for the progress bar timing.
{
"progress bar timing: currentTime={1} duration={2}": "{1} of {2}"
}
It is then used like so:
this.localize('progress bar timing: currentTime={1} duration{2}',
[this.player_.currentTime(), this.player_.duration()],
'{1} of {2}');
Which outputs something like: 01:23 of 24:56.
Name
Type
Description
string
string
The string to localize and the key to lookup in the language files.
tokens
Array.<string>
optional
If the current item has token replacements, provide the tokens here.
defaultValue
string
optional
Defaults to string. Can be a default value to use for token replacement
if the lookup key is needed to be separate.
Returns:
Type
Description
string
The localized string or if no localization exists the english string.
loop(){boolean}
Get the value of loop from the media element. loop indicates
that the media should return to the start of the media and continue playing once
it reaches the end.
The value of loop from the media element.
- True indicates that playback should seek back to start once
the end of a media is reached.
- False indicates that playback should not loop back to the start when the
end of the media is reached.
Get the value of muted from the media element. muted indicates
that the volume for the media should be set to silent. This does not actually change
the volume attribute.
Get the Components name. The name gets used to reference the Component
and is set during registration.
Returns:
Type
Description
string
The name of this Component.
networkState(){number}
Get the value of networkState from the media element. networkState indicates
the current network state. It returns an enumeration from the following list:
Get the value of playsinline from the media element. playsinline indicates
to the browser that non-fullscreen playback is preferred when fullscreen
playback is the native default, such as in iOS Safari.
The value of playsinline from the media element.
- True indicates that the media should play inline.
- False indicates that the media should not play inline.
poster(){string}
Get the value of poster from the media element. poster indicates
that the url of an image file that can/will be shown when no media data is available.
The value of poster from the media element. Value will be a url to an
image.
preload(){string}
Get the value of preload from the media element. preload indicates
what should download before the media is interacted with. It can have the following
values:
none: nothing should be downloaded
metadata: poster and the first few frames of the media may be downloaded to get
media dimensions and other metadata
auto: allow the media and metadata for the media to be downloaded before
interaction
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.
Function that gets called when the Component is ready.
readyState(){number}
Get the value of readyState from the media element. readyState indicates
the current state of the media element. It returns an enumeration from the
following list:
Returns an rAF ID that gets used to identify the timeout. It can
also be used in Component#cancelAnimationFrame to cancel
the animation frame callback.
Create a floating video window always on top of other windows so that users may
continue consuming media while they interact with other content sites, or
applications on their device.
Native requestVideoFrameCallback if supported by browser/tech, or fallback
Don't use rVCF on Safari when DRM is playing, as it doesn't fire
Needs to be checked later than the constructor
This will be a false positive for clear sources loaded after a Fairplay source
The value of seeking from the media element.
- True indicates that the media is currently seeking to a new position.
- False indicates that the media is not seeking to a new position at this time.
Set the value of crossOrigin from the media element. crossOrigin indicates
to the browser that should sent the cookies along with the requests for the
different assets/playlists
Name
Type
Description
crossOrigin
string
anonymous indicates that the media should not sent cookies.
- use-credentials indicates that the media should sent cookies along the requests.
Set the value of defaultMuted on the media element. defaultMuted indicates that the current
audio level should be silent, but will only effect the muted level on initial playback..
Name
Type
Description
defaultMuted
boolean
True if the audio should be set to silent
- False otherwise
Set the value of defaultPlaybackRate on the media element. defaultPlaybackRate indicates
the rate at which the media should play back upon initial startup. Changing this value
after a video has started will do nothing. Instead you should used Html5#setPlaybackRate.
Example Values:
if playbackRate is set to 2, media will play twice as fast.
if playbackRate is set to 0.5, media will play half as fast.
Creates a function that gets run every x milliseconds. This function is a wrapper
around window.setInterval. There are a few reasons to use this one instead though.
Returns an id that can be used to identify the interval. It can also be be used in
Component#clearInterval to clear the interval.
setLoop(loop)
Set the value of loop on the media element. loop indicates
that the media should return to the start of the media and continue playing once
it reaches the end.
Name
Type
Description
loop
boolean
True indicates that playback should seek back to start once
the end of a media is reached.
- False indicates that playback should not loop back to the start when the
end of the media is reached.
Set the value of playsinline from the media element. playsinline indicates
to the browser that non-fullscreen playback is preferred when fullscreen
playback is the native default, such as in iOS Safari.
Name
Type
Description
playsinline
boolean
True indicates that the media should play inline.
- False indicates that the media should not play inline.
Set the value of preload on the media element. preload indicates
what should download before the media is interacted with. It can have the following
values:
none: nothing should be downloaded
metadata: poster and the first few frames of the media may be downloaded to get
media dimensions and other metadata
auto: allow the media and metadata for the media to be downloaded before
interaction
Name
Type
Description
preload
string
The value of preload to set on the media element. Must be 'none', 'metadata',
or 'auto'.
Set whether we are scrubbing or not.
This is used to decide whether we should use fastSeek or not.
fastSeek is used to provide trick play on Safari browsers.
Name
Type
Description
isScrubbing
boolean
true for we are currently scrubbing
- false for we are no longer scrubbing
setSrc(src)
Set the value of src on the media element. src indicates the current
Tech~SourceObject for the media.
Creates a function that runs after an x millisecond timeout. This function is a
wrapper around window.setTimeout. There are a few reasons to use this one
instead though:
Note: You can't 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 instead.
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.
setupSourcesetHandling_()
Modify the media element so that we can detect when
the source is changed. Fires sourceset just after the source has changed
setVolume(percentAsDecimal)
Set the value of volume on the media element. volume indicates the current
audio level as a percentage in decimal form. This means that 1 is 100%, 0.5 is 50%, and
so on.
Name
Type
Description
percentAsDecimal
number
The volume percent as a decimal. Valid range is from 0-1.
Turn off the polyfill for progress events that was created in
Tech#manualProgressOn
Stop manually tracking progress events by clearing the interval that was set in
Tech#trackProgress.
supportsFullScreen(){boolean}
Check if fullscreen is supported on the video el.
Returns:
Type
Description
boolean
True if fullscreen is supported.
- False if fullscreen is not supported.
This is used to trigger a progress event when the buffered percent changes. It
sets an interval function that will be called every 500 milliseconds to check if the
buffer end percent has changed.
The value of videoWidth from the video element. This will be a number
in css pixels.
volume(){number}
Get the value of volume from the media element. volume indicates
the current playback volume of audio for a media. volume will be a value from 0
(silent) to 1 (loudest and default).
Check if the playback rate can be changed in this browser/device.
Returns:
Type
Description
boolean
True if playback rate can be controlled
- False otherwise
staticHtml5.canControlVolume(){boolean}
Check if the volume can be changed in this browser/device.
Volume cannot be changed in a lot of mobile devices.
Specifically, it can't be changed from 1 on iOS.
Returns:
Type
Description
boolean
True if volume can be controlled
- False otherwise
staticHtml5.canMuteVolume(){boolean}
Check if the volume can be muted in this browser/device.
Some devices, e.g. iOS, don't allow changing volume
but permits muting/unmuting.
Returns:
Type
Description
boolean
True if volume can be muted
False otherwise
staticHtml5.canOverrideAttributes(){boolean}
Check if we can override a video/audio elements attributes, with
Object.defineProperty.
Returns:
Type
Description
boolean
True if builtin attributes can be overridden
- False otherwise
Trigger timeupdate because we're done seeking and the time has changed.
This is particularly useful for if the player is paused to time the time displays.