Kaltura On-Page Chaptering Examples

This page provides examples for how to use Kaltura's Chapters View player plugin. You can view all the configuration options on the chapters integration page.

1. Full chaptering interface - Lean horizontal carrousel

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:
<script>
kWidget.embed({
...
flashvars: {
"chaptersView": {
...
"thumbnailWidth" : "100",
"horizontalChapterBoxWidth" : "320",
"layout" : "horizontal",
"containerPosition" : "after",
"overflow" : false,
...
}
}
});
</script>
Want this configuration for your chapters? Go grab it!

2. Full chaptering interface - dominant vertical carrousel with thumbnail rotator

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:
<script>
kWidget.embed({
...
flashvars: {
"chaptersView": {
...
"thumbnailWidth" : "280",
"horizontalChapterBoxWidth" : "550",
"layout" : "vertical",
"containerPosition" : "right",
"thumbnailRotator" : true,
"overflow" : false,
...
}
}
});
</script>
Want this configuration for your chapters? Go grab it!

3. Minimal chaptering interface (vertical) - full list with auto prefix pattern

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) '):
<script>
kWidget.embed({
...
flashvars: {
"chaptersView": {
...
"layout" : "vertical",
"containerPosition" : "left",
"includeThumbnail" : false,
"includeChapterStartTime" : false,
"includeChapterDuration" : false,
"includeChapterNumberPattern" : "($1) ",
"overflow" : true,
...
}
}
});
</script>
Want this configuration for your chapters? Go grab it!

4. Minimal chaptering interface - single chapter carrousel with custom prefix and custom style

A minimal (horizontal) chaptering interface, which shows only the current chapter in context is achieved by disabling thumbnails and chapter start time, setting a horizontal layout positioned to appear below the player and expanding the chapter box width to match the player's width. This configuration, together with a constraining carrousel and a custom prefix, allows to focus the user on the 'current topic' discussed in each part of the video. In this example we also show how to customize the chapters style, using an overriding CSS file. The custom style file can be either self-hosted and in full customer control, or hosted by Kaltura (please contact your Account/Project Manager for setting this up via our Professional Services):
<script>
kWidget.embed({
...
flashvars: {
"chaptersView": {
...
"layout" : "horizontal",
"containerPosition" : "after",
"horizontalChapterBoxWidth" : "480",
"includeThumbnail" : false,
"includeChapterStartTime" : false,
"includeChapterDuration" : true,
"includeChapterNumberPattern" : "Current topic: ",
"overflow" : false,
...
"onPageCss1" : "override1.css",
...
}
}
});
</script>
Want this configuration for your chapters? Go grab it!

5. Custom-rendered chapters

In this example we show how to custom-render chapters. By overriding the default chapterRenderer function, your own function can be triggered every time a chapter is rendered, giving you full control over the chapter's layout and contents. Here we create a custom renderer which displays the chapter's description metadata as a tooltip, only when hovering over a chapter, instead of having a dedicated description element:
<script>
kWidget.embed({
...
flashvars: {
"chaptersView": {
...
"chapterRenderer" : "onChapterRendererSample1",
...
}
}
});

function onChapterRendererSample1( cuePoint, $chapterBox ){
$chapterBox.find('.chapterBoxInner').attr( 'alt', cuePoint.customData.desc );
$chapterBox.find('.chapterBoxInner').attr( 'title', cuePoint.customData.desc );
$chapterBox.find('.k-description').remove());
}
</script>
Want this configuration for your chapters? See above integration example.