[Feature request/question] Table of contents supported

[jmarlena]

Hello!

I'm just wondering if this project supports a table of contents so viewers can more easily navigate the video's contents.

Thanks for your time. 💛

[JonnyBurger]

Hey @jmarlena!
Interesting question. As far as I know there is no way to include a table of content in the MP4 format, which is the format of the end artifact. This would be more player specific (like the YouTube feature where you can jump to chapters).

But I am interested to hear what sort of thing you are trying to build. Maybe I can give a more specific input on it.

[jmarlena]

I want a way to show a table of contents next to the video like from this egghead.io course: https://egghead.io/lessons/javascript-introduction-to-github

[JonnyBurger]

Got it @jmarlena!

So Remotion doesn't provide anything "out of the box" to achieve this, but there isn't anything that's constraining you to implement a table of contents alongside a video.

Right now, you can export a video as an MP4 file and play it inside a <video> tag. You could render a table of contents on the side and jump to certain portions of the video using the video.currentTime = chapterTime API.

Soon we will also have a remotion/player package where it will not render an MP4 video but basically an Animated React app. This will be the way to go if you need the video to be able to react to user input immediately. We will also make sure to provide an API for jumping to a certain time so table of contents can be programmed.

Remotion will not provide a built-in solution for table of contents, I think it's better if we only focus on the core objective of making programmatic videos.

Hope this is helpful! If you have any further questions, feel free to ask.

[jmarlena]

Thanks for sharing this context!! 💖

[FLGMwt]

👋 It sounds like this would not have helped @.jmarlena's use case, but just in case in helps anyone else stumbling onto this topic, ffmpeg does happen to support adding title / artist / chapter metadata to .mp4 videos. Documentations for the ffmpeg metadata format.

While remotion doesn't currently support accepting this metadata as input to remotion render or remotion components, you can use ffmpeg to add chapter metadata to an output video yourself:

ffmpeg -i video.mp4 -i metadata.txt -map_metadata 1 -codec copy video_with_metadata.mp4

metadata.txt could look something like this:

;FFMETADATA1
title=video title from metadata
artist=video artist from metadata

[CHAPTER]
TIMEBASE=1/1000
START=0
END=3000
title=chapter \#1

[CHAPTER]
TIMEBASE=1/1000
START=3000
END=5000
title=chapter \#2

Not all video players support this metadata, but in VLC at least, it will use the title and artist for the window title and display name for the video playlist. Additionally, chapters can be used to jump to chapter starts:

In the near term, remotion could potentially accept global video metadata such as title/artist/etc and generate metadata input for ffmpeg, but chapter markers might not be valuable as a cli argument since the video length is dynamic. Captioning support #356 has similar constraints, so solutions for that might involve strategies that prove useful for supporting chapter boundaries based on markup.

[JonnyBurger]

This is very interesting! Indeed we can support chapters in that case. It's already possible to do programmatically, but if the demand is high, we might support it natively in the future.

[tomByrer]

I haven't yet tested how YouTube lately consumes TextTracks / captions, but there is a WebVTT standard for "Chapters". Looks the same as WebVTT as normal captions, but with no overlapping timings & is linked to as chapters.

Chapter 1
00:00:00.000 --> 00:10:00.000
Dinosuars frolicking in space

https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API
https://html.spec.whatwg.org/multipage/media.html#attr-track-kind-chapters
https://learn-the-web.algonquindesign.ca/topics/video-audio/#chapter-tracks