YouTube style chapters timeline in video.js

[petarsubotic]

We currently use chapter "markers" as points on the timeline and are considering developing timeline sections as in YouTube player.
Has anyone done anything similar in video.js and if so can you help by pointing us to any helpful resources or ideas.

[getnot]

Any success in this ?

[amtins]

@getnot I made a component few month ago, but I'm still not totally happy with the result, so I didn't publish it (yet?), here is a little demo
Screencast from 07. 07. 23 22:00:06.webm

I was also playing with another type of markers, which I think could be easily updated to have something youtube like
Screencast from 07. 07. 23 21:55:36.webm

[petarsubotic]

in the meantime we made a lot of progress on this, demo:

chapter.markers.mp4

here's the basic coding idea:
https://jsfiddle.net/petarsubotic/qyz94acj/

[avengsum]

@petarsubotic Hey how you create this can you give a high-level idea to build this?

[petarsubotic]

@avengsum we used a clipath (see jsfiddle above) to create a "mask" layer above the regular progress bar and create sections. Additionally we are adjusting the height of the specific path to get a "hover" effect.

[pstashp]

@avengsum, Odysee uses the same method too.

• https://odysee.com/@WebDevSimplified:8/how-to-create-3-levels-of-react-image:7
• https://github.com/OdyseeTeam/odysee-frontend/blob/feaa3ffa85484a659419ac16d1e7caca24ce1e1e/ui/component/viewers/videoViewer/internal/chapters.js#L155

They chose not to touch the existing videojs components and only work on top of it. If you plan to expand with more features, it might be easier to just rewrite the whole ProgressControl cluster.