The Player Builder is an easy-to-use player designer that is built into your Limelight Video Platform account. The Player Builder is designed for all users, tech and non-tech alike. A GUI editor allows non-tech users to intuitively and visually customize the player while access to player CSS and XML give web professionals a limitless ability to fine-tune the customization. In general, the Player Builder allows you to match the look, feel and overall branding of your site without having to write custom code. The rest of this documentation outlines how to use the Player Builder to create a player.

Combining an embedded Limelight Video Platform player with our suite of APIs is the easiest way to create a customized viewing experience. Once an embedded player has been added to a webpage, it can be easily controlled using JavaScript APIs. These player APIs give you full control over the player, allowing you to perform actions similar to what the user can do by clicking on the controls. For example, you can pause the video, seek ahead, load a particular video or channel, etc. You can also monitor the status of the player and react to events, such as alerting the user when a video finishes playback. For more information on the Javascript APIs, access the Player API documentation from 'Settings' in your account.

Note: The 'Advanced' Chromeless Player is only available to Premier and Enterprise customers.

The chromeless player is a Limelight Video Platform player with no user-exposed controls. This allows developers to customize the aesthetics through Flash integration and define the way the user interacts with the video. The chromeless player is intended for experienced web programmers that want to design their own video player on top of the Limelight Video Platform backend. The same Player APIs that are available for players built using the 'Player Builder' are also available for use with the chromeless player. Before deciding to pursue a chromeless implementation, consider the following limitations:

• Coding Required - All user exposed controls must be coded. The default controls provided by a 'Player Builder' player (e.g. play/pause, volume, bit rate selection, info, sharing, fullscreen) must be manually coded in a chromeless implementation.
• Manual Embed Codes - Unlike embed codes for 'Player Builder' players, embed codes for chromeless players must be manually created and placed on a site. A chromeless player will not be available in the drop-down when selecting to generate an embed code in an LVP account.
• No Smart Embed Code - The 'smart embed' functionality, afforded to embed codes generated from an LVP account, is not available for the chromeless player. All mobile detection and delivery must be implemented as part of your chromeless development project.

For more information on the chromeless player please contact us here: Contact Support

The Player Builder can be accessed by doing the following:

1. Log in to your Limelight Video Platform account
2. Navigate to the 'Channels' tab
3. Click the 'Player Builder button at the top

To create a new player, simply select one of the seven built-in player templates and select ‘Clone’. These templates act as the building blocks for all customized players.

To begin editing, select the desired player then select ‘Edit’. The player can be edited in one of two modes, ‘Basic’ and ‘Advanced’. ‘Basic’ mode is opened by default and exposes the editable components of the player as easy-to-use buttons, checkboxes, sliders, and color palettes. Alternatively, ‘Advanced’ mode directly exposes the XML and CSS used to generate the player. You can toggle between ‘Basic’ and ‘Advanced’ by selecting the button in the top right corner of the ‘Edit Properties’.

Changing the size and color of the different text elements is very easy. Simply look for the fontSize and color styles inside of the appropriate class and adjust the values to your liking.

Some elements have special names in addition to or in place of fontSize and color. For example, in the BasicPlaylist class (the class that controls the look of a playlist) you’ll find headerFontSize, timeFontSize, and nowPlayingFontSize – all of which allow you to set different values for each text element.

The font used to display text in the playlist can be easily set by adding the fontFamily style to the BasicPlaylist class. In the following example we set the playlist font to 'times':

Changing the background color of the control bar is a great place to start customizing and can offer some dramatic results.

There are 3 styles within the ControlBar class that affect the control bar colors: backgroundGradientColors, backgroundGradientAlphas and backgroundGradientRatios. The backgroundGradientColors is a list of hex values (e.g. white is #FFFFFF) that make up the gradient colors of the control bar background. The backgroundGradientAlphas is a list of numbers that correspond to the colors in backgroundGradientColors and represent the alpha, or transparency of each of those colors. The range for each is 0 (totally transparent) to 1 (totally opaque). The backgroundGradientRatios is a list of numbers that correspond to the colors in backgroundGradientColors and represent the location of each of those colors over the spread of the gradient. The range of values begins at 0 (the start of the gradient) and ends at 255 (the end of the gradient). The background gradient for the control bar starts at the top and goes downward, so 0 represents the very top of the control bar and 255 represents the very bottom. If, for example, you wanted an evenly spread gradient of opaque Red – White – Blue with White in the dead center of the control bar, you’d enter the following values:


It’s important to note that although you can enter as many or few colors for your gradients as you want, you must match that same number of values for each of the three styles. For example, if there are 5 gradient color values, you need 5 alpha values and 5 ratio values. Likewise, if you wanted a single, solid color – you simply enter 1 hex value, 1 alpha and 1 ratio (0). This parity holds true for every instance of gradient colors you’ll find throughout the styles.

The first step in styling your buttons is setting the global fill, hover, stroke and stroke hover colors (and of course the appropriate alphas and ratios). For example, if you wanted a slightly chrome-looking style for your buttons you could enter the following values into the ControlBarButton class:


Notice that the hover values are simply the inverse of the normal state. This is a quick and easy way to show your users the state of your buttons without having to come up with a ton of different colors and styles. There are 3 other styles should you want to customize further: iconGlowColor, iconGlowAlpha and iconGlowRadius. These styles specify a glow effect shown when the user rolls their mouse over a button.

The ControlBarButton colors take care of all of the buttons except the Play button, which is handled separately. We added a separate style for the Play button so you could make it stand out from the other buttons – drawing your users’ focus and encouraging interaction. To change the Play button’s colors you edit the playIconFillColors style inside the ControlBar class. You need to include the same number of gradient values here as you included in the fillColors for all buttons. The hover state remains as you set it in the controlBarButton class.

Lastly, when you roll over the Volume button you see the Volume Slider popup. These styles are located in the VolumeSlider class. The color and transparency of the popup background are handled by the backgroundColor and backgroundAlpha styles. The color of the slider track itself is the trackBackgroundColor. The color of the slider that shows below the thumb is the trackFillColor. You can dictate the length of the Volume Slider Track by setting the sliderWidth style in the VolumeControl class.

The progress bar is where you view the media’s progress and can jump directly to any point in the stream by clicking on the track or dragging the scrubber thumb (this process is called scrubbing). The progress bar styles are found in the Scrubber class.

The styles that dictate what the track looks like are the fill and border colors, alphas and ratios. If you set the left, top, right and bottom padding to 0, you won’t see the border at all. To change the color of the scrubber thumb itself edit the thumbColor style.

Customizing the play overlay button is a quick and easy way to make the player reflect your brand. The conventional 'triangle' can be replaced with a corporate logo or image by simply adding a few styles to the playOverlay class. For example, the following styles are used to create the overlay in the player below:

By default, the player will automatically detect the viewer's OS language and adjust the controls to accommodate. For example, if a Japanese viewer loaded a player the controls would automatically display in Japanese. If you would like to override auto-detection or if you would like the player to only show a particular language, simply add (or modify, if the line already exists) the following line to the player 'XML' substituting your desired values. The line should be added at the top, right below the player declaration.


The code above would result in a Japanese player with no auto-detection.


The following languages are currently supported:

Additional images can be added to a player by declaring 'logo' tags in the player XML. For example, you can add linkable images that direct the user to various pages on your site. In the example below we have declared four images that each represent a specific page on the publisher's site. Images can be added to both the player and playlist by declaring a <videoHeaderLogo> tag or a <playlistHeaderLogo> tag in the player XML. The following code is used to create the links for 'Video', 'Photos', 'News' and 'Blogs' in the player below. Notice that the tag attributes are used to declare the location of the image as well as the image url and click url.