Add support for chapters

[holta]

Teachers & Learners need clickable Tables-of-Contents to navigate long videos, to greatly deepen learning around "2-hour movies" and similar long videos.

How should this thoughtful interactivity be implemented in a ZIM file, for long videos especially?

YouTube calls this Video Chapters. Here's a great example beginning with an 11-hour YouTube video on Learning CSS:

Above screenshot is from the Description > "Show more" section of https://youtu.be/OXGznpKZ_sA

Here's a visual view of the same idea:

▶️ Much the same question has been asked at: https://community.learningequality.org/t/clickable-chapters-on-videos/2707

▶️ Central Question: What is likely the best way to make this critical interactivity (clickable "Video Chapters") happen in a ZIM file, when scraping from YouTube or in any similar way?

ASIDE: YouTube shows the "Video Chapter" name at the bottom — much like CNN's Chyron ("the crawl"). That more advanced UX/UI is certainly elegant — but might not be at all necessary (MVP == Minimum Viable Product!) A very basic/clickable Table-of-Contents being all that learners (and teachers) need — to make video-centric ZIM files more practical/pragmatic for everyday learning!

CONCERN: ZIM files seem to all use video player https://github.com/brion/ogv.js which might make this very difficult, if not impossible? (i.e. to embed a Clickable-Video-Table-of-Contents within any ZIM file, that students need) Or am I wrong?!

SIDE QUESTION: Should warc2zim or any other approaches perhaps be considered — if there's no other/obvious way to make this happen?

[rgaudin]

Very interesting ; this SO answer provides a way to retrieve chapter data (albeit using some kind of alternative API) because Youtube's own API doesn't.

The rest would be easy as we use video.js so even if there's no ready-made chapter browser, we would just have to build a list of those and seek the player to the appropriate position (player.currentTime()) on click.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be now be reviewed manually. Thank you for your contributions.

[benoit74]

it looks like video.js is indeed already supporting chapters (also named tracks obviously):

• https://www.nuevodevel.com/nuevo/showcase/chapters
• https://docs.videojs.com/chaptersbutton

[benoit74]

Could be made easier by first implementing migration to yt-dlp instead of Youtube APIs (#177) if Youtube APIs are still not returning chapter information (I did not checked)