Skip to main content
Version: JavaScript SDK v1.1.0

Player

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

Parameters

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. Available 2 options:
// 'auto' (default) - player inherits width of container element and height will be calculated in accordance with video ratio.
// 'parent' - width and height will be inherited from parent container element.
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
})

Methods

The main methods of the player component:

// Set new video
player.setVideo(video)

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

// Set playlist index to play
player.setPlaylistIndex(5)

// Go to the next video from playlist
player.goToNextVideo()

// Go to the previous video from playlist
player.goToPreviousVideo()

// Start video preloading
player.load()

// Play video
player.play()

// Pause video
player.pause()

// Unload current video
player.unload()

// Destor player instance and remove element from DOM
player.destroy()

Events

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, { buffered }) => {})
// 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 }) => {})