Media Player UI Modifications Using UIVars

What are UIVars and Why should you care…

The Kaltura Players are built on a framework of an XML based flexible and customizable UI.
If you just read the above line and remained wondering, worry not! you don’t even have to be a developer to be able to modify player features by yourself, add plugins, modify skins or behaviors. Using the Player Studio, one can create as many Player instances that feature different styles, options and behaviors.
To simplify the management of many of the player features, Kaltura has implemented the “UIVars” to override and configure player features.
Kaltura UIVars are an incredibly powerful feature of the Kaltura Players which allows publishers to pre-set or override the value of any FlasVar (object level parameters), show, hide and disable existing UI element, add new plugins and UI elements to an existing player and modify attributes of all the player elements.
FlashVars are configuration variables that are set to the Kaltura Player in the HTML embed code (works for “regular” static embed, server-generated embed or JavaScript-generated embed).  A list of all the Kaltura Player FlashVars.
This post will take the reader through utilizing the Kaltura Players UIVars functionality and share a collection of the most common use cases that Kaltura’s customers came across with and how these can be easily achieved through the use of UIVars.

Setting UIVars

UIVars are set using the Studio view in the Kaltura Management Console (KMC).  When editing a player instance in the Player Studio, Select the Features tab on the left and expand the “Additional parameters and plugins” panel in the features list accordion:

In the “Additional parameters and plugins” panel, there are two options to add parameters:

1. Click Add and add the parameter name and it’s value to the list of the variables.
2. Paste a URL encoded list of parameters (name1=value1&name2=value2…) into the “Paste your plug-in line here” box and click the “go” button. The parameters will be broken down to variables in the list.

To smoothly use the “Additional parameters and plug-ins” interface, you should be aware of the following:

1. The “Paste your plug-in line here” box is used in one direction only, to add a given UIVars string to the variables list. After a UIVars string is parsed (by clicking the “go” button), if you edit the fields in the list directly, the changes will not be reflected back to the UIVars string.
2. Every time the “go” button will be clicked, a new set of variables will be added to the list. Existing variables will not be overridden by new ones.
3. When variables are added to the list, they are added to the end of the list. When many variables are added, to access the variables, scroll the list using the scrollbars.

The uiConf XML and the UIVars representation

The UIVars created through the Players Studio are added as <var> nodes under the <uiVars> node (the very last node) in the UIConf XML file.
Developers can also manually add UIVars to the UIConf XML using the uiConf API. Note: If you manually edit a player’s UIConf XML and afterwards edit that player in Players Studio, your manually added changes will be overridden by the Players Studio.

Common Kaltura Player customization

The following list shares common player modifications required by Kaltura publishers. Follow the steps above to add the UIVars to your Kaltura Players to achieve the desired modifications.
Here are a few common use cases –
Customizing The Player Logo
This is a very common “how-to” question – “How does one change the small Kaltura Sun Icon to a custom icon?”.

1. Copy the following UIVars string to the “Paste your plug-in line here” box and then click the “go” button.

2. kalturaLogo.visible=false&kalturaLogo.includeInLayout=false&mylogo.plugin=true&mylogo.className=Watermark&mylogo.width=30&mylogo.height=30&mylogo.watermarkPath=YOURLOGO&mylogo.watermarkClickPath=YOURURL&mylogo.position=after&mylogo.relativeTo=kalturaLogo

3. Scroll the variables list and find the mylogo.watermarkPath variable. Change the value of this variable (YOURLOGO) to the URL of your desired icon (swf, png or jpg file).
4. Scroll down and find the mylogo.watermarkClickPath variable. Change the value of this variable (YOURURL) to the URL to which the user will be taken, when clicking on the icon.
5. Save and preview your player.

Append a Bumper Video After The Media Playback
It’s a common practice to play a short message video after every media playback. For example, for all the videos on your site, play a 2 seconds video of your company logo rotating and shining.
UIVars:

postbumper.plugin=true&postbumper.width=0&postbumper.height=0&postbumper.lockUI=false&postbumper.playOnce=false&postbumper.path=bumperPlugin.swf&postbumper.relativeTo=video&postbumper.position=before&postbumper.includeInLayout=false&postbumper.preSequence=false

Modify The Playback Behavior
Using UIVars, it is also possible to manipulate internal player parameter.  For example, indicate different start and stop times for the playback.
To begin playback at a specific time (jump ahead of the beginning of the video), use the following UIVars:

mediaProxy.mediaPlayFrom=25

To stop the playback at a specific time, use the following UIVars:

mediaProxy.mediaPlayTo=74

Creating a Chrome-less Player
Another common requirement is to make a player UI-less. While it is easy to remove the marks from all the features in the Player Studio, the controllbar will still remain. The UIVars string below, will make the controllbar UI disappear from the player:

ControllerScreenHolder.visible=false&ControllerScreenHolder.includeInLayout=false

For more use-cases and UIVars player modifications, read this Common UIVars and Use Cases table, and follow the blog for more exciting updates soon.

Help us extend this table; Let us know about your player modifications in the comments below…