Clickable chapters on videos

Content and Materials
1

:wave: kolibri community,

I am interested in adding timestamps to channel videos that viewers can use to navigate to specific sections of a video, like YouTube’s clickable chapters (see the description - “Show more” - of CSS Tutorial – Full Course for Beginners - YouTube or the following images for an example).

IMG-20230125-WA0003
IMG-20230125-WA0003685×1080 74.9 KB
Screenshot_20230125-212134
Screenshot_20230125-212134720×1370 178 KB
Screenshot_20230125-210905
Screenshot_20230125-210905720×1367 95.4 KB

This would allow viewers to easily navigate and jump to specific sections of a video.

I would greatly appreciate if someone could guide me on how to do this on the Kolibri channel videos if possible.

Thank you for your time and attention.

1 Like
2

Hi @deldesir!

At the moment we do not have the option to add chapters to videos as they are presented on YouTube.

However, if you are not yet using captions for your videos (recommended in order for videos to be accessible for learners with disabilities), you could use the Kolibri interactive transcript feature to present the clickable list of chapters.

I’ve made a simple proof of concept for this option that you can see on our demo site.

chapters

This workflow would involve creating a VTT file with markers for chapters and upload it as a captions file for each video in your channel on Kolibri Studio. VTT file for the above video looks like this:

WEBVTT

00:00:06.264 --> 00:00:09.892
Teacher Primer

00:00:22.210 --> 00:00:26.359
Chapter 1

00:01:14.505 --> 00:01:20.213
Chapter 2

00:01:55.329 --> 00:01:58.940
Chapter 3

00:03:06.329 --> 00:03:10.881
Chapter 4

00:03:26.329 --> 00:03:29.707
Chapter 5

If you are using Windows, a very good free and open source program to create and edit captions for videos is called SubtitleEdit.

You can download both the MP4 and VTT file for the above video from the sidebar to test locally.

download

2 Likes
3

Thank you very much @RadinaMatic for taking the time to answer me clearly on how to make a video interactive with this “chapter” feature.

I think this method with WebVTT would be perfect for what I hope to do, present sections as a sort of interactive table of contents. I just need to follow your instructions to do it as you show with your screen recordings.

Thanks again for your help and for sharing your knowledge with the community.

1 Like
4

@RadinaMatic thanks for your superb answer.

QUESTION: Is there a way to force display of the clickable Table of Contents for everyone (by default anyway) when they first visit the page?

To help people who don’t know that clickable “Video Chapters” exist! So that it looks like:

image
image1366×768 106 KB

5

Hello @holt , welcome to our community forums!

Choice to use the transcript feature or not is left to the user, so there is no way for the sidebar to be opened by default.

One important thing for both you, @deldesir and anybody else who might read this post in the future:

Please be very aware that using long videos which require internal chapters to navigate can be a concern when bandwidth and connectivity are challenging. Both in terms of server performance (having one long video requested by several learner devices at the same time), and in terms of the channel import operation (big resources as long and not properly compressed videos are more susceptible to errors because of connectivity challenges in offline settings).

Kolibri already offers a workflow for indicating to the user the recommended sequence through a serie of resources. You could split a long video in several smaller ones, even title them as Video ABC - Chapter N, put them in one folder and properly configure them as next and previous resource in Studio options. As soon as learner completes one, they will see a completion modal with the link that leads them to the next video in the sequence.

You can check this workflow implemented below, where the same video from the above example has been divided in 5 small ones. Open any of the videos in this folder, watch it till the end and observe the completion modal with the recommended following resource to watch:

chapters-as-separate-videos

If you have no other choice but to use the long video, then you absolutely must make sure that the video is properly encoded for web streaming. If they are not, you are setting up a difficult situation where the client devices will have to load the entire video before playback can begin, causing extreme server load, lags and failures in playback, bad user experience and frustration.

Read these two resources on how to properly encode the videos for streaming:

1 Like