Readonly adaptationMKPlayer Adaption APIs.
Readonly bufferMKPlayer Buffer APIs.
Readonly drmMKPlayer DRM APIs.
Readonly lowlatencyMKPlayer Low Latency APIs.
Readonly manifestMKPlayer Manifest APIs.
Readonly subtitlesMKPlayer Subtitles APIs.
Adds a marker to the timeline.
Note: Does not check for duplicates/overlaps at the specified time.
Note: This API is only available when ui is enabled.
Note: It is also recommended to call this API after playback starts as the positioning of the timeline marker depends on knowing the current seekable range. The best place to call this the first time is as soon as the first time changed event is received from TimeChanged.
Example to place timeline marker during ongoing playback:
var timelineMarkers = [
{ time: 24, title: 'Salto on the edge' },
{ time: 69, title: 'Interview - Marcus Gustafsson' },
{ time: 105, title: 'Parcour rating explained' },
{ time: 188, duration: 11, title: 'And we have a winner!', cssClasses: ['seekbar-marker-interval'] },
];
// Call this anytime during any ongoing playback
// to add all available timeline markers to the UI.
timelineMarkers.map((marker) => {
player.addTimelineMarker(marker);
});
Example to place timelineMarker for an AdBreak based off AdMarker:
// list of AdBreaks
const adBreaks = [];
// collect AdMarkers and build the list of adBreaks
player.on(MKPlayerEvent.AdMarker, (event) => {
adBreaks.push(event.adMarker);
// timeline markers cannot be added from here during ongoing plyback
// because this callback is always reported when metadata is parsed
// which means the time for this ad is in the future and outside the
// current seekable range. So for upcoming adBreaks new markers can
// only be added when the time falls within the current seekable range
// or when the next MKPlayerEvent.AdBreakStarted event is triggered.
});
// global variable
let firstTimeChangedEvent = false;
// Wait for the playback to start and the
// first time changed event is received to add timeline markers
player.on(MKPlayerEvent.TimeChanged, (event) => {
if (!firstTimeChangedEvent) {
firstTimeChangedEvent = true;
// add timeline markers
adBreakList.map((marker, index) => {
player.addTimelineMarker({time: marker.start});
});
}
});
the timeline marker to be added.
Returns the currently used audio track, or null if no track is active.
Returns the currently selected audio quality.
One of the elements of getAvailableAudioQualities.
Returns an array of all available audio tracks.
Returns an array of all available audio qualities the player can adapt between.
Returns info for segments that can be requested by the player.
Returns an array containing all available video qualities the player can adapt between.
Returns the currently buffered time ranges of the video element.
Returns the current playback time in seconds of the video.
Optional mode: MKTimeModeThe mode to decide if the returned time should be absolute or relative, see MKTimeMode.
For Live and Events the default mode is AbsoluteTime. For VOD, Catchup and DVR its RelativeTime.
Returns data about the last downloaded audio segment.
Returns data about the last downloaded video segment.
Returns data about the currently playing audio segment.
Returns data about the currently playing video segment.
Returns the currently used rendering mode.
See MKPlayerType for details on valid values.
Unknown is returned when player type cannot be determined or when the player is not yet ready.
Returns the time range that is currently valid for seeking.
Note For VOD default mode is RelativeTime and for Live it is AbsoluteTime.
Optional mode: MKTimeModeThe mode to decide if the returned time should be absolute or relative, see MKTimeMode.
the current seekable range when available or null otherwise.
Returns the currently used streaming technology. See MKStreamType for details of the valid values.
Returns a thumbnail image for a certain time or null if there is no thumbnail available.
Requires a configured thumbnails track in thumbnailTrack if sideloaded thumbnails are configured.
Requires enableHlsImageMediaPlaylistSupport to be true if thumbnail images from the HLS manifest are needed.
When thumbnailTrack are configured, this will have preference over the thumbnails found in the HLS manifest.
the media time for which the thumbnail should be returned.
A thumbnail if a thumbnails track is configured and a thumbnail exists for the specified time, else null.
Returns the list of all added markers in undefined order.
Note: This API is only available when ui is enabled.
Returns the currently selected video quality, if the user manually selected one.
In this case it returns one of the elements of getAvailableVideoQualities.
Gets the active MKViewMode.
Returns true if casting to another device (such as a ChromeCast) is available, otherwise false.
Please note that this function only returns true after the CastAvailable event has fired.
Tests if a particular ViewMode is available for selection with setViewMode.
the view mode to test.
true if the tested view mode is available, else false.
Sets a new video source and returns a promise which resolves when the source has loaded successfully.
the source configuration object.
Optional disableSeeking: booleanIf set, seeking will be disabled.
Promise which resolves when the source is loaded and rejects when load fails.
Removes a handler for a player event.
The event to remove the handler from.
The callback handler to remove.
Removes all event handlers registered for the given event type.
The event for which all event handlers are to be removed.
Subscribes an event handler to a player event.
The type of event to subscribe to.
The event callback handler that will be called when the event fires.
Starts playback or resumes after being paused.
No need to call it if the player is stup with autoplay.
Calling play has no effect when player is already playing.
Optional issuer: stringthe issuer of the API call that will be passed to events triggered by this call.
a promise which resolves as soon as playback starts. The promise can reject if the play is blocked by the browser.
Reload the currently playing source.
Note:
start parameter is only supported for Live or Event asset types.startOffset must be positive value bewtween 0 and duration of the VOD asset and no startOffsetTimelineReference must be set.startOffset for bookmark offset must always be an UNIX Epoch absolute timestamp and no startOffsetTimelineReference must be set.For more details, please refer to notes for startOffset.
Examples
To reload the same source
reload()
To reload same source and start at bookmark offset
reload(undefined, {startOffset: 120});
To reload same source and start 5 minutes behind live edge for live
reload(undefined, {startOffset: -300, startOffsetTimelineReference: "end"});
To reload the same source and start at a specified bookmark offset (absolute timestamp) for live
reload(undefined, {startOffset: 1692268911.789})
To reload with a new start time for live and start at the live edge
reload("2023-06-28T10:00:00Z");
// OR
reload("2023-06-28T10:00:00Z", {"startOffset": 0, "startOffsetTimelineReference": "end"});
To reload with a new start time for live and start at the beginning
reload("2023-06-28T10:00:00Z", {"startOffset": 0, "startOffsetTimelineReference": "start"});
To reload with a new start time for live and start at the specified startOffset
const currentTime = player.getCurrentTime(); // current time used for example
reload("2023-06-28T10:00:00Z", {"startOffset": currentTime});
Optional start: stringISO Date string in the format 2023-06-27T10:00:00Z
Optional sourceOptions: MKSourceOptionssource options specifying start offset and timeline reference.
Removes a marker from the timeline (by reference) and returns true if the marker has
been part of the timeline and successfully removed, or false if the marker could not
be found and thus not removed.
Note: This API is only available when ui is enabled.
the timeline marker to be removed.
Seeks to the given playback time specified by the parameter time in seconds.
The time offset specified must always be a positive value and within the current getSeekableRange.
For Live and Events the specified time either be relative or absolute offset.
seek(0) will take you to the start of the live windowseek(getSeekableRange().end) will take you near the current live edge. You can also call () to jump to current live edge easily.The time to seek to in seconds.
Optional issuer: stringThe issuer of the API call that will be passed to events triggered by this call.
true when successful.
Set the customData that needs to be sent to the Bitmovin dashboard during runtime.
The customData parameter should be of type MKAnalyticsConfig
Sets the audio track to the ID specified by trackID.
Available tracks can be retrieved with getAvailableAudio.
The ID of the audio track to activate.
Manually sets the audio stream to a fixed quality, identified by ID.
Has to be an ID defined in the MPD or the keyword 'auto'.
Auto resets to dynamic switching.
A list with valid IDs can be retrieved by calling getAvailableAudioQualities.
The ID of the desired audio quality or 'auto' for dynamic switching.
Set HTTP headers.
Use this to pass your HTTP headers for all player/playback manifest requests.
Note: It is recommended to call this method before calling load.
HTTP headers to be used with requests and when null is passed the set headers will be cleared.
Sets the level of player log outputs.
Log level, allowed values are "debug", "log", "warn", "error" and "off"
Sets the playback speed of the player.
Available only for HTML5 player.
Fast forward as well as slow motion is supported.
Slow motion is used by values between 0 and 1, fast forward by values greater than 1.
A playback speed factor greater than 0.
Sets a poster image. Will be displayed immediately, even if a video stream is playing.
The URL to the poster image.
Flag to set the poster image persistent so it is also displayed during playback (useful for audio-only playback).
Passes an HTML video element to the player, which should be used in case of Html5 or Native playback.
For this to take effect you must call this function before calling load.
When no video element is set on the player, the player will create one for use internally. You may call getVideoElement to get hold of the video element in use by the player.
Also the video element should be contained within the video container element that was passed as part of player creation.
Example:
' In the HTML body
<div id="videoContainer">
<video id="videoElement"></video>
</div>
' In the script
let videoContainer = document.getElementById("videoContainer");
let videoElement = document.getElementById("videoElement");
let playerConfig = {
key: "<license_key>",
playback: {
autoplay: true,
muted: true
}
};
let player = new mkplayer.MKPlayer(playerConfig, videoContainer);
player.setVideoElement(videoElement);
player.load(sourceConfig);
the video element to set.
Manually sets the video stream to a fixed quality, identified by ID.
Has to be an ID defined in the Manifest/MPD or the keyword 'auto'.
Auto resets to dynamic switching.
A list with valid IDs can be retrieved by calling getAvailableVideoQualities.
ID defined in the Manifest/MPD or 'auto'.
Sets the player to a particular ViewMode.
Will only work if the selected view mode is available and isViewModeAvailable returns true, else this call will be ignored.
If successful, a ViewModeChanged will be fired.
the view mode to switch the player into.
Optional options: MKViewModeOptionsadditional optional parameters for view modes.
Sets the player’s volume in the range of 0 (silent) to 100 (max volume). Unmutes a muted player.
The volume to set between 0 and 100.
Optional issuer: stringThe issuer of the API call that will be passed to events triggered by this call.
MKPlayer Core API interface.
Defines all the core player APIs that player must implement.