How to use the Kaltura Player Studio's Additional Parameters and Plugins (UIVars, flashvars)

Printer-friendly version

This article describes the UIvars in the legacy Flash Player Studio. For current information please refer to this section in the Universal Studio Information Guide.

Setting UIVars - Flash Studio (Iris and earlier)

To simplify the management of many of the player features, Kaltura has implemented the “UIVars” to override and configure player features.

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:

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

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

  • 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 “go”), if you edit the fields in the list directly, the changes will not be reflected back to the UIVars string.
  • Every time you click “go”, a new set of variables will be added to the list. Existing variables will not be overridden by new ones.
  • 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.

NOTE: uiVars/flashvars configurations apply to both the HTML5 and Flash (KDP) players alike. For a full list of cross-platform compatibility (which configurations available for each platform), please see: Kaltura KDP API Compatibility.

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. 

If you manually edit a player’s UIConf XML and afterwards edit that player in the Studio tab, your manually added changes will be overridden by the Player's Studio settings.

Common Kaltura Player Customization (Media Player UI Modifications Using UIVars)

The following list shares common player modifications required by Kaltura publishers. Follow the steps to set UIVars to your Kaltura Players to achieve the desired modifications.

This section provides procedures for selected common use cases. For the full list of common use cases, see Common Kaltura Media Player UIVars Use Cases.

Customizing The Player Logo

To 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  “go”.

    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 
  2. 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).
  3. 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.
  4. 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 second video of your company logo rotating and shining.

To append a bumper video, using UIVars

  1. Go to the Studio tab and then select the Advertising tab.
  2. In the Ad Timeline section, click on Bumper Video.
  3. Toggle on Bumper Video Enabled.
  4. Paste the Kaltura Entry ID that will be used as the bumper.
  5. Enter the URL in the Click URL field.
  6. In the Features tab on the left, select the Additional Parameters and Plugins section.
  7. Enter the following and click Go:
bumper.preSequence=0&bumper.postSequence=1

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 Chromeless 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 control bar will still remain. You can set the UIVars to remove the control bar UI disappear from the player.

To create a UI-less player, use the following UIVars

ControllerScreenHolder.visible=false&ControllerScreenHolder.includeInLayout=false

To create a UI-less player, that loops playback and begins playback when loaded

controlsHolder.includeInLayout=false&controlsHolder.visible=false&externalInterfaceDisabled=false&loop=true&autoPlay=true

For advertising purposes it is also common to start playback in mute (without volume). To achieve that either visit the Basics tab when editing the player in KMC, and check the "Start player muted" option or add the following uiVar:

autoMute=true

How to Stretch a Thumbnail?

When the player size is set to a 4:3 aspect ratio, with a content that is 16:9, it is common requirement to have the thumbnail stretch to the size of the player while keeping the video at it's original 16:9 aspect ratio. 

To set the thumbnail to stretch to the size of the player regardless of its aspect ratio, use the following UIVars

video.stretchThumbnail=true

Another option is to create a custom thumbnail and set it as the default thumbnail of the video entry.

How to make the Flash player download button download a different specific flavor?

To change the Flash player download button to download a different specific flavor

Add the following additionalParam to the player:

key=download.flavorId
value=FlavorID taken from KMC->Settings->Transcoding Settings->ID (from ID column).
*If the flavor does not exist, it will fall back to the default flv.

How to make the Flash player start playback using a specific bitrate flavor? (when adaptive bitrate enabled)

Using the following two parameters will force the player to begin playback from a specific bitrate flavor ignoring the default or previously chosen bitrate.

mediaProxy.preferedFlavorBR=4000&disableBitrateCookie=true
  • mediaProxy.preferedFlavorBR=4000 – will choose the flavor with the bitrate closer to 4000k (or any value you choose).
  • disableBitrateCookie=true – optional, if set to true, the player will ignore the choice previously saved in the flash cookie.

How to change the Flash player’s control bar color?

To change the Flash player's control bar color

  1. Go to the Studio tab and then select the player you want to modify.
  2. In the Features tab on the left, select the Additional Parameters and Plugins section.
  3. Enter the following and click Go:
key: ControllerScreenHolder.bgColor
value: [YOUR_COLOR for example 0x00338d]
key: ControllerScreen.bgColor
value: [YOUR_COLOR for example 0x00338d]

Common Kaltura Media Player UIVars Use Cases

This table provides the full list of common use cases of player modifications required by Kaltura publishers. For procedures of selected common use cases, see Common Kaltura Player Customization (Media Player UI Modifications Using UIVars).  

Main Use Use case flashvars Notes Common use cases
Player Logo   Remove logo kalturaLogo.visible=false&kalturaLogo.includeInLayout=false Remove the Kaltura logo from the player White label the Kaltura player
Redirect click on logo to a different URL kalturaLogo.kClick=navigate('required URL')    
Add Custom logo 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
   
Bumper Ads Add post bumper ad bumper.preSequence=0&bumper.postSequence=1 Add a bumper ad to play after the selected video  
Auto-Replay Automatically replay when the video has reached end of playback ("loop playback") loop=true    
Google Analytics  Enable Google Analytics googleAnalytics.plugin=true&googleAnalytics.debugMode=
false&googleAnalytics.path=http://cdnexchange.kaltura.com/sites/
exchange.kaltura.com/files/applications/releases/Kalturian/16/
googleAnalytics.swf&googleAnalytics.relativeTo=
PlayerHolder&googleAnalytics.position=lastChild 
   
Customize events going out from the GA plugin googleAnalytics.plugin=true&googleAnalytics.path=/content/uiconf/ps/
kaltura/kdp/v3.5.21/plugins/googleAnalyticsPlugin.swf&googleAnalytics.
relativeTo=video&googleAnalytics.position=before&googleAnalytics.
width=0&googleAnalytics.height=0&googleAnalytics.customEvents=
mute,unmute,doGigya&googleAnalytics.visualDebug=false
(customEvents="mute,unmute,doGigya" -
a comma separated events names to filter.)
 
   
VAST Disable VAST pre-rolls for specific entry vast.preSequence=0    
Playlist Player Change thumbnails dimensions irImageIrScreen.width=0& Enter width in PX  
Set width and height playlist.width=[WidthInPx]&playlist.height=[HeightInPx]&playlist.visible=true&playlist.includeInLayout=true    
Hidden playlist playlist.visible=false&playlist.includeInLayout=false    
Change the color of the text of the tabs in a multitab playlist tabBar.color1=hexcolor&tabBar.color2Selected=true&tabBar.
color2=hexcolo
Change the hexcolor into 0xFFFFFF of your choice  
Audio playlist PlayerHolder.visible=false&PlayerHolder.includeInLayout=false&player.height=80 The value of player.height needs to be changed as well to match the size of the audio playlist For audio files
Playlist Loop

playlistAPI.loop=true

Auto replay at the end of the playlist (loop through the playlist items)  
Change the playlist items text color in a playlist player [labelId].dynamicColor=true
[labelId].color1=[your color]
See What flashvars can you use to change the playlist items text color in a playlist player.  
Chromeless player Hidden controls ControllerScreenHolder.visible=false&ControllerScreenHolder.
includeInLayout=false
  Player for images only
 Full screen  Hiding the scrubber in full screen mode scrubber.hideInFullScreen=true&    
Hiding the controller in full screen mode controlsHolder.hideInFullScreen=true&    
Screen overlay  Text changes for the message strings.FREE_PREVIEW_END=text&    
Text changes for top line strings.ENTRY_PENDING=text&    
Promotion text Remove the data in the right click  aboutPlayer=text& Changes the right click information on the player.  
Add a URL aboutPlayerLink=text  
Advertising Countdown  Change color  noticeMessage.dynamicColor=true Change the hexcolor into 0xFFFFFF of your choice   
noticeMessage.color1=hexcolor   
Controllers buttons customization  Play tooltip  playBtnControllerScreen.upTooltip=text     
Pause tooltip playBtnControllerScreen.selectedTooltip=text     
Stop/start playing at a certain point in time Start video later  mediaProxy.mediaPlayFrom=25  Start video later than 0s   
Stop at certain time mediaProxy.mediaPlayTo=74 Stop video at 74s  
Change KDP version FlashVar KDP version change kdpUrl=http://www.kaltura.com/flash/kdp3/v3.3.9/kdp3.swf Can be done in the FlashVars Testing different types of version
Stretch thumbnail to player's size   video.stretchThumbnail=true    
Message strings List of message strings that can be overridden via the configuration xml or FlashVars The full list is in Kaltura Dynamic Player version 3 -> Flashvars-> Player Design and Locale -> strings.ALERT_ID -> Available messages.

Example (1):

CLIP_NOT_FOUND -> Media not found

Example (2):

CLIP_NOT_FOUND_TITLE-> Sorry, clip not found

 
Captions Set the default selected captions language 
  • When using the “captions on video” feature, use: closedCaptionsOverPlayer.defaultLanguageKey
  • When using the "Captions for accessibility" feature use: ccUnderComboBox.defaultLanguageKey

Read more about the captions features. This flashvar is used to set the default language to be used when the player begins to play.

Identify the page language and set the default captions on the player.
Player Progress Bar  Set the colors of the buffering and progress lines in the playback progress bar 

This will set the buffering color to white:

scrubber.color1=0xffffff


This will set the buffering color to red:


scrubber.color1=0xFF0000

Note that the transparency of the buffering is not dynamic and is set from the skin asset

 

 
Display flavors by video dimensions instead of bitrate Will set the flavor selector to show the available flavors pixel dimensions instead of bitrates

 

mediaProxy.displayFlavorPixels=true

flavorComboControllerScreen.usePixels={mediaProxy.displayFlavorPixels}

 

Supported only in KDP version 3.6.5 and above
 
 
KCW metadata screen Predefining a category

Additional 2 flashvars to the embed code:

enforceCategory=video      // to enforce a specific category

disableCategories=true      // disable the category UI

The entry will automatically be under the category “video” Add the ability to set categories and block user from changing them.
Predefining a tag

Additional 2 flashvars to the embed code:

enforceTags=UGC        // to enforce a specific tag

disableTags = true       //disable the tags UI

The entry will automatically be tagged, with the tag “UGC” Allow a client to define default tags  for  the uploaded entry and  to define whether the Tag section on the upload form will be disabled.

 

 

FAQ Type: 
Product version: 
(93338 reads)