Embedding Kaltura Media Players in Your Site

Printer-friendly version

Understanding Kaltura Media Players

Kaltura's Media Players

Kaltura’s flexible HTML5- and Flash-based media players provide media online publishing solutions that are easy to use and embed. Kaltura offers:

To learn more about Kaltura media player features, refer to Introduction to Kaltura's Cross-Platform Media Players.

In this article you will learn:

How to embed the Kaltura Player

Embedding a Player for a Single Video

To use embed code from the Kaltura Management Console (KMC) for a single video:

  1. Open the KMC and go to Content>Manage.
  2. In the Entries Table, click Preview & Embed in the Publish column of the video that you want to embed.
  3. (Optional) In the Embedding window, select a specific player from the Select Player menu.

     

  4. In the Embedding window, click Copy to copy the embed code from the Embed Code field. 
  5. In your web page, paste the code to embed the player with the video.

Kaltura Embed Options

By default the embed codes support both Flash and HTML5 players. The Embed Code type includes several options Auto Embed, Dynamic Embed, Legacy Flash Embed, Iframe Embed. You may want to use diffrent embed code types in diffrent situations. Here is a summary of the types. 

Note: Substitute {PARTNER_ID} for your Kaltura partner id, {UICONF_ID} for an actual player id, also known as the uiconf id and {entryId} for an actual entry id. See the full list of params here

Auto Embed

This is the default recommended embed code for the Kaltura Player. Auto embed is concise code and is good for quickly getting a player or widget onto the page without any runtime customizations. Auto embed has been heavily optimized for packing lots of resources into the initial request, allowing the player to be rendered quickly. 

<script type="text/javascript" src="http://cdnapi.kaltura.com/p/{PARTNER_ID}/sp/{PARTNER_ID}00/embedIframeJs/uiconf_id/{UICONF_ID}/partner_id/{PARTNER_ID}?entry_id={ENTRY_ID}&playerId={UNIQUE_OBJ_ID}&cache_st=1362074486&autoembed=true&width=400&height=333&"></script>

Dynamic Embed

Dynamic embed is recommended for cases where you want to dynmaically control runtime configuration and or have more control over the embed call. This incluces setting plugin overides, and setup callbacks. Basic Embed codes look like this: 

<div id="{UNIQUE_OBJ_ID}" style="width:400px;height:330px;"></div> 
<script src="http://cdnapi.kaltura.com/p/{PARTNER_ID}/sp/{PARTNER_ID}00/embedIframeJs/uiconf_id/{uiConfId}/partner_id/{PARTNER_ID}"></script>
<script>
      kWidget.embed({
         'targetId': '{UNIQUE_OBJ_ID}',
         'wid': '_{PARTNER_ID}',
         'uiconf_id' : '{UICONF_ID}',
         'entry_id' : '{ENTRY_ID}',
         'flashvars':{ // flashvars allows you to set runtime uiVar configuration overrides. 
              'autoPlay': false
         },
         'params':{ // params allows you to set flash embed params such as wmode, allowFullScreen etc
              'wmode': 'transparent' 
         },
         readyCallback: function( playerId ){
              console.log( 'Player:' + playerId + ' is ready '); 
         }
 });
</script>

 

More info on dynamic embed can be obtained on the dynamic embed page

Thumb Embed

This method takes the same arguments as the dynamic embed. Thumbnail embed passes the entire configuration to the kWidget.embed when the user "clicks" on the play button. This is the recommended method to use when you need to embed multiple players/entries in the same web page. The syntax for ThumbEmbed is identical to kWidget.embed ( dynamic embed ) except we call "kWidget.thumbEmbed" instead of "kWidget.embed" 

IFrame Embed

iframe embed is good for sites that do not allow 3rd party JavaScript to be embed on their pages. This mode fits more stringent page security requirements. If using this iframe only embed mode, the page won't be able to  access the KDP player API.

<iframe src="http://www.kaltura.com/p/{PARTNER_ID}/sp/{PARTNER_ID}00/embedIframeJs/uiconf_id/{UICONF_ID}/partner_id/{PARTNER_ID}?iframeembed=true&playerId={UNIQUE_OBJ_ID}&entry_id={ENTRY_ID}" width="400" height="330" allowfullscreen webkitallowfullscreen mozAllowFullScreen frameborder="0"></iframe>

Legacy Flash Embed Code

Kaltura continues to support the Legacy Flash embed code. This code is best for legacy systems that can only accept Flash object code for player embeds. In general you should not use this embed code unless you have to. For cases where you can't inject JavaScript you should instead use the iframe embed, so that both Flash and HTML5 can be supported with a single embed code. 

Replace variables in braces {} – including the braces themselves – with the actual value used for each site and media. 

<object 
  id="{UNIQUE_OBJ_ID}" 
  name="{UNIQUE_OBJ_ID}" 
  type="application/x-shockwave-flash" 
  height="{HEIGHT}" 
  width="{WIDTH}" 
  allowFullScreen="true" 
  allowNetworking="all" 
  allowScriptAccess="always" 
  data=" http://www.kaltura.com/kwidget/wid/_{PARTNER_ID}/uiconf_id/{UICONF_ID}/entry_id/{ENTRY_ID}" 
  xmlns:dc="http://purl.org/dc/terms/" 
  xmlns:media="http://search.yahoo.com/searchmonkey/media/" 
  rel="media:video" 
  resource=" http://www.kaltura.com/kwidget/wid/_{PARTNER_ID}/uiconf_id/{UICONF_ID}/entry_id/{ENTRY_ID}">
  <param name="allowFullScreen" value="true" />
  <param name="allowNetworking" value="all" />
  <param name="allowScriptAccess" value="always" />
  <param name="bgcolor" value="#000000" />
  <param name="flashVars" value="" />
  <param name="movie" value=" http://www.kaltura.com/kwidget/wid/_{PARTNER_ID}/uiconf_id/{UICONF_ID}/entry_id/{ENTRY_ID}" />
<!--You can enter alternate content here. -->
</object>

Generating Embed Codes

Kaltura has built a simple library for generating embed codes via javascript. ( for example for a CMS that needs to generate these embed codes ). You can learn more about the project on its github project page

Params and settings

To use an HTML-based embed code for a KDP3 player, populate an <object> tag (like above) with the following values:

Replace variables in braces {} – including the braces themselves – with the actual value used for each site and media. 

 Parameter  Value/Variable Description Comments  Comments  Example 
 id {UNIQUE_OBJ_ID} HTML element unique identifier - this id will later be used to access this player instance via JavaScript

 UNIQUE_OBJ_ID:

  • Is a unique identifier, which enables referencing a specific player from JavaScript and a cascading style sheet (CSS)
  • On a web page, assign a unique object identifier to each player. On different web pages, players may be assigned the same identifier
  • To ensure cross-browser compatibility, set the same identifier for both id and name
id="{UNIQUE_OBJ_ID}"
name {UNIQUE_OBJ_ID} This should be equal to the value of the id parameter Must be identical to the value of the id parameter name="{UNIQUE_OBJ_ID}"
type application/x-shockwave-flash

HTML element type of object embedded.

Defines the HTML element as a Flash object

Value is always the same as specified in the Example type="application/x-shockwave-flash" 
height {HEIGHT}  The height of the player

Player dimensions: You can set and override values from a CSS.

(Optional):

  • Wrap the player embed code in  a division (<div>)
  • Set the HEIGHT and WIDTH values in the embed code to 100%
  • Set the actual size in the <div>
height="{HEIGHT}"
width {WIDTH}  The width of the player  See the height parameter width="{WIDTH}"
allowFullScreen true Enables Flash to enter Full Screen mode outside of the Browser window If this parameter is omitted or equal to false, the Player's Full Screen button will not respond  allowFullScreen="true"
allowNetworking all Refer to the official Adobe Flash docs   allowNetworking="all"
allowScriptAccess always Refer to the official Adobe Flash docs   allowScriptAccess="always"
data

The path for a Kaltura widget that represents the player and media, and includes the variables:

  • {PARTNER_ID}
  • {UICONF_ID}
  • {ENTRY_ID} 

PARTNER_ID: Your unique Kaltura Publisher Account identifier

UICONF_ID: Your player's unique identifier in the Kaltura system

ENTRY_ID: A unique identifier for your media in the Kaltura system

Use the same path for the data, resource and  movie parameters

To find your partner ID:


To find your player ID:

  • Open the KMC and go to Studio.
  • Find the player and copy the ID value.


To find your entry ID:

  • Open the KMC and go to Content>Manage.
  • In the Entries Table, find the media entry and copy the ID value.
Refer to the code example above
SEO code   Enables Google and Yahoo to recognize that the embed code represents a video and its metadata.   Refer to the code example above
SEO resource The path for a Kaltura widget that represents the player and media.    See the data parameter Refer to the code example above
param name allowFullScreen Defines the allowFullScreen parameter and value   <param name="allowFullScreen" value="true" />
param name allowNetworking Defines the allowNetworking parameter and value   <param name="allowNetworking" value="all" />
param name allowScriptAccess Defines the allowScriptAccess parameter and value   <param name="allowScriptAccess" value="always" />
param name bgcolor Defines the player's  background color parameter and value   <param name="bgcolor" value="#000000" />
param name flashVars Defines the flashVars parameter and value Using the flashVars it is possible to override many player settings and customize the player <param name="flashVars" value="" />
param name  movie The path for a Kaltura widget that represents the player and media  See the data parameter  Refer to the code example above

 

To learn how to use the <embed> syntax with the Twice-Cooked Method and the Satay Method, refer to Flash Satay Embedding Flash While Supporting Standards.  

 

 

 

Document type: 
(130311 reads)