User Guides
Start typing to search…

Uplynk Player (Beta)

Our Uplynk Player allows our customers to have access to a video player that can provide additional capabilities that work with the Uplynk platform such as the ability to play a VOD playlist.

The Uplynk Player is backwards compatible with LVP Player functionality and naming conventions to ease migration. The Uplynk Player replaces the LVP Player on a go-forward basis.

Unlike the LVP Player, the Uplynk Player supports:

  • Full Uplynk URLs including tokenization
  • Playback of linear content in addition to VOD

The Uplynk Player does not currently support DRM playback.

Migration from the LVP Player

To migrate from the LVP Player to the Uplynk player change the src reference to the Uplynk Player URL (https://ovp-static.uplynk.net/player.min.js) from the LVP Player URL (https://ovp-static.uplynk.net/limelightjs-player.js). All LVP function names and naming conventions are supported by the Uplynk Player.

Before:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
    <div id="lvp_player_211280"></div>
    <script charset="UTF-8" src="https://ovp-static.uplynk.net/limelightjs-player.js"></script>
    <script>
      LimelightPlayerUtil.embed({
        "height": "321",
        "width": "540",
        "autoTitle": "item",            // Sets title to asset name
        "mediaId": "mingle",
        "orgId": "0933a56ee6f5434c8ffe5e00bee4e178",
        "enableCookies": false,
        "playerId": "lvp_player_211280",
        "playerForm": "LVPPlayer"
      });
    </script>
</body>
</html>

After:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
    <div id="lvp_player_211280"></div>
    <script charset="UTF-8" src="https://ovp-static.uplynk.net/player.min.js"></script>
    <script>
      LimelightPlayerUtil.embed({
        "height": "321",
        "width": "540",
        "autoTitle": "item",            // Sets title to asset name
        "mediaId": "mingle",
        "orgId": "0933a56ee6f5434c8ffe5e00bee4e178",
        "enableCookies": false,
        "playerId": "lvp_player_211280",
        "playerForm": "LVPPlayer"
      });
    </script>
</body>
</html>

The only change is on Line 8 of the above code, the line with "script charset".

When time permits, the function calls and naming conventions should be adapted to the new Uplynk Player terminology.

Single Asset Playback

The following HTML is an example of how to playback a single Uplynk asset using the Uplynk Player:

<div id="uplynk_player"></div>
<script charset="UTF-8" src="https://ovp-static.uplynk.net/player.min.js"></script>
<script>
  UplynkPlayer.embed({
    "height": "321",
    "width": "540",
    "autoTitle": "item",						// Sets title to asset name
    "mediaId": "uplynk_external_id",
    "orgId": "uplynk_user_id",
    "enableCookies": false,
    "playerId": "uplynk_player",
    "playerForm": "Standard"
  });
</script>

In the above example, orgId is the Uplynk User ID and passed with the embed. The mediaId is the Uplynk External ID.

If mediaId is an Uplynk Asset ID (GUID) instead of an Uplynk External ID, then orgId is not required.

The above example shows that the height and width of the player can be specified. However, height or width could be set to "100%" or any percentage to fill the screen as desired.

Cookies are disabled in the player by default, but enableCookies is shown above to demonstrate the parameter's use.

📘

The player is also available as LimelightPlayerUtil for backwards compatibility.

Single Asset Playback for Audio-Only

Audio-only playback does not require the Uplynk to display a video window.

The following HTML is an example of how to playback a single Uplynk asset which is audio-only using the Uplynk Player:

<div id="player_audio"></div>
<script charset="UTF-8" src="https://ovp-static.uplynk.net/player.min.js"></script>
<script>
UplynkPlayer.embed({
  "width": "300", // Default audio player width
  "height": "auto", // Should be auto when adding auto title
  "playerId": "player_audio",
  "orgId": "uplynk_user_id",
  "mediaId": "uplynk_external_id",
  "autoTitle": "item",
  "playerForm": "AudioPlayer",
  skin: { 
    // New title related style options
    playerTitleFont: "18px sans-serif",
    playerTitleColor: "#FFFFFF",
    playerTitleBackground: "#000000"
  },
  "controlBar": {
    "audioTrackButton": true,
    "fullscreenToggle": false
  }
});
</script>

In the above example, orgId is the Uplynk User ID and passed with the embed. The mediaId is the Uplynk External ID. For playerForm, AudioPlayer is used.

⚠️

When using a title control such as autoTitle, it is recommended to have height set to "auto"

Using Playlists

In order for playlist information to be viewable by the Uplynk Player, the playlist must be made public. There are also settings for the entire Uplynk account to allow/disallow public playlists and if a new playlist should be public or private by default. If a playlist itself is labeled public but the account settings disallow public playlists, the account settings will override the individual playlist setting.

Each playlist has a Playlist ID as shown below. It can be be copied by selecting the double-box icon next to the GUID in the Playlist Preview area.

The account settings for playlists are shown below. These settings may override any individual playlist settings.

Individual Uplynk playlists can be made public or private as shown below.

Asset Descriptions in Playlists

If you want a description of an asset in a playlist in addition to just the asset title, add a description metadata field to the asset as shown below.

Playing Video Playlists

The following HTML is an example of how to playback an Uplynk playlist for videos using the Uplynk Player (horizontal format):

<div id="player_playlists"></div>
<script charset="UTF-8" src="https://ovp-static.uplynk.net/player.min.js"></script>
<script> 
UplynkPlayer.embed({
  "playerId": "player_playlists",
  "channelId": "uplynk_player_id",
  "showPlaylist": true,
  "enableCookies": false,
  "playlistOrientation": "right",
  "playerForm": "HorizontalPlaylist"
});
</script>

In the above HTML, for channelId, use the Playlist ID. For playerForm, use HorizontalPlaylist.

The following HTML is an example of how to playback an Uplynk video playlist using the Uplynk player (vertical format):

<div id="player_playlists"></div>
<script charset="UTF-8" src="https://ovp-static.uplynk.net/player.min.js"></script>
<script> 
UplynkPlayer.embed({
  "playerId": "player_playlists","channelId": "uplynk_player_id",
  "showPlaylist": true,
	"enableCookies": false,
	"playerForm": "VerticalPlaylist"
});
</script>

In the above HTML, for channelId, use the Playlist ID. For playerForm, use VerticalPlaylist.

When testing HTMLs that play back playlists, the HTML must be run from a web server rather than just running locally in the browser. When run from the browser directly, the thumbnail images for the assets do not appear. The thumbnail images appear correctly when running from a web server. On the Mac, "Simple Web Server" (https://simplewebserver.org) can be used for this purpose.

Playing Audio-Only Playlists

Basic Audio-Only Playlist Playback

The following HTML is an example of how to playback an Uplynk audio-only playlist using the Uplynk Player:

<div id="audio_only_playlist_player"></div>
<script charset="UTF-8" src="https://ovp-static.uplynk.net/player.min.js"></script>
<script> 
UplynkPlayer.embed({
  "playerId": "audio_only_playlist_player",
  "channelId": "uplynk_player_id",
  "showPlaylist": true,
  "enableCookies": false,
  "playerForm": "AudioPlaylistPlayer"
});
</script>

In the above HTML, for channelId, use the Playlist ID. For playerForm, use AudioPlaylistPlayer.

When testing HTMLs that play back playlists, the HTML must be run from a web server rather than just running locally in the browser. When run from the browser directly, the thumbnail images for the assets do not appear. The thumbnail images appear correctly when running from a web server. On the Mac, "Simple Web Server" (https://simplewebserver.org) can be used for this purpose.

Audio-Only Playlist Playback with Auto-Height and Title

In May 2025, the ability to have auto-height and title were added to audio-only playlist playback. The following HTML is an example of how to playback an Uplynk audio-only playlist with auto-height and title using the Uplynk Player:

<div id="uplynk-player-container"></div>
<script charset="UTF-8" src="https://ovp-static.uplynk.net/player.min.js"></script>
<script> 
    UplynkPlayer.embed({
        "playerId": "uplynk-player-container",
        "playerForm": "AudioPlaylistPlayer",
        "skin": { 
            // New title related style options
            "playerTitleFont": "18px sans-serif",
            "playerTitleColor": "#FFFFFF",
            "playerTitleBackground": "#000000"
        },
        "height": "auto",                 // This enables auto-height mode
        "title": "Auto-Height Player",    // New title param
        "channelId": "uplynk_player_id"
    });
</script>

In the above HTML, for channelId, use the Playlist ID. For playerForm, use AudioPlaylistPlayer.

When testing HTMLs that play back playlists, the HTML must be run from a web server rather than just running locally in the browser. When run from the browser directly, the thumbnail images for the assets do not appear. The thumbnail images appear correctly when running from a web server. On the Mac, "Simple Web Server" (https://simplewebserver.org) can be used for this purpose.

Customization

General Player Customization

The parameters in this section are passed in the UplynkPlayer.embed function call.

When setting parameters, either single-quotes or double-quotes can be used. Double-quotes are shown below.

height: pixels (e.g. "500px" or "500") or "auto"

📘

Auto height only supported for AudioPlaylistPlayer as the playerForm

width: pixels (e.g. "500px" or "500"), percentage (e.g. "50%"), or "auto"

📘

For non-playlists, auto height/width requires one dimension to be defined

enableCookies: "true" or "false"(false recommended)

autoTitle:

  • "none": Standard behavior, disables auto title
  • "playlist": Automatically uses the playlist title
  • "item": Automatically uses the current video’s title

title: Sets title of player to a string (e.g. "My Player")

📘

autoTitle and title are not supported for Standard as the playerForm

showPlaylist: "true" or "false" for a playlist player

playlistOrientation: "left", "right", "top", or "bottom"

Skin Controls for Customization

The Uplynk Player has additional "skin" controls that allow for the customization its appearance including fonts and colors. They also control whether thumbnails are displayed or not. Fonts and colors are specified using CSS fonts and colors.

When setting parameters, either single-quotes or double-quotes can be used. Double-quotes are shown below.

CSS fonts are found at https://www.w3schools.com/css/css_font.asp.

CSS colors are found at https://www.w3schools.com/cssref/css_colors_legal.php.

The example below shows how these skin controls are specified:

<div id="audio_only_playlist_player"></div>
<script charset="UTF-8" src="https://ovp-static.uplynk.net/player.min.js"></script>
<script> 
UplynkPlayer.embed({
  "playerId": "audio_only_playlist_player",
  "channelId": "bfc1f4d5ae9a4af9b8bc5754e98b3b3a",
  "showPlaylist": true,
  "enableCookies": false,
  "playerForm": "AudioPlaylistPlayer",
  "skin": { 
            "itemBackground": "purple",
            "activeItemBackground": "red",
            "playlistTitleColor": "white",
            "playlistDescriptionColor": "white",
            "playlistDurationColor": "white",
            "playlistThumbnailVisible": false,
            "playlistDescriptionVisible": false,
            "playlistDurationVisible": true,
            "scrollbarTrackColor": "blue",
            "scrollbarThumbColor": "yellow" 
          }
});
</script>

The below subsections list the complete list of skin controls for the Uplynk Player.

Video Player Config Options

  • itemFont (CSS font, e.g. “itemFont”: "18px Courier New”)
  • headerFont (CSS font, e.g. “headerFont”: "18px Courier New”)
  • titleFont (CSS font, e.g. “titleFont”: "18px Courier New”)

Colors (Set to CSS Color)

  • headerBackground
  • itemBackground
  • activeItemBackground
  • controlBackground
  • controlColor
  • bigPlayColor
  • playerTitleFont
  • playerTitleColor
  • playerTitleBackground
  • playlistColor
  • playlistBackground
  • playlistTitleColor
  • playlistDescriptionColor
  • playlistDurationColor
  • scrollbarTrackColor
  • scrollbarThumbColor

Visibility (Set to true/false)

  • playlistThumbnailVisible
  • playlistDescriptionVisible
  • playlistDurationVisible
  • videoVisible

Video.js Events Emitted

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

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 is resumed 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 was encountered 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 the primary content playback starts or resumes, after any pre-roll ads have played.

content-pause (limelight-content-pause): Triggered when the 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. This coincides to the legacy event onMediaComplete.

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. This coincides to the legacy event onMediaLoad.

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 complete seek has occurred, 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

As an example of using API calls, this example shows how to update the player skin.

The player's updateSkin method (or legacy doSkin) accepts a skin object. Any valid attributes in the skin object will be 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"
}

Setting the Player Skin

As an example of using API calls, this example shows how to update the player skin.

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

Updated about 17 hours ago