player icon indicating copy to clipboard operation
player copied to clipboard

How Can add Markers with Title (Not Chapters)

Open aliyousefi-dev opened this issue 6 months ago • 2 comments

Related Problem I'd like to show custom markers on the timeline to indicate specific moments (e.g., "Key Moment", "Ad Break", "Goal", etc.), not using chapters. Currently, Vidstack supports chapters via VTT files, but these:

Require start/end times

Only show up in a chapter menu

Do not display as visual markers on the timeline.

Describe I’m looking for a way to display simple vertical markers on the time slider with optional titles/tooltips when hovered.

Examples of ideal functionality:

Vertical lines on the timeline at set times

Optional hover labels (e.g.,

)

No need for chapter navigation or menu entries

Alternatives I’ve tried:

Using chapters VTT, but they don’t show visual markers on the timeline

Manually injecting

s into the media-time-slider via JS, but accessing shadow DOM is fragile

Rendering custom components inside (but no API/slot support fou

aliyousefi-dev avatar Jun 25 '25 18:06 aliyousefi-dev

I have same issue. I think without defining own custom <media-slider-chapters> or other components you can't do it in default layout. However Plyr layout does support exactly that but without chapter segments.

https://vidstack.io/docs/wc/player/components/layouts/default-layout/#plyrlayout - props - markers

Josefikos avatar Jul 15 '25 16:07 Josefikos

I think it can be a good feature to implement

aliyousefi-dev avatar Jul 15 '25 17:07 aliyousefi-dev