Our Uplynk LVP 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.

This player replaces the player for the deprecated Limelight Video Platform. Therefore, the documentation will reference how the player behaved with the Limelight Video Platform and how that changed for playing back assets with Uplynk.

Single Asset Playback

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

<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",
    "mediaId": "uplynk_external_id",
    "orgId": "uplynk_user_id",
    "enableCookies": false,
    "playerId": "lvp_player_211280",
    "playerForm": "LVPPlayer"
  });
</script>

In the above example, the original LVP orgId is replaced with the new Uplynk User ID and passed with the embed. The original LVP mediaId from LVP is now 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.

To playback a single asset using the LVP player and an HTTP link, the following URL should be used:

https://ovp-static.uplynk.net/index.html?
mediaId=uplynk_external_id_value&width=540&height=321&
playerForm=LVPPlayer&embedMode=html&
htmlPlayerFilename=limelightjs-player.js&orgid=new_uplynk_user_id

In the above URL, the original LVP orgId is replaced with the new Uplynk User ID.
The original LVP mediaId is now the Uplynk External ID.

Single Asset Playback for Audio-Only

Audio-only playback does not require the LVP player 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 LVP player:

<div id="player_audio"></div>
<script charset="UTF-8" src="https://ovp-static.uplynk.net/limelightjs-player.js"></script>
<script>
LimelightPlayerUtil.embed({
  "width": "300", // Default audio player width
  "height": "30",
  "playerId": "player_audio",
  "orgId": "new_uplynk_user_id",
  "mediaId": "uplynk_external_id",
  "enableCookies": false,
  "playerForm": "LVPAudioPlayer",
  "controlBar": {
    "audioTrackButton": true,
    "fullscreenToggle": false
  }
});
</script>

In the above example, the original LVP orgId is replaced with the new Uplynk User ID and passed with the embed. The original LVP mediaId from LVP is now the Uplynk External ID. For playerForm, LVPAudioPlayer is used.

Using Playlists

In order for playlist information to be viewable by the LVP 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.

Playing Video Playlists

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

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

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

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

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

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

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" can be used for this purpose.

Playing Audio-Only Playlists

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

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

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

Skin Controls for Customization

The LVP 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.

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/staging/limelightjs-player.js"></script>
<script> 
LimelightPlayerUtil.embed({
  "playerId": "audio_only_playlist_player",
  "channelId": "bfc1f4d5ae9a4af9b8bc5754e98b3b3a",
  "showPlaylist": true,
  "enableCookies": false,
  "playerForm": "LVPAudioPlaylistPlayer",
  "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 LVP 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
playlistColor
playlistBackground
playlistTitleColor
playlistDescriptionColor
playlistDurationColor
scrollbarTrackColor
scrollbarThumbColor

Visibility (Set to true/false)

playlistThumbnailVisible
playlistDescriptionVisible
playlistDurationVisible
videoVisible