Skip to main content
Version: JavaScript SDK v1.0.3


The player allows you to efficiently play a single video or a playlist of videos with minimal loading time.


The player receives the following parameters:

const player = new Player(container, {
// Video object to play
video: Video,
// Video playlist to play
playlist: Playlist,
// Playlist index to play from
playlistIndex: 0,
// Video id to load and play
videoId: '',
// Preferred video quality that should be used for playback
playbackQuality: VideoQuality.HIGH,
// Loop video playback
loop: false,
// Show player controls
showControls: true,
// Auto hide controls after specified milliseconds of inactivity.
// If 0 than controls are always visible.
hideControlsTimeout: 2000,
// Auto play video
autoPlay: false,
// Auto play video when the player is in the middle of the screen. Could be useful when
// the player is in scroll container and you need to play it only when it's visible.
playOnFocus: false,
// Define size of player. By default, player inherits width of container element and
// height will be calculated in accordance with video ratio.
// To customize player sizes there are 3 options:
// - 'parent', in this case width and height will be inherited from parent container element
// - object with width and height parameters (values should be in pixels)
// - function that returns object with width and height. Function will be called with
// current video object as the first argument
size: 'parent',
// Playback rate
rate: 1,
// Player volume
volume: 0.5,
// Defines how the video will occupy it's place
aspectMode: AspectMode.RESIZE_ASPECT_FILL


The main methods of the player component:

// Set new video

// Set new playlist
player.setPlaylist(playlist, 0)

// Set playlist index to play

// Go to the next video from playlist

// Go to the previous video from playlist

// Start video preloading

// Play video

// Pause video

// Unload current video

// Update player size. Could be useful when player container size was changed without browser resize.

// Destor player instance and remove element from DOM


The player provides following events:

// Playback was started
player.subscribe('play', (event) => {})
// Video is playing
player.subscribe('playing', (event) => {})
// Playback was paused
player.subscribe('pause', (event) => {})
// Playback reached the end of video
player.subscribe('ended', (event) => {})
// Player entered fullscreen
player.subscribe('enterfullscreen', (event) => {})
// Player exited fullscreen
player.subscribe('exitfullscreen', (event) => {})
// Video was loaded
player.subscribe('loaded', (event) => {})
// Video loading progress was changed
player.subscribe('progress', (event, progress) => {})
// Current time was updated
player.subscribe('timeupdate', (event, currentTime) => {})
// Playback error occurred
player.subscribe('error', (event, error) => {})
// Volume was updated
player.subscribe('volumeupdate', (event, volume) => {})