- Overview
- Instantiation
- Static properties
- Tools
- Methods
- loadVideo
- getVideoElement
- getPlayerState
- addEventListener
- removeEventListener
- play
- pause
- stop
- getPosition
- getWallClockTime
- getVideoDuration
- getVolume
- getError
- seekTo
- isLive
- getUrl
- isFullscreen
- getAvailableVideoBitrates
- getAvailableAudioBitrates
- getVideoBitrate
- getAudioBitrate
- getMaxVideoBitrate
- getMaxAudioBitrate
- setVideoBitrate
- setAudioBitrate
- getManualVideoBitrate
- getManualAudioBitrate
- setWantedBufferAhead
- getWantedBufferAhead
- setMaxBufferBehind
- getMaxBufferBehind
- setMaxBufferAhead
- getMaxBufferAhead
- setMaxVideoBitrate
- setMaxAudioBitrate
- setFullscreen
- exitFullscreen
- setVolume
- mute
- unMute
- isMute
- getAvailableAudioTracks
- getAvailableTextTracks
- getAvailableVideoTracks
- getAudioTrack
- getTextTrack
- getVideoTrack
- setAudioTrack
- setTextTrack
- disableTextTrack
- setVideoTrack
- getManifest
- getCurrentAdaptations
- getCurrentRepresentations
- dispose
- getNativeTextTrack
- getVideoLoadedTime
- getVideoPlayedTime
- getVideoBufferGap
- getPlaybackRate
- setPlaybackRate
- getCurrentKeySystem
- getImageTrackData
- getMinimumPosition
- getMaximumPosition
The Rx-player has a complete API allowing you to:
- load and stop video or audio contents
- perform trickmodes (play, pause, seek, etc.) as a content is loaded.
- get multiple informations on the current content and on the player's state.
- choose a specific audio language or subtitles track
- set your own bitrate and buffer length
- and more
The following pages define the entire API.
Only use the documented variables and open an issue if you think it's not enough.
Note: As some terms used here might be too foreign or slightly different than the one you're used to, we also wrote a list of terms and definitions used by the RxPlayer here.
Instantiating a new player is straightforward:
import RxPlayer from "rx-player";
const player = new RxPlayer(options);
The options are all... optional. They are all defined in the Player Options page.
type: Number
The current version of the RxPlayer.
type: Object
The different "types" of Error you can get on playback error,
See the Player Error documentation for more informations.
type: Object
The different Error "codes" you can get on playback error,
See the Player Error documentation for more informations.
type: string
default: "NONE"
The current level of verbosity for the RxPlayer logs. Those logs all use the console.
From the less verbose to the most:
-
"NONE"
: no log -
"ERROR"
: unexpected errors (viaconsole.error
) -
"WARNING"
: The previous level + minor problems encountered (viaconsole.warn
) -
"INFO"
: The previous levels + noteworthy events (viaconsole.info
) -
"DEBUG"
: The previous levels + normal events of the player (viaconsole.log
)
If the value set to this property is different than those, it will be
automatically set to "NONE"
.
import RxPlayer from "rx-player";
RxPlayer.LogLevel = "WARNING";
type: Object
An experimental tool to probe browser media capabilities:
- Decoding capabilities
- DRM support
- HDCP support
- Display capabilities
You can find its documentation here.
arguments:
- options (
Object
)
Loads a new video described in the argument.
The options possible as arguments are all defined in this page.
player.loadVideo({
url: "http://vm2.dashif.org/livesim-dev/segtimeline_1/testpic_6s/Manifest.mpd",
transport: "dash",
autoPlay: true,
});
return value: HTMLMediaElement
Returns the video element used by the player.
You're not encouraged to use its API, you should always prefer the Player's API.
const videoElement = player.getVideoElement();
videoElement.className = "my-video-element";
return value: string
The current player's state. Can be either one of those strings:
-
"STOPPED"
: The player is idle. No content is loading nor is loaded. -
"LOADING"
: The player is loading a new content. Most APIs related to the current content are not yet available while the content is loading. -
"LOADED"
: The player has loaded the new content, it is now ready to play. From this point onward you can use APIs interacting with the current content such asseekTo
orsetAudioTrack
. -
"PLAYING"
: The player is currently playing the content. -
"PAUSED"
: The player has paused. -
"ENDED"
: The player has reached the end of the current content. -
"BUFFERING"
: the player has reached the end of the buffer and is waiting for data to be appended. -
"SEEKING"
: The player has reached the end of the buffer because a seek has been performed, new segments are being loaded. -
"RELOADING"
: The player needs to reload its current (for example, when switching the current video track). While this state is active, most API related to the currently playing content are not available. This state should be treated like theLOADING
state.
As it is a central part of our API and can be difficult concept to understand, we have a special page of documentation on player states.
switch (player.getPlayerState()) {
case "STOPPED":
console.log("No content is/will be playing");
break;
case "LOADING":
console.log("A new content is currently loading");
break;
case "LOADED":
console.log("The new content is loaded and ready to be played");
break;
case "PLAYING":
console.log("The content is currently playing");
break;
case "PAUSED":
console.log("The content is currently paused");
break;
case "BUFFERING":
console.log("The content is buffering new data");
break;
case "SEEKING":
console.log("The content is still seeking, waiting for new data");
break;
case "ENDED":
console.log("The content has reached the end.");
break;
case "RELOADING":
console.log("The content is currently reloading");
break;
default:
console.log("This is impossible (issue material!).")
break;
}
arguments:
-
event (
string
): The event name. -
callback (
Function
): The callback for the event. The same callback may be used again when callingremoveEventListener
.
Add an event listener to trigger a callback as it happens. The callback will have the event payload as a single argument.
To have the complete list of player events, consult the Player events page.
player.addEventListener("Error", function(err) {
console.log(`The player crashed: ${err.message}`);
});
arguments:
- event (
string
): The event name. - callback (optional) (
Function
): The callback given when calling the correspondingaddEventListener
API.
Remove an event listener. That is, stop your registered callback (with
addEventListener
) to be called as events happen and free up ressources.
The callback given is optional: if not given, every registered callback to that event will be removed. That's why using both arguments is recommended for most usecase.
player.removeEventListener("playerStateChange", listenerCallback);
return value: Promise.<void>
Play/resume the current video. Equivalent to a video element's play method.
The returned Promise informs you on the result:
-
if playback succeeds, the Promise is fulfilled
-
if playback fails, the Promise is rejected along with an error message explaining the failure - coming directly from the browser.
Such failure can for example be due to your browser's policy, which may forbid to call play on a media element without any user interaction. Please note that in that case, you will also receive a warning event containing a
MEDIA_ERROR
with the code:MEDIA_ERR_PLAY_NOT_ALLOWED
.
Note: On browsers which do not support Promises natively (such as Internet Explorer 11), a JavaScript implementation is provided instead. This implementation has the exact same implementation than ES2015 Promises.
const resumeContent = () => {
player.play();
};
Pause the current video. Equivalent to a video element's pause method.
Note that a content can be paused even if its current state is BUFFERING
or
SEEKING
.
const pauseContent = () => {
player.pause();
};
Stop playback of the current content if one.
const stopVideo = () => {
player.stop();
};
return value: Number
Returns the video element's current position, in seconds.
The difference with the getWallClockTime
method is that for live contents
the position is not re-calculated to match a live timestamp.
const pos = player.getPosition();
console.log(`The video element's current position is: ${pos} second(s)`);
return value: Number
Returns the wall-clock-time of the current position in seconds.
That is:
- for live content, get a timestamp in seconds of the current position.
- for static content, returns the position from beginning, also in seconds.
Use this method to display the current position to the user.
const wallClockTime = player.getWallClockTime();
const nowInSeconds = Date.now() / 1000;
const delta = nowInSeconds - wallClockTime;
if (delta < 5) { // (5 seconds of margin)
console.log("You're playing live");
} else {
console.log(`You're playing ${delta} seconds behind the live content`);
}
return value: Number
Returns the duration of the current video, directly from the video element.
const pos = player.getPosition();
const dur = player.getVideoDuration();
console.log(`current position: ${pos} / ${dur}`);
return value: Number
Current volume of the player, from 0 (no sound) to 1 (maximum sound). 0 if muted (different than videoElement.muted).
const volume = player.getVolume();
if (volume === 1) {
console.log("You're playing at maximum volume");
} else if (volume === 0) {
console.log("You're playing at no volume");
} else if (volume > 0.5) {
console.log("You're playing at a high volume");
} else {
console.log("You're playing at a low volume");
}
return value: Error|null
Returns the fatal error if it happened. null otherwise.
See the Player Error documentation for more informations.
const error = player.getError();
if (!error) {
console.log("The player did not crash");
} else if (error.code === "PIPELINE_LOAD_ERROR") {
console.error("The player crashed due to a failing request");
} else {
console.error(`The player crashed: ${error.code}`);
}
arguments: Object|Number
Seek in the current content.
The argument can be an object with a single Number
property, either:
-
relative
: seek relatively to the current position -
position
: seek to the given absolute position (equivalent toplayer.getVideoElement().currentTime = newPosition
) -
wallClockTime
: seek to the given wallClock position, as returned bygetWallClockTime
.
The argument can also just be a Number
property, which will have the same
effect than the position
property (absolute position).
// seeking to 54 seconds from the start of the content
player.seekTo({ position: 54 });
// equivalent to just:
player.seekTo(54);
// seeking 5 seconds after the current position
player.seekTo({ relative: 5 });
// seeking 5 seconds before the current position
player.seekTo({ relative: -5 });
// seeking to live content
player.seekTo({ wallClockTime: Date.now() / 1000 });
return value: Boolean
Returns true
if the content is "live". false
otherwise.
Also false
if no content is loaded yet.
if (player.isLive()) {
console.log("We're playing a live content");
}
return value: string|undefined
Returns the URL of the downloaded Manifest.
In DirectFile mode (see loadVideo options), returns the URL of the content being played.
Returns undefined
if no content is loaded yet.
const url = player.getUrl();
if (url) {
console.log("We are playing the following content:", url);
}
v4.0.0
(see Deprecated APIs).
return value: Boolean
Returns true
if the video element is in fullscreen mode, false
otherwise.
if (player.isFullscreen()) {
console.log("The player is in fullscreen mode");
}
return value: Array.<Number>
The different bitrates available for the current video Adaptation, in bits per seconds.
In DirectFile mode (see loadVideo options), returns an empty Array.
const videoBitrates = player.getAvailableVideoBitrates();
if (videoBitrates.length) {
console.log(
"The current video is available in the following bitrates",
videoBitrates.join(", ")
);
}
return value: Array.<Number>
The different bitrates available for the current audio Adaptation, in bits per seconds.
In DirectFile mode (see loadVideo options), returns an empty Array.
const audioBitrates = player.getAvailableAudioBitrates();
if (audioBitrates.length) {
console.log(
"The current audio is available in the following bitrates",
audioBitrates.join(", ")
);
}
return value: Number|undefined
Returns the video bitrate of the last downloaded video segment, in bits per seconds.
Returns undefined
if no content is loaded.
In DirectFile mode (see loadVideo
options), returns undefined
.
return value: Number|undefined
Returns the audio bitrate of the last downloaded audio segment, in bits per seconds.
Returns undefined
if no content is loaded.
In DirectFile mode (see loadVideo
options), returns undefined
.
return value: Number|undefined
Returns the maximum set video bitrate to which switching is possible, in bits per seconds.
This only affects adaptive strategies (you can bypass this limit by calling
setVideoBitrate
), and is set to Infinity
when no limit has been set.
return value: Number"undefined
Returns the maximum set audio bitrate to which switching is possible, in bits per seconds.
This only affects adaptive strategies (you can bypass this limit by calling
setAudioBitrate
), and is set to Infinity
when no limit has been set.
arguments: Number
Force the current video track to be of a certain bitrate.
If an video Representation (in the current video Adaptation) is found with the exact same bitrate, this Representation will be set.
If no video Representation is found with the exact same bitrate, either:
-
the video Representation immediately inferior to it will be chosen instead (the closest inferior)
-
if no video Representation has a bitrate lower than that value, the video Representation with the lowest bitrate will be chosen instead.
Set to -1
to deactivate (and thus re-activate adaptive streaming for video
tracks).
When active (called with a positive value), adaptive streaming for video tracks will be disabled to stay in the chosen Representation.
You can use getAvailableVideoBitrates
to get the list of available bitrates
you can set on the current content.
Note that the value set is persistent between loadVideo
calls.
As such, this method can also be called when no content is playing (the same
rules apply for future contents).
arguments: Number
Force the current audio track to be of a certain bitrate.
If an audio Representation (in the current audio Adaptation) is found with the exact same bitrate, this Representation will be set.
If no audio Representation is found with the exact same bitrate, either:
-
the audio Representation immediately inferior to it will be chosen instead (the closest inferior)
-
if no audio Representation has a bitrate lower than that value, the audio Representation with the lowest bitrate will be chosen instead.
Set to -1
to deactivate (and thus re-activate adaptive streaming for audio
tracks).
When active (called with a positive value), adaptive streaming for audio tracks will be disabled to stay in the chosen Representation.
You can use getAvailableAudioBitrates
to get the list of available bitrates
you can set on the current content.
Note that the value set is persistent between loadVideo
calls.
As such, this method can also be called when no content is playing (the same
rules apply for future contents).
arguments: Number
Get the last video bitrate manually set. Either via setVideoBitrate
or via
the initialVideoBitrate
constructor option.
This value can be different than the one returned by getVideoBitrate
:
getManualVideoBitrate
returns the last bitrate set manually by the usergetVideoBitrate
returns the actual bitrate of the current video track
-1
when no video bitrate is forced.
arguments: Number
Get the last audio bitrate manually set. Either via setAudioBitrate
or via
the initialAudioBitrate
constructor option.
This value can be different than the one returned by getAudioBitrate
:
getManualAudioBitrate
returns the last bitrate set manually by the usergetAudioBitrate
returns the actual bitrate of the current audio track
-1
when no audio bitrate is forced.
arguments: Number
Set the maximum video bitrate reachable through adaptive streaming. The player will never automatically switch to a video Representation with a higher bitrate.
This limit can be removed by setting it to Infinity
:
// remove video bitrate limit
player.setMaxVideoBitrate(Infinity);
This only affects adaptive strategies (you can bypass this limit by calling
setVideoBitrate
).
arguments: Number
Set the maximum audio bitrate reachable through adaptive streaming. The player will never automatically switch to a audio Representation with a higher bitrate.
This limit can be removed by setting it to Infinity
:
// remove audio bitrate limit
player.setMaxAudioBitrate(Infinity);
This only affects adaptive strategies (you can bypass this limit by calling
setAudioBitrate
).
arguments: Number
Set the buffering goal, as a duration ahead of the current position, in seconds. Once this size of buffer reached, the player won't try to download new video segments anymore.
return value: Number
defaults: 30
returns the buffering goal, as a duration ahead of the current position, in seconds.
arguments: Number
Set the maximum kept past buffer, in seconds.
Everything before that limit (currentPosition - maxBufferBehind
) will be
automatically garbage collected.
This feature is not necessary as the browser is already supposed to deallocate memory from old segments if/when the memory is scarce.
However on some custom targets, or just to better control the memory imprint
of the player, you might want to set this limit. You can set it to
Infinity
to remove any limit and just let the browser do this job.
return value: Number
defaults: Infinity
Returns the maximum kept past buffer, in seconds.
arguments: Number
Set the maximum kept buffer ahead of the current position, in seconds.
Everything superior to that limit (currentPosition + maxBufferAhead
) will
be automatically garbage collected. This feature is not necessary as
the browser is already supposed to deallocate memory from old segments if/when
the memory is scarce.
However on some custom targets, or just to better control the memory imprint of
the player, you might want to set this limit. You can set it to Infinity
to
remove any limit and just let the browser do this job.
The minimum value between this one and the one returned by
getWantedBufferAhead
will be considered when downloading new segments.
10
) might prevent the browser to play the content at all.
return value: Number
defaults: Infinity
Returns the maximum kept buffer ahead of the current position, in seconds.
v4.0.0
(see Deprecated APIs).
arguments: Boolean
Switch or exit the <video>
element to fullscreen mode. The argument is an
optional boolean:
-
if set:
true
: enters fullscreenfalse
: exit fullscreen
-
if not set: enter fullscreen
Note that only the video element will be set to fullscreen mode. You might prefer to implement your own method to include your controls in the final UI.
v4.0.0
(see Deprecated APIs).
Exit fullscreen mode. Same than setFullscreen(false)
.
arguments: Number
Set the new volume, from 0 (no sound) to 1 (the maximum sound level).
Cut the volume. Basically set the volume to 0 while keeping in memory the previous volume.
Restore the volume when it has been muted, to the one previous the mute
call.
returns: Boolean
Returns true if the volume is muted i.e., set to 0.
returns: Array.<Object>
Returns the list of available audio tracks for the current content.
Each of the objects in the returned array have the following properties:
-
id
(string
): The id used to identify the track. Use it for setting the track viasetAudioTrack
. -
language
(string
): The language the audio track is in, as set in the Manifest. -
normalized
(string
): An attempt to translate thelanguage
property into an ISO 639-3 language code (for now only support translations from ISO 639-1 and ISO 639-2 language codes). If the translation attempt fails (no corresponding ISO 639-3 language code is found), it will equal the value oflanguage
-
audioDescription
(Boolean
): Whether the track is an audio description (for the visually impaired or not). -
active
(Boolean
): Whether the track is the one currently active or not.
In DirectFile mode (see loadVideo options), returns an empty Array.
returns: Array.<Object>
Returns the list of available text tracks (subtitles) for the current content.
Each of the objects in the returned array have the following properties:
-
id
(string
): The id used to identify the track. Use it for setting the track viasetTextTrack
. -
language
(string
): The language the text track is in, as set in the Manifest. -
normalized
(string
): An attempt to translate thelanguage
property into an ISO 639-3 language code (for now only support translations from ISO 639-1 and ISO 639-2 language codes). If the translation attempt fails (no corresponding ISO 639-3 language code is found), it will equal the value oflanguage
-
closedCaption
(Boolean
): Whether the track is specially adapted for the hard of hearing or not. -
active
(Boolean
): Whether the track is the one currently active or not.
In DirectFile mode (see loadVideo options), returns an empty Array.
returns: Array.<Object>
Returns the list of available video tracks for the current content.
Each of the objects in the returned array have the following properties:
-
id
(string
): The id used to identify the track. Use it for setting the track viasetVideoTrack
. -
active
(Boolean
): Whether this track is the one currently active or not. -
representations
(Array.<Object>
): Representations of this video track, with attributes:-
id
(string
): The id used to identify this Representation. -
bitrate
(Number
): The bitrate of this Representation, in bits per seconds. -
width
(Number|undefined
): The width of video, in pixels. -
height
(Number|undefined
): The height of video, in pixels. -
codec
(string|undefined
): The codec given in standard MIME type format. -
frameRate
(string|undefined
): The video framerate.
-
In DirectFile mode (see loadVideo options), returns an empty Array.
returns: Object|null|undefined
Get the audio track currently set. null
if no audio track is enabled right
now.
The track is an object with the following properties:
-
id
(Number|string
): The id used to identify the track. Use it for setting the track viasetAudioTrack
. -
language
(string
): The language the audio track is in, as set in the Manifest. -
normalized
(string
): An attempt to translate thelanguage
property into an ISO 639-3 language code (for now only support translations from ISO 639-1 and ISO 639-3 language codes). If the translation attempt fails (no corresponding ISO 639-3 language code is found), it will equal the value oflanguage
-
audioDescription
(Boolean
): Whether the track is an audio description (for the visually impaired or not).
undefined
if no content has been loaded yet.
undefined
in DirectFile mode (see loadVideo
options).
returns: Object|null
Get the audio track currently set. null
if no text track is enabled right
now.
The track is an object with the following properties:
-
id
(Number|string
): The id used to identify the track. Use it for setting the track viasetTextTrack
. -
language
(string
): The language the text track is in, as set in the Manifest. -
normalized
(string
): An attempt to translate thelanguage
property into an ISO 639-3 language code (for now only support translations from ISO 639-1 and ISO 639-3 language codes). If the translation attempt fails (no corresponding ISO 639-3 language code is found), it will equal the value oflanguage
-
closedCaption
(Boolean
): Whether the track is specially adapted for the hard of hearing or not.
undefined
if no content has been loaded yet.
undefined
in DirectFile mode (see loadVideo
options).
returns: Object|null|undefined
Get the video track currently set. null
if no video track is enabled right
now.
The track is an object with the following properties:
-
id
(string
): The id used to identify the track. Use it for setting the track viasetVideoTrack
. -
representations
(Array.<Object>
): Representations of this video track, with attributes:-
id
(string
): The id used to identify this Representation. -
bitrate
(Number
): The bitrate of this Representation, in bits per seconds. -
width
(Number|undefined
): The width of video, in pixels. -
height
(Number|undefined
): The height of video, in pixels. -
codec
(string|undefined
): The codec given in standard MIME type format. -
frameRate
(string|undefined
): The video framerate.
-
undefined
if no content has been loaded yet.
undefined
in DirectFile mode (see loadVideo
options).
arguments: string|Number
Set a new audio track from its id, recuperated from getAvailableAudioTracks
.
arguments: string
Set a new text track from its id, recuperated from getAvailableTextTracks
.
Deactivate the current text track, if one.
arguments: string|Number
Set a new video track from its id, recuperated from getAvailableVideoTracks
.
Setting a new video track when a previous one was already playing can lead the rx-player to "reload" this content.
During this period of time:
- the player will have the state
RELOADING
- Multiple APIs linked to the current content might not work.
Most notably:
play
will not workpause
will not workseekTo
will not workgetPosition
will return 0getWallClockTime
will return 0getVideoDuration
will returnNaN
getAvailableAudioTracks
will return an empty arraygetAvailableTextTracks
will return an empty arraygetAvailableVideoTracks
will return an empty arraygetTextTrack
will returnnull
getAudioTrack
will returnnull
setAudioTrack
will throwsetTextTrack
will throw
return value: Manifest|null
Returns the current loaded Manifest if one. The Manifest object structure is relatively complex and is described in the Manifest Object structure page.
null
if the player is either stopped or not loaded.
null
in DirectFile mode (see loadVideo
options).
The Manifest will be available before the player reaches the "LOADED"
state.
return value: Object|null
Returns the Adaptations being loaded per type if a Manifest is loaded. The returned object will have at most a key for each type ("video", "audio", "text" and "image") which will each contain an array of Adaptation Objects.
The Adaptation object structure is relatively complex and is described in the Manifest Object structure page.
null
if the current Adaptations are not known yet.
null
in DirectFile mode (see loadVideo
options).
return value: Object|null
Returns the Representations being loaded per type if a Manifest is loaded. The returned object will have at most a key for each type ("video", "audio", "text" and "image") which will each contain an array of Representation Objects.
An Representation object structure is relatively complex and is described in the Manifest Object structure page.
null
if the current Representations are not known yet.
null
in DirectFile mode (see loadVideo
options).
Free the ressources used by the player.
!warning!: The player won't work correctly after calling this method.
v4.0.0
(see Deprecated APIs).
return value: TextTrack|null
Returns the first text track of the video's element, null if none.
This is equivalent to:
const el = player.getVideoElement();
const textTrack = el.textTracks.length ? el.textTracks[0] : null;
return value: Number
Returns in seconds the difference between:
- the start of the current contiguous loaded range.
- the end of it.
return value: Number
Returns in seconds the difference between:
- the start of the current contiguous loaded range.
- the current time.
return value: Number
Returns in seconds the difference between:
- the current time.
- the end of the current contiguous loaded range.
return value: Number
Returns the current video normal playback rate (speed when playing). 1
for
normal playback, 2
when playing *2, etc.
arguments: Number
Updates the "normal" (when playing) playback rate for the video.
return value: string|undefined
Returns the type of keySystem used for DRM-protected contents.
return value: Array.<Object>|null
The current image track's data, null if no content is loaded / no image track data is available.
The returned array follows the usual image playlist structure, defined here.
null
in DirectFile mode (see loadVideo
options).
return value: Number|null
The minimum seekable player position. null
if no content is loaded.
This is useful for live contents, where server-side buffer size are often not infinite. This method allows thus to seek at the earliest possible time.
// seeking to the earliest position possible (beginning of the buffer for live
// contents, position '0' for non-live contents).
player.seekTo({
position: player.getMinimumPosition()
});
return value: Number|null
The maximum seekable player position. null
if no content is loaded.
This is useful for live contents, where the buffer end updates continously. This method allows thus to seek directly at the live edge of the content.
// seeking to the end
player.seekTo({
position: player.getMaximumPosition()
});