- Version
- 1.0.1
- License
- MIT
- Requires
- object
- AsyncTask
- ExtendedMediaError
- Source
- Media.js, line 17
Constructor
new Media(player, parent, optionsopt)
Creates an instance of the Media component.
| Name | Type | Attributes | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
player |
Player |
The player instance. |
|||||||||
parent |
Player |
Reference to the parent instance. |
|||||||||
options |
Object | optional |
Additional options.
|
- Throws
-
If trying to disable this component.
Type Error
Members
private #config :Object
Holds the instance configuration for this component.
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
autoPlay
|
boolean | optional | false | If |
autoMute
|
boolean | optional | true | If |
loop
|
boolean | optional | false | If |
muted
|
boolean | optional | false | Sets the initial mute state of the media. |
volume
|
number | optional | 1 | Sets the initial volume (range 0 to 1). |
preload
|
string | optional | 'metadata' | Determines how much of the data is preloaded. Possible values: 'metadata', 'auto' or 'none'. It is strongly recommended to leave this setting as it is, as many components require to have metadata loaded. In addition, not all browsers behave identically here, some seem to simply ignore values like „none“. |
crossOrigin
|
string | optional | 'anonymous' | Use 'anonymous' or 'use-credentials' to enable CORS support. |
stallTimeout
|
number | optional | 2 | Timeout (in seconds) after which the stall event is triggered. Use |
private #player :Player
private #subscriptions :Array<number>
Holds tokens of subscriptions to player events, for later unsubscribe.
private #apiKey :symbol
Secret key only known to the player instance and initialized components. Used to be able to restrict access to API methods in conjunction with secure mode.
private #plugins :Map
A Map of registered plugins that may handle special media types or override source logic.
private #state :Object
The current state of the Media. All of its properties should be using a getter, but no setter, so the state is always readonly in effect.
Use the players' getState() API to read from this object.
| Name | Type | Description |
|---|---|---|
src
|
string | The current media source URL. |
width
|
number | Original width of the video in pixels. |
height
|
number | Original height of the video in pixels. |
preload
|
string | Preload setting of the media element. |
networkState
|
number | Network state of the media element. |
readyState
|
number | Ready state of the media element. |
error
|
Object | Current error object if any, otherwise this returns 'null'. |
duration
|
number | Total duration of the current media in seconds. |
currentTime
|
number | Current playhead position, in seconds. |
remainingTime
|
number | Current remaining time (duration - currentTime), in seconds. |
paused
|
boolean | Whether the media is currently paused. |
ended
|
boolean | Whether the media has ended. |
loop
|
boolean | Whether looping is enabled. |
muted
|
boolean | Whether the media is muted. |
volume
|
number | The current volume, ranges from 0 (silent) to 1 (full Volume). |
playbackRate
|
number | The current playback speed (1 means normal speed). |
seeking
|
boolean | Whether the media is currently seeking. |
seekable
|
TimeRanges | Seekable time ranges. |
buffered
|
TimeRanges | Buffered time ranges. |
played
|
TimeRanges | Played time ranges. |
liveStream
|
boolean | Whether the media is a live stream. |
frameRate
|
number | The frameRate of the current stream (might not always be available). |
private #savedState :Object
If loading a new source, the current state may be needed to be restored. If that's the case, the former state is saved in this object.
| Name | Type | Attributes | Description |
|---|---|---|---|
src
|
string | The src of the stream. |
|
time
|
number | nullable | The currentTime value of the former media state. |
paused
|
boolean | Set to 'true' if the former media state was paused. |
|
play
|
boolean | If 'true', play when restoring. |
|
ignoreAutoplay
|
boolean | If 'true', ingore autoPlay when restoring. |
private #stall :Object
Object containing stall related data.
| Name | Type | Description |
|---|---|---|
state
|
'clear' | 'delaying' | 'stalled' | Indicates current stall status: can be 'clear', 'delaying', or 'stalled'. |
preStallTime
|
number | Stores the playback time just before stalling begins, for stall detection logic. |
checkId
|
number | Timeout id for stall check. |
private #metaData :Media~metaData
Holds metadata information provided by media.load and loaded metadata.
- Type
- Media~metaData
- Source
- Media.js, line 128
private #loadTask :AsyncTask
Reference to the Async Task instance. Used to handle async tasks, which can be cancelled, resolved or rejected.
private #videoEle :HTMLVideoElement
private, static #eventList :Array<string>
This is a list of supported events by this engine. Corresponds to the HTML5 media event names.
Methods
setupState()
Sets up the internal state of the media object and exposes it to the global player state.
static registerPlugin(plugin)
Registers a new plugin. Plugins can 'takeover' certain functions, esp media.load to add their own functionality Used by Components like Dash or Hls.
| Name | Type | Description |
|---|---|---|
plugin |
Object |
The plugin to add. |
unregisterPlugin(plugin)
UNRegisters a plugin.
| Name | Type | Description |
|---|---|---|
plugin |
Object |
The plugin to remove. |
private #onDataReady()
Sets up the engine as soon as the media data is available.
- Listens
- data/ready
- Source
- Media.js, line 252
private #load(metaData, optionsopt) → Promise
Sets a new source for the media, in effect loading the video or audio. May delegate to plugins for formats with certain mine types and / or extensions.
| Name | Type | Attributes | Description |
|---|---|---|---|
metaData |
Media~metaData |
The source to load. |
|
options |
Media~mediaLoadOptions | optional |
Options to control additional behavior. |
private #onLoaded()
This method is called when a new source was successfully loaded. If saved state is found, it also tries to restore the former state (like the currentTime by seeking).
- Fires
- media/ready
- Source
- Media.js, line 336
private #getMetaData() → Media~metaData
Returns a cpoy of the current media metadata.
- Returns
-
Object with current metadata.
- Type Media~metaData
- Source
- Media.js, line 375
private #canPlay(metaData) → string
In essence, this is just a wrapper for the media elements' 'canPlay' method.
| Name | Type | Description |
|---|---|---|
metaData |
Media~metaData |
The data to test. |
private #play() → Promise|undefined
Starts playing the media.
private #pause()
private #loop(doLoop)
Disables or enables looping.
| Name | Type | Description |
|---|---|---|
doLoop |
boolean |
If |
- Fires
- media/loop
- Source
- Media.js, line 422
private #playbackRate(rate)
Changes current playback rate.
| Name | Type | Description |
|---|---|---|
rate |
number |
The new rate to set. |
private #seek(position)
Seeks the media to the specified position. This method also tries to mitigate rounding errors when frame precise seeking is required.
| Name | Type | Description |
|---|---|---|
position |
number |
The position (measured in seconds) to seek to. |
private #volume(vol)
Sets a new volume.
| Name | Type | Description |
|---|---|---|
vol |
number |
The new volume, number should be in the range of 0...1. |
private #mute(doMute)
Mutes, or unmutes the media.
| Name | Type | Description |
|---|---|---|
doMute |
boolean |
If |
private #onStall()
Called when certain events indicate the stream might be stalling (e.g. Waiting, play).
- Listens
- media/waiting
- media/play
- Source
- Media.js, line 489
private #onStallEnd()
Called when events suggest the stalling might have ended (e.g. Timeupdate, pause, data/ready).
- Listens
- media/pause
- media/ready
- media/timeupdate
- data/ready
- Source
- Media.js, line 524
private #onStreamEvent(event)
This listens to native media events and sends them through the pubsub library in order to abstract and wrap the native HTML5 media events. Any components should avoid listening to the native event directly on the video element, but subscribe to the various events emitted here.
| Name | Type | Description |
|---|---|---|
event |
Event |
The native HTML5 media event. |
- Fires
- media/abort
- media/canplay
- media/canplaythrough
- media/durationchange
- media/emptied
- media/ended
- media/error
- media/loadeddata
- media/loadedmetadata
- media/loadstart
- media/play
- media/pause
- media/progress
- media/ratechange
- media/seeked
- media/seeking
- media/stalled
- media/suspend
- media/timeupdate
- media/volumechange
- media/waiting
- media/webkitbeginfullscreen
- media/webkitendfullscreen
- Source
- Media.js, line 566
private #getMediaElement(apiKey) → HTMLElement
Used by components to retrieve the video element.
| Name | Type | Description |
|---|---|---|
apiKey |
symbol |
Token needed to grant access in secure mode. |
private #removeElement()
Removes the old media element, unsubscribes from native events, and clears state.
destroy()
This method removes all events, subscriptions and DOM nodes created by this component.
Type Definitions
metaData
The mediaSource is a representation of the currently selected media source.
| Name | Type | Attributes | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
src
|
string | The source url of the video (can be absolute, relative or blob:). |
|||||||||||||
mediaType
|
'video' | 'audio' | The type of the current media (currently 'video' or 'audio' is supported). |
|||||||||||||
mimeType
|
string | The mimetype, optionally extended with codec param if available. |
|||||||||||||
encodings
|
Array<Object> | optional | Available additional encodings.
|
||||||||||||
width
|
number | optional | Width of the video in pixel. |
||||||||||||
height
|
number | optional | Height of the video in pixel. |
||||||||||||
frameRate
|
number | optional | Framerate of the video (might not always be available). |
||||||||||||
bitRate
|
number | optional | Bitrate of the video (might not always be available). |
||||||||||||
language
|
string | optional | The language of the current media. |
||||||||||||
langId
|
string | number | optional | The language id of the current media. |
||||||||||||
langName
|
string | optional | The language (extended) name of the current media. |
mediaLoadOptions
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
rememberState
|
boolean | optional | false | If |
ignoreAutoplay
|
boolean | optional | false | If |
play
|
boolean | optional | false | If |
Events
media/ready
Fired when media is 'ready', i.e. A source has been loaded and metadata is available.
| Name | Type | Description |
|---|---|---|
metaData |
Media~metaData |
The currently selected media meta data. |
- Listeners
- AirPlay#onMediaReady
- ChromeCast#onMediaReady
- Loop#onMediaReady
- PlayOverlay#onMediaReady
- Scrubber#onMediaReady
- ScrubberTooltip#onMediaReady
- Media#onStallEnd
- Language#updateMenu
- PlaybackRate#onMediaReady
- Quality#updateMenu
- Hls#onMediaReady
- Subtitles#onMediaReady
- Chapters#onMediaReady
- Popup#refreshPopup
- Thumbnails#onMediaReady
- Time#onMediaReady
- Title#onMediaReady
- AudioChain#connectVideo
- Source
- Media.js, line 694
media/abort
This corresponds to the standard HTML5 media 'abort' event (wrapped by the pubsub engine).
media/canplay
This corresponds to the standard HTML5 media 'canplay' event (wrapped by the pubsub engine).
- Listeners
- ChromeCast#enable
- FullScreen#enable
- Keyboard#enable
- Loop#enable
- PictureInPicture#enable
- Play#enable
- PlayOverlay#enable
- Scrubber#enable
- Volume#enable
- PlaybackRate#enable
- Chapters#enable
- Notifications#hide
- Overlays#enable
- Time#enable
- UI#enableClickPlay
- AnalyserVideo#refresh
- VisualizerAmbient#refresh
- Source
- Media.js, line 705
media/canplaythrough
This corresponds to the standard HTML5 media 'canplaythrough' event (wrapped by the pubsub engine).
media/error
This corresponds to the standard HTML5 media 'error' event (wrapped by the pubsub engine).
- Listeners
- ChromeCast#disable
- FullScreen#disable
- Keyboard#disable
- Loop#disable
- PictureInPicture#disable
- Play#disable
- PlayOverlay#disable
- Scrubber#disable
- Volume#disable
- PlaybackRate#disable
- Chapters#disable
- Notifications#onMediaError
- Overlays#disable
- Time#disable
- UI#disableClickPlay
- Source
- Media.js, line 715
media/durationchange
This corresponds to the standard HTML5 media 'durationchange' event (wrapped by the pubsub engine).
media/emptied
This corresponds to the standard HTML5 media 'emptied' event (wrapped by the pubsub engine).
media/ended
This corresponds to the standard HTML5 media 'ended' event (wrapped by the pubsub engine).
- Listeners
- Playlist#onMediaEnded
- Overlays#update
- Source
- Media.js, line 730
media/loadstart
This corresponds to the standard HTML5 media 'loadstart' event (wrapped by the pubsub engine).
media/loadeddata
This corresponds to the standard HTML5 media 'loadeddata' event (wrapped by the pubsub engine).
media/loadedmetadata
This corresponds to the standard HTML5 media 'loadedmetadata' event (wrapped by the pubsub engine).
media/play
This corresponds to the standard HTML5 media 'play' event (wrapped by the pubsub engine).
- Listeners
- FullScreen#togglePlayPause
- Play#onPlay
- PlayOverlay#onPlay
- Scrubber#onUpdateStart
- Media#onStall
- Notifications#hide
- Time#onPlay
- AudioChain#resumeAudio
- AnalyserAudio#startLoop
- AnalyserVideo#startLoop
- VisualizerBar#startLoop
- VisualizerFrequency#startLoop
- VisualizerTime#startLoop
- VisualizerTime#analyseLoop
- Source
- Media.js, line 750
media/pause
This corresponds to the standard HTML5 media 'pause' event (wrapped by the pubsub engine).
media/progress
This corresponds to the standard HTML5 media 'progress' event (wrapped by the pubsub engine).
- Listeners
- Scrubber#render
- Source
- Media.js, line 760
media/ratechange
This corresponds to the standard HTML5 media 'ratechange' event (wrapped by the pubsub engine).
- Listeners
- ChromeCast#onPlaybackRateChange
- PlaybackRate#onRateChange
- Source
- Media.js, line 765
media/seeked
This corresponds to the standard HTML5 media 'seeked' event (wrapped by the pubsub engine).
- Listeners
- Scrubber#render
- Overlays#update
- AnalyserVideo#refresh
- VisualizerAmbient#refresh
- Source
- Media.js, line 770
media/seeking
This corresponds to the standard HTML5 media 'seeking' event (wrapped by the pubsub engine).
media/stalled
This corresponds to the standard HTML5 media 'stalled' event (wrapped by the pubsub engine).
media/suspend
This corresponds to the standard HTML5 media 'suspend' event (wrapped by the pubsub engine).
media/timeupdate
This corresponds to the standard HTML5 media 'timeupdate' event (wrapped by the pubsub engine).
media/volumechange
This corresponds to the standard HTML5 media 'volumechange' event (wrapped by the pubsub engine).
- Listeners
- Volume#onVolumeUpdate
- Source
- Media.js, line 795
media/waiting
This corresponds to the standard HTML5 media 'waiting' event (wrapped by the pubsub engine).
- Listeners
- Media#onStall
- Source
- Media.js, line 800
media/loop
This event is fired when looping starts or ends.
- Listeners
- Loop#onLoopChange
- Source
- Media.js, line 805
media/webkitbeginfullscreen
This event is fired by iOS only, when the media tag enters fullscreen. (On these systems, only the media itself can enter fullscreen, not an arbitrary HTML element).
- Listeners
- FullScreen#enterFullScreen
- Source
- Media.js, line 810
media/webkitendfullscreen
This event is fired by iOS only, when the media tag leaves fullscreen. (On these systems, only the media itself can enter fullscreen, not an arbitrary HTML element).
- Listeners
- FullScreen#exitFullScreen
- Source
- Media.js, line 816
media/enterpictureinpicture
This event is fired when the media enters Picture in Picture mode.
- Listeners
- PictureInPicture#onPipEnter
- VisualizerAmbient#stopLoop
- Source
- Media.js, line 822
media/leavepictureinpicture
This event is fired when the media leaves Picture in Picture mode.
- Listeners
- PictureInPicture#onPipExit
- VisualizerAmbient#startLoop
- Source
- Media.js, line 827
media/stall/begin
Fired when media playback begins to stall, usually because bandwidth is not sufficient to achieve continuous playback, or also if the buffer is not filled with data yet. Note that there are similar media events like 'stalled', but these are not really reliable and browser implementation varies. This event tries to solve these inconsistencies and should also cover edge cases the browser don't handle.
- Listeners
- Quality#onStallBegin
- Spinner#show
- Source
- Media.js, line 832
media/stall/end
Fired when media playback has recovered from stalling and is playing (or playable when paused) again.
- Listeners
- Quality#onStallEnd
- Spinner#hide
- Source
- Media.js, line 839