There is no precise information on how to implement the chapter editing. Where should I refer in order to understand how to implement this.
Hi @pajay,
First, you need to add the chapter plugins to your players: one for editing and another for displaying the chapters.
To do so, go to KMC->Studio->YOUR PLAYER->Plugins [last icon in the left pane]->Import Plugin
For editing, paste this string in the “Plugin Configuration String:” text box:
chaptersEdit.plugin=true&chaptersEdit.onPageJs1={onPagePluginPath}/chapters/chaptersEdit.js&chaptersEdit.onPageJs2={onPagePluginPath}/chapters/kWidget.cuePointsDataController.js&chaptersEdit.onPageCss1={onPagePluginPath}/chapters/chaptersEdit.css&chaptersEdit.requiresJQuery=true&chaptersEdit.customDataFields=desc,thumbUrl&chaptersEdit.tags=chaptering&chaptersEdit.editPropId=k-chapterProp&chaptersEdit.editTimelineId=k-chapterTimeline
For viewing, paste:
chaptersView.plugin=true&chaptersView.path=/content/uiconf/ps/kaltura/kdp/v3.6.9/plugins/facadePlugin.swf&chaptersView.position=before&chaptersView.onPageJs1={onPagePluginPath}/chapters/chaptersView.js&chaptersView.onPageJs2={onPagePluginPath}/libs/jcarousellite.js&chaptersView.onPageJs3={onPagePluginPath}/libs/jquery.sortElements.js&chaptersView.onPageCss1={onPagePluginPath}/chapters/chaptersView.css&chaptersView.requiresJQuery=true&chaptersView.tags=chaptering&chaptersView.layout=horizontal&chaptersView.containerPosition=after&chaptersView.overflow=false&chaptersView.includeThumbnail=true&chaptersView.thumbnailWidth=100&chaptersView.horizontalChapterBoxWidth=320&chaptersView.thumbnailRotator=true&chaptersView.includeChapterStartTime=true&chaptersView.includeChapterDuration=true&chaptersView.pauseAfterChapter=false&chaptersView.titleLimit=24&chaptersView.chapterRenderer=onChapterRenderer&chaptersView.chaptersRenderDone=onChaptersRenderDone&chaptersView.relativeTo=video
Here is a sample code for adding and editing chapters, replace:
#PARTNER_ID#
#UI_CONF_ID#
#ENTRY_ID#
#KS_STRING#
with your values, where #UI_CONF_ID# is the ID of the player you enabled the chapter editing plugin.
<!DOCTYPE HTML>
<html>
<head>
<title>Chapters Edit Example</title>
<script type="text/javascript" src="http://player.kaltura.com/tests/qunit/qunit-bootstrap.js"></script>
<!--script type="text/javascript" src="http://player.kaltura.com/mwEmbedLoader.php"></script-->
<script src="https://cdnapisec.kaltura.com/p/#PARTNER_ID#/sp/#PARTNER_ID#00/embedIframeJs/uiconf_id/#UI_CONF_ID#/partner_id/#PARTNER_ID#"></script>
<script type="text/javascript" src="http://player.kaltura.com/docs/js/doc-bootstrap.js"></script>
<script type="text/javascript">
//Enable uiconf js which includes external resources ( not needed if resources are defined in uiConf )
mw.setConfig('Kaltura.EnableEmbedUiConfJs', true);
function jsKalturaPlayerTest( videoId ){
// Name this module
module( "Chapters edit test" );
var kdp = $('#' + videoId )[0];
var $iframe = $('#' + videoId + '_ifp').contents();
asyncTest( "Check for chapters container", function(){
kalturaQunitWaitForPlayer(function(){
// look for description box id:
//ok( $( '#descriptionBox_' + videoId ).length, "Found descriptionBox div" );
start();
});
});
}
</script>
<!-- qunit-kaltura must come after qunit-bootstrap.js and after mwEmbedLoader.php and after any jsCallbackReady stuff-->
<script type="text/javascript" src="http://player.kaltura.com/modules/KalturaSupport/tests/resources/qunit-kaltura-bootstrap.js"></script>
</head>
<body>
<h2> Chapters Edit </h2>
<div>
<div id="kaltura_player" style="width:400px;height:330px;float:left"></div>
<div id="k-chapterProp" style="float:left;width:370px"></div>
<div style="clear:both"></div>
<div id="k-chapterTimeline" style="width:765px"></div>
</div>
<script>
kWidget.featureConfig({
'targetId' : 'kaltura_player',
'wid' : '_#PARTNER_ID#',
//'uiconf_id' : '12905712',
'uiconf_id' : '#UI_CONF_ID#',
'entry_id' : '#ENTRY_ID#',
'flashvars': {
'chaptersEdit' :{
'plugin': true,
'ks' : '#KS_STRING#', // should be set via settings
'chaptersEdit.ks' : '#KS_STRING#', // should be set via settings
'customDataFields': 'desc,thumbUrl',
'editPropId': 'k-chapterProp',
'editTimelineId': 'k-chapterTimeline',
'tags' : 'chaptering',
'requiresJQuery' : true,
'onPageJs1': "{onPagePluginPath}/chapters/chaptersEdit.js",
'onPageCss1': "{onPagePluginPath}/chapters/chaptersEdit.css",
// get the shared cuepoint data controller:
'onPageJs2': "{onPagePluginPath}/chapters/kWidget.cuePointsDataController.js"
}
}
});
</script>
</body>
</html>
Note that you need a valid KS in order to add/edit chapters. Ideally, this should not be hard coded as a KS has an expiry date. You’ll want to prompt the user for the username and password and generate a KS each time they access your system by calling user->loginByLoginId, you may also use the appToken mechanism as I explained to you on a diff thread.
Here is a sample code for showing a player with the chapters plugin, replace:
#PARTNER_ID#
#UI_CONF_ID#
#ENTRY_ID#
with your values, where #UI_CONF_ID# is the ID of the player you enabled the chapter viewing plugin.
<!DOCTYPE HTML>
<html>
<head>
<title>Kaltura On-Page Chaptering Examples</title>
<script src="https://cdnapisec.kaltura.com/p/#PARTNER_ID#/sp/#PARTNER_ID#00/embedIframeJs/uiconf_id/#UI_CONF_ID#/partner_id/#PARTNER_ID#"></script>
<script type="text/javascript">
// Enable uiconf js which includes external resources ( not needed if resources are defined in uiConf )
mw.setConfig('Kaltura.EnableEmbedUiConfJs', true);
</script>
<!-- qunit-kaltura must come after qunit-bootstrap.js and after mwEmbedLoader.php and after any jsCallbackReady stuff-->
<link rel="stylesheet" type="text/css" href="http://player.kaltura.com/kWidget/onPagePlugins/chapters/chaptersSamples.css"/>
</head>
<body>
<h1>Kaltura On-Page Chaptering Examples</h1>
<div id="content">
<div class="clearfix"></div>
<div id="section-1" class="section">
<h3>1. Full chaptering interface - Lean horizontal carrousel</h3>
<div class="instance">
<div id="kaltura_player_1" style="width:640px;height:360px;" itemprop="video" itemscope itemtype="http://schema.org/VideoObject" >
<!-- Search engine metadata, based on schema.org/VideoObject -->
<span itemprop="name" content="Meet Kaltura (Company Video 2012)"></span>
<span itemprop="duration" content="30"></span>
<span itemprop="thumbnailUrl" content="http://cdnbakmi.kaltura.com/p/#PARTNER_ID#/sp/#PARTNER_ID#00/thumbnail/entry_id/#ENTRY_ID#/version/100004"></span>
<span itemprop="width" content="640"></span>
<span itemprop="height" content="360"></span>
</div>
<script>
kWidget.embed({
targetId: "kaltura_player_1",
wid: "_#PARTNER_ID#",
uiconf_id: "#UI_CONF_ID#",
entry_id: "#ENTRY_ID#",
flashvars: {
"chaptersView": {
"plugin" : true,
"onPageJs1" : "{onPagePluginPath}/chapters/chaptersView.js",
"onPageJs2" : "{onPagePluginPath}/libs/jcarousellite.js",
"onPageJs3" : "{onPagePluginPath}/libs/jquery.sortElements.js",
"onPageCss1" : "{onPagePluginPath}/chapters/chaptersView.css",
"onPageCss2" : "override1.css",
"tags" : "chaptering",
"layout" : "horizontal",
"containerPosition" : "after",
"overflow" : false,
"includeThumbnail" : true,
"thumbnailWidth" : "100",
"horizontalChapterBoxWidth" : "320",
"titleLimit" : "24",
"descriptionLimit" : "90",
"thumbnailRotator" : true,
"includeChapterNumberPattern" : false,
"includeChapterStartTime" : true,
"includeChapterDuration" : true,
"pauseAfterChapter" : false,
"path" : "/content/uiconf/ps/kaltura/kdp/v3.6.9/plugins/facadePlugin.swf",
"requiresJQuery" : true
}
}
})
</script>
</div>
<div class="instanceUnderHood">
<span class="instanceUnderHoodDesc">
A lean horizontal carrousel is achieved by constricting the thumbnail's width, selecting a horizontal layout to appear below the player and disabling 'overflow' so that the chapters area is constrained to the player's width using a carrousel:</span>
<pre class="prettyprint linenums">
<script><br/> kWidget.embed({<br/> ...<br/> flashvars: {<br/> "chaptersView": {<br/> ...<br/> "thumbnailWidth" : "100",<br/> "horizontalChapterBoxWidth" : "320",<br/> "layout" : "horizontal",<br/> "containerPosition" : "after",<br/> "overflow" : false,<br/> ...<br/> }<br/> }<br/> });<br/>
</script>
</pre>
</div>
</div>
<div class="clearfix"></div>
<div id="section-2" class="section">
<h3>2. Full chaptering interface - dominant vertical carrousel with thumbnail rotator</h3>
<div class="instance">
<div id="kaltura_player_2" style="width:640px;height:360px;" itemprop="video" itemscope itemtype="http://schema.org/VideoObject" >
<!-- Search engine metadata, based on schema.org/VideoObject -->
<span itemprop="name" content="Meet Kaltura (Company Video 2012)"></span>
<span itemprop="duration" content="30"></span>
<span itemprop="thumbnailUrl" content="http://cdnbakmi.kaltura.com/p/#PARTNER_ID#/sp/#PARTNER_ID#00/thumbnail/entry_id/#ENTRY_ID#/version/100004"></span>
<span itemprop="width" content="640"></span>
<span itemprop="height" content="360"></span>
</div>
<script>
kWidget.embed({
targetId: "kaltura_player_2",
wid: "_#PARTNER_ID#",
uiconf_id: "#UI_CONF_ID#",
entry_id: "#ENTRY_ID#",
flashvars: {
"chaptersView": {
"plugin" : true,
"onPageJs1" : "{onPagePluginPath}/chapters/chaptersView.js",
"onPageJs2" : "{onPagePluginPath}/libs/jcarousellite.js",
"onPageJs3" : "{onPagePluginPath}/libs/jquery.sortElements.js",
"onPageCss1" : "{onPagePluginPath}/chapters/chaptersView.css",
"tags" : "chaptering",
"layout" : "vertical",
"containerPosition" : "right",
"overflow" : false,
"includeThumbnail" : true,
"thumbnailWidth" : "280",
"horizontalChapterBoxWidth" : "550",
"titleLimit" : "60",
"descriptionLimit" : "200",
"thumbnailRotator" : true,
"includeChapterNumberPattern" : false,
"includeChapterStartTime" : true,
"includeChapterDuration" : true,
"pauseAfterChapter" : false,
"chapterRenderer" : "onChapterRenderer",
"chaptersRenderDone" : "onChaptersRenderDone",
"path" : "/content/uiconf/ps/kaltura/kdp/v3.6.9/plugins/facadePlugin.swf",
"requiresJQuery" : true
}
}
})
</script>
</div>
<div class="instanceUnderHood">
<span class="instanceUnderHoodDesc">
A dominant vertical carrousel is achieved by expanding the chapter box and thumbnail's widths, selecting a vertical layout to appear to the left/right of the player and disabling 'overflow' so that the chapters area is constrained to the player's height using a carrousel. We also enable quick preview via thumbnail rotation, allowing to experience multiple key frames of each chapter by simply rolling over each chapter's thumbnail:</span>
<pre class="prettyprint linenums">
<script><br/> kWidget.embed({<br/> ...<br/> flashvars: {<br/> "chaptersView": {<br/> ...<br/> "thumbnailWidth" : "280",<br/> "horizontalChapterBoxWidth" : "550",<br/> "layout" : "vertical",<br/> "containerPosition" : "right",<br/> "thumbnailRotator" : true,<br/> "overflow" : false,<br/> ...<br/> }<br/> }<br/> });<br/>
</script>
</pre>
</div>
</div>
<div class="clearfix"></div>
<div id="section-3" class="section">
<h3>3. Minimal chaptering interface (vertical) - full list with auto prefix pattern</h3>
<div class="instance">
<div id="kaltura_player_3" style="width:500px;height:330px;" itemprop="video" itemscope itemtype="http://schema.org/VideoObject" >
<!-- Search engine metadata, based on schema.org/VideoObject -->
<span itemprop="name" content="Meet Kaltura (Company Video 2012)"></span>
<span itemprop="duration" content="30"></span>
<span itemprop="thumbnailUrl" content="http://cdnbakmi.kaltura.com/p/#PARTNER_ID#/sp/#PARTNER_ID#00/thumbnail/entry_id/#ENTRY_ID#/version/100004"></span>
<span itemprop="width" content="640"></span>
<span itemprop="height" content="360"></span>
</div>
<script>
kWidget.embed({
targetId: "kaltura_player_3",
wid: "_#PARTNER_ID#",
uiconf_id: "#UI_CONF_ID#",
entry_id: "#ENTRY_ID#",
flashvars: {
"chaptersView": {
"plugin" : true,
"position" : "before",
"onPageJs1" : "{onPagePluginPath}/chapters/chaptersView.js",
"onPageJs2" : "{onPagePluginPath}/libs/jcarousellite.js",
"onPageJs3" : "{onPagePluginPath}/libs/jquery.sortElements.js",
"onPageCss1" : "{onPagePluginPath}/chapters/chaptersView.css",
"tags" : "chaptering",
"layout" : "vertical",
"containerPosition" : "left",
"overflow" : true,
"includeThumbnail" : false,
"titleLimit" : "40",
"descriptionLimit" : "100",
"thumbnailWidth" : "100",
"horizontalChapterBoxWidth" : "300",
"thumbnailRotator" : true,
"includeChapterNumberPattern" : "($1) ",
"includeChapterStartTime" : false,
"includeChapterDuration" : false,
"pauseAfterChapter" : false,
"chapterRenderer" : "onChapterRenderer",
"chaptersRenderDone" : "onChaptersRenderDone",
"path" : "/content/uiconf/ps/kaltura/kdp/v3.6.9/plugins/facadePlugin.swf",
"requiresJQuery" : true
}
}
})
</script>
</div>
<div class="instanceUnderHood">
<span class="instanceUnderHoodDesc">
A minimal (vertical) chaptering interface is achieved by disabling thumbnails, chapter start time and duration fields, and setting a vertical layout positioned to the left/right of the player. We also enable 'overflow' so that the full list of chapters is displayed, without a constraining carrousel. In this example we also show how to use an auto-prefix, displaying each chapter's number using a custom pattern (e.g. '(X) '):</span>
<pre class="prettyprint linenums">
<script><br/> kWidget.embed({<br/> ...<br/> flashvars: {<br/> "chaptersView": {<br/> ...<br/> "layout" : "vertical",<br/>"containerPosition" : "left",<br/> "includeThumbnail" : false,<br/> "includeChapterStartTime" : false,<br/> "includeChapterDuration" : false,<br/> "includeChapterNumberPattern" : "($1) ",<br/> "overflow" : true,<br/> ...<br/> }<br/> }<br/> });<br/>
</script>
</pre>
</div>
</div>
</div>
</body>
</html>
Thank you @jess. I didn’t know we had to make changes to the player to implement this.
I had another question, Can we really insert a thumbnail within the video, play the thumbnail for few seconds and then continue with the rest of video?
http://player.kaltura.com/kWidget/onPagePlugins/chapters/ChapterSamples.html
It is a video of this demo site,
I want to check what kind of setting is done for the SRT / DFXP file.
http://player.kaltura.com/docs/index.php?path=chaptersEdit
not work.
Error
Current user does not have permission to insert property “KalturaAnnotation”