Uplynk Player JavaScript API

Video.js Events Emitted

The Uplynk Player emits both new event names and legacy "limelight-" prefixed events for backwards compatibility. Both event names work:

Event	Legacy Event	Description
`ad-load`	`limelight-ad-load`	Triggered when an ad is loaded for playback.
`ad-play`	`limelight-ad-play`	Triggered when an ad begins playing, or when playback resumes after pause.
`ad-complete`	`limelight-ad-complete`	Triggered when an ad has finished playing.
`captions-ready`	`limelight-captions-ready`	Triggered when captions have been added to the current media item.
`captions-error`	`limelight-captions-error`	Triggered when an error occurs while adding captions to the media.
`channel-complete`	`limelight-channel-complete`	Triggered when the last media item in a channel completes. Coincides with onChannelComplete.
`channel-load`	`limelight-channel-load`	Triggered when a new channel is loaded by the UI or API. Coincides with onChannelLoad.
`content-play`	`limelight-content-play`	Triggered when primary content playback starts or resumes, after any pre-roll ads have played.
`content-pause`	`limelight-content-pause`	Triggered when primary content is paused by the UI, API, or cue point.
`content-timeupdate`	`limelight-content-timeupdate`	Triggered periodically while primary content is playing (time updates).
`media-complete`	`limelight-media-complete`	Triggered when the media item and all ads have finished playing. Coincides with the legacy onMediaComplete event.
`media-load`	`limelight-media-load`	Triggered when a new media item is loaded by the UI, API, or auto-advance and is ready to play. Coincides with the legacy onMediaLoad event.
`media-play`	`limelight-media-play`	Triggered when a media item initially begins playback, before any pre-roll ads play. Coincides with onMediaPlay.
`media-update`	`limelight-media-update`	Triggered as soon as a new media item has been requested, before it is fully loaded and ready to play.
`player-load`	`limelight-player-load`	Triggered once when a new player is embedded, as soon as the API is ready to use. Coincides with the legacy onPlayerLoad event.
`seeked`	`limelight-seeked`	Triggered after a seek completes, before normal playback resumes.

JavaScript API

Uplynk Player Methods

The Uplynk Player provides an API through the global UplynkPlayer object (also available as LimelightPlayerUtil for backwards compatibility). All player instances have methods accessible through the player element.

// Get the player element
const playerEl = document.getElementById('player');

// Playback Control
playerEl.play(); // Play the video
playerEl.pause(); // Pause the video
playerEl.next(); // Go to next item in playlist
playerEl.previous(); // Go to previous item
playerEl.seek(30); // Seek to 30 seconds
playerEl.seekToPercent(0.5); // Seek to 50% of video

// Content Loading
playerEl.loadMedia('mediaId'); // Load a media item
playerEl.loadPlaylist('playlistId'); // Load a playlist (formerly channel)
playerEl.loadPlaylistItem('playlistId', 'mediaId'); // Load playlist and specific media
playerEl.loadPlaylistCollection('collectionId', 'playlistId', 'mediaId'); // Load channel list (collection)
playerEl.switchMedia('mediaId'); // Switch to different media
playerEl.switchPlaylist('playlistId'); // Switch to different playlist
playerEl.goToIndex(2); // Jump to playlist index

// State & Information
playerEl.getCurrentMedia(); // Get current media info
playerEl.getCurrentPlaylist(); // Get current playlist info
playerEl.getPlayState(); // Get play/pause state
playerEl.getCurrentIndex(); // Get current playlist index
playerEl.getPosition(); // Get position in milliseconds
playerEl.getVolume(); // Get current volume (0-1)
playerEl.setVolume(0.5); // Set volume to 50%
playerEl.getMuted(); // Check if muted
playerEl.setMuted(true); // Mute/unmute the player

// Event Handling
playerEl.on('play', handlePlay); // Add event listener
playerEl.off('play', handlePlay); // Remove event listener
playerEl.once('play', handleOnce); // Add one-time listener

// Utility Methods
playerEl.updateSkin({ bigPlayColor: 'blue' }); // Update player appearance
playerEl.destroy(); // Destroy player instance
playerEl.getVideoJS(); // Get Video.js library
playerEl.getPlayer(); // Get Video.js player instance

Legacy API Methods

For backwards compatibility, the Uplynk Player also supports the following legacy "do" prefixed methods from the LVP Player:

doPlay() - Play the video
doPause() - Pause the video
doNext() - Go to next item in playlist
doPrevious() - Go to previous item
doSeekToSecond(seconds) - Seek to specific second
doSeekToRatio(ratio) - Seek to percentage (0-1)
doGetVolume() - Get current volume
doSetVolume(volume) - Set volume (0-1)
doGetMuted() - Check if muted
doSetMuted(muted) - Set mute state
doGetCurrentIndex() - Get current playlist index
doSkipToIndex(index) - Jump to playlist index
doGetCurrentMedia() - Get current media info
doGetCurrentChannel() - Get current playlist info (channel is legacy term for playlist)
doGetCurrentPlayState() - Get play/pause state
doGetPlayheadPositionInMilliseconds() - Get position in milliseconds
doLoadMedia(mediaId, autoplay, posMs) - Load a media item
doLoadChannel(channelId, autoplay) - Load a playlist
doLoadChannelAndSetMedia(channelId, mediaId, autoplay, posMs) - Load playlist and specific media
doLoadChannelList(channelListId, channelId, mediaId, autoplay, posMs) - Load channel list
doSetMedia(mediaId, autoplay, posMs) - Switch to different media
doSetChannel(channelId, mediaId, autoplay, posMs) - Switch to different playlist
doSetAd(position, type, paramString) - Configure an ad
doSetAdFrequency(frequency) - Set ad frequency
doSetAds(ads) - Configure multiple ads
doGetVjs() - Get Video.js library
doGetVjsPlayer() - Get Video.js player instance
doOn(names, fn) - Add event listener
doOff(names, fn) - Remove event listener
doOne(names, fn) - Add one-time listener
doDispose() - Destroy player instance
doSkin(skin) - Update player appearance

Example of Using API Calls

Updating the Player Skin

The player's updateSkin method (or legacy doSkin) accepts a skin object. Any valid attributes in the skin object are applied to the current active skin.

const playerEl = document.getElementById('player');
playerEl.updateSkin({
  "bigPlayColor": "blue",
});
// Legacy method also works:
// playerEl.doSkin({ "bigPlayColor": "blue" });

The return value of this function is the entire current active skin object:

{
	"videoRatio": 0.5625,
	"playlist": null,
	"itemFont": "12px sans-serif",
	"headerFont": "17px serif",
	"headerBackground": "transparent linear-gradient(-90deg,#1c1819 0%,#363636 100%)",
	"itemBackground": "transparent linear-gradient(-90deg,#1d191a 0%,#3b3b3d 25%,#282628 100%)",
  "activeItemBackground": "transparent linear-gradient(-90deg,#6e6b71 0%,#515255 25%,#636568 100%)",
	"controlBackground": "rgba(43,51,63,.7)",
  "controlColor": "white",
	"bigPlayColor": "blue",	
	"playlistColor": "#C1C1C1",
	"playlistBackground": "#B3B3B3",
  "width": "480",
	"height": "321"
}