Kaltura Player Chapter Editor


#1

There is no precise information on how to implement the chapter editing. Where should I refer in order to understand how to implement this.


How to use kaltura playlist
#2

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">
&lt;script&gt;<br/>     kWidget.embed({<br/>            ...<br/>                flashvars: {<br/>                       &quot;chaptersView&quot;: {<br/>                                ...<br/>                                &quot;thumbnailWidth&quot; : &quot;100&quot;,<br/>                              &quot;horizontalChapterBoxWidth&quot; : &quot;320&quot;,<br/>                           &quot;layout&quot; : &quot;horizontal&quot;,<br/>                               &quot;containerPosition&quot; : &quot;after&quot;,<br/>                &quot;overflow&quot; : false,<br/>                               ...<br/>                        }<br/>          }<br/>  });<br/>
&lt;/script&gt;
                        </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">
&lt;script&gt;<br/>     kWidget.embed({<br/>            ...<br/>                flashvars: {<br/>                       &quot;chaptersView&quot;: {<br/>                                ...<br/>                                &quot;thumbnailWidth&quot; : &quot;280&quot;,<br/>                              &quot;horizontalChapterBoxWidth&quot; : &quot;550&quot;,<br/>                           &quot;layout&quot; : &quot;vertical&quot;,<br/>                         &quot;containerPosition&quot; : &quot;right&quot;,<br/>                        &quot;thumbnailRotator&quot; : true,<br/>                                &quot;overflow&quot; : false,<br/>                             ...<br/>                 }<br/>          }<br/>  });<br/>
&lt;/script&gt;
                        </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">
&lt;script&gt;<br/>     kWidget.embed({<br/>            ...<br/>                flashvars: {<br/>                       &quot;chaptersView&quot;: {<br/>                                ...<br/>                                &quot;layout&quot; : &quot;vertical&quot;,<br/>&quot;containerPosition&quot; : &quot;left&quot;,<br/>                           &quot;includeThumbnail&quot; : false,<br/>             &quot;includeChapterStartTime&quot; : false,<br/>                                &quot;includeChapterDuration&quot; : false,<br/>       &quot;includeChapterNumberPattern&quot; : &quot;($1) &quot;,<br/>                                &quot;overflow&quot; : true,<br/>      ...<br/>                 }<br/>          }<br/>  });<br/>
&lt;/script&gt;
                        </pre>
                </div>
        </div>



</div>



</body>
</html>

#3

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?


#4

@pajay - I’ve followed up over email. let’s have a conversation.


#5

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.