Dynamic embed
Dynamic embed has many benefits over object tag or flash library rewrite:
- fast, does not have to wait for dom ready to output the flash or html5 player
- clean, uses json embed config for flashvars and params
- dynamic, better supports dynamic html5 and flash embed methods, responsive web design, and css inheritance
Basic usage of kWidget embed looks like this:
<div id="myEmbedTarget" style="width:400px;height:330px;"></div>
<!-- Substitute {partnerId} for your Kaltura partner id, {uiConfId} for an actual player id, also known as the uiconf id and {entryId} for an actual entry id. -->
<script src="http://cdnapi.kaltura.com/p/{partnerId}/sp/{partnerId}00/embedIframeJs/uiconf_id/{uiConfId}/partner_id/{partnerId}"></script>
<script>
kWidget.embed({
'targetId': 'myEmbedTarget',
'wid': '_{partnerId}',
'uiconf_id' : '{uiConfId}',
'entry_id' : '{entryId}',
'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'
}
});
</script>
kWidget.destroy enables you to cleanly remove a kWidget.embed:
<div id="myEmbedTarget" style="width:400px;height:330px;"></div>
<script src="http://cdnapi.kaltura.com/p/{partnerId}/sp/{partnerId}00/embedIframeJs/uiconf_id/{uiConfId}/partner_id/{partnerId}"></script>
<script>
kWidget.destroy( 'myEmbedTarget' );
</script>
An integrated example which includes SEO and video metadata, plugin configuration flashvars and an inline ready callback
<div id="myVideoContainer" itemprop="video" itemscope itemtype="http://schema.org/VideoObject" >
<div id="myVideoTarget" style="width:400px;height:330px;">
<!-- SEO and video metadata go here -->
<span itemprop="description" content="test folgers coffe"></span>
<span itemprop="name" content="FolgersCoffe.mpeg"></span>
<span itemprop="width" content="400"></span>
<span itemprop="height" content="300"></span>
</div>
</div>
<script>
kWidget.embed({
'targetId': 'myVideoTarget',
'wid': '_243342',
'uiconf_id' : '12905712',
'entry_id' : '0_uka1msg4',
// Plugin configuration / flashvars go here
'flashvars':{
'myPlugin':{
'fooAttribute': 'bar',
'barAttribute': 'foo'
},
'autoPlay' : true
},
// Ready callback is issued for this player:
'readyCallback': function( playerId ){
console.log( "kWidget player ready: " + playerId );
var kdp = $( '#' + playerId ).get(0);
kdp.kBind( 'doPlay', function(){
console.log( "doPlay called on " + playerId );
});
}
});
</script>