Embedding Kaltura player in your website
Posted By : Rohit Goyal | 28-Sep-2016
Description:- Kaltura is a HTML5 & flash based media player providing video streaming and publishing solution.
Steps to embed kaltura player:-
1) Open KMC and go to Content > Manage.
2) In Entries Table, click Preview & Embed in the Publish column.
3) select a player from the Select Player menu.
4) In Embed Type menu you found 4 ways to embed kaltura Player.
Kaltura Embed Types:-
1) Auto Embed
2) Dynamic Embed
3) Thumb Embed
4) Iframe Embed
1) Auto Embed:-
This is the default embedding option for kaltura player.Auto embed is good for quickly embedding player onto
the page without any runtime customizations.
Include the code below in your HTML file:-
<script type="text/javascript" src="http://cdnapi.kaltura.com/p/{Your_Partner_ID}/sp/{Your_Partner_ID}00/embedIframeJs/uiconf_id/{UICONF_ID}/Your_Partner_ID/{Your_Partner_ID}?EntryID={EntryID}&Player_ID={UNIQUE_OBJ_ID}&cache_st=1362074486&autoembed=true&width=600&height=400&"></script>
2) Dynamic Embed:-
Dynamic embed is recommended for dynamically control runtime configuration and have more control over the embed call.
This includes setting plugin overrides, setup callbacks and other customizing options.
Include the code below in your HTML file:-
<div id="{UNIQUE_OBJ_ID}"></div>
<script src="http://cdnapi.kaltura.com/p/{Your_Partner_ID}/sp/{Your_Partner_ID}00/embedIframeJs/uiconf_id/{uiConfId}/Your_Partner_ID/{Your_Partner_ID}"></script>
<script>
kWidget.embed({
'targetId': '{UNIQUE_OBJ_ID}',
'wid': '_{Your_Partner_ID}',
'uiconf_id' : '{UICONF_ID}',
'EntryID' : '{EntryID}',
'flashvars':{ // allows you to set runtime uiVar conf. overrides.
'autoPlay': false
},
'params':{ // allows you to set flash embed params like wmode, allowFullScreen etc
'wmode': 'transparent'
},
readyCallback: function( Player_ID ){
console.log( 'Player:' + Player_ID + ' is ready ');
}
});
</script>
3) Thumbnail Embed:-
Thumbnail embed passes the entire configuration to the kWidget and embed when the user "clicks" on the play button.
This method use when you need to embed multiple players in the web page.
The syntax is identical to dynamic embed except we have to call "kWidget.thumbEmbed" instead of "kWidget.embed".
<script>
kWidget.thumbEmbed({
'targetId': '{UNIQUE_OBJ_ID}',
'wid': '_{Your_Partner_ID}',
'uiconf_id' : '{UICONF_ID}',
'EntryID' : '{EntryID}',
'flashvars':{
'autoPlay': false
},
'params':{
'wmode': 'transparent'
},
readyCallback: function( Player_ID ){
console.log( 'Player:' + Player_ID + ' is ready ');
}
});
</script>
4) Iframe Embed:-
This embed is good for if you don't want to allow 3rd party JavaScript to be embed on their pages.
This embed mode is used for security reasons and page won't be able to access the KDP player API.
Include the code below in your HTML file:-
<iframe src="http://www.kaltura.com/p/{Your_Partner_ID}/sp/{Your_Partner_ID}00/embedIframeJs/uiconf_id/{UICONF_ID}/Your_Partner_ID/{Your_Partner_ID}?iframeembed=true&Player_ID={UNIQUE_OBJ_ID}&EntryID={EntryID}" width="600" height="300" allowfullscreen webkitallowfullscreen mozAllowFullScreen frameborder="0"></iframe>
That's it...
If you have any doubt feel free to contact me at my Skype Id:- rohit.oodles
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Rohit Goyal
Rohit is an experienced Frontend Developer, having good experience in HTML5, CSS3, Bootstrap, Jquery, AngularJS, Angular4/5, Restful API Integration, ES6 . His hobbies are playing cards and cricket.