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:
-
Kaltura HTML5 Video Library – provides seamless cross-platform video playback.
-
Kaltura Dynamic Player version 3 (KDP3) – an Adobe OSMF (Flash/ActionScript 3)-based, highly flexible media player.
To learn more about Kaltura media player features, refer to Introduction to Kaltura's Cross-Platform Media Players.
In this document you will learn:
-
How to embed the Kaltura Player.
-
Kaltura embed options: AutoEmbed, Dynamic Embed, ThumbEmbed, Legacy Embed.
-
Learn about Runtime Embeding options
-
KDP3. See Embedding the KDP3 Player Using Static HTML and Dynamically Embedding the KDP3 Player Using JavaScript.
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:
- Open the KMC and go to Content>Manage.
- In the Entries Table, click Preview & Embed in the Publish column of the video that you want to embed.
- (Optional) In the Embedding window, select a specific player from the Select Player menu.
- In the Embedding window, click Select Code and copy the code from the Embed Code field.
- In your web page, paste the code to embed the player with the video.
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
This is the default recomended 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 is recomended for cases where you want to dynmaically control runtime configuration and or have more control over the embed call. This incluces setting plugin overides, setup callbacks and . 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 optained on the dynamic embed page.
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 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>
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 genral 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.
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:
|
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):
|
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: 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:
To find your entry ID:
|
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 |
Displaying the KDP3 Player in Media and RSS Reader Apps
Reader applications such as Google Reader and RSS readers may not display your media player.
According the Google Reader FAQ, Google Reader recognizes only the <embed> syntax.
To display your media player in Google Reader, include the full <embed> code for the media player in your RSS.
Note: Using the <object> tag ensures that your code is standards-compliant, accessible, and search-engine friendly. Use the <embed> tag only when necessary.
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.
Dynamically Self-Hosting the Kaltura HTML5 Video Library using PHP
To learn how to self-host and set up the Kaltura HTML5 Video Library on a PHP-enabled web server for highly customized use, refer to Dynamically Self Hosting the Library via PHP.