placing custom markers on the progress bar

[frumbert]

Is there a suggested way for me to place markers (in my case chapters) over the progress bar at the correct positions in time? I'm planning on just using positioned divs or svg elements.

[1ucay]

it would be awesome, if I can define own timeline (cue point, chapter).

[mikecx]

Adding on to this request, being able to use those cuepoints as start-end markers and being draggable would make this amazing. We're building a video trimming library and having those cuepoints would make it so much easier.

[benrolfe]

MP3 files can have chapters. It would be great to have a list of chapters to "jump to".

[advename]

Any update on this?

[carbonrider]

I am also looking for this feature, is there any update? OR has anyone achieved with custom plugin?

[zamoosh]

I wish there was a method so we can set markers on progress bar.

[carbonrider]

@zamoosh I could place markers on progress bar with my own code.

[zamoosh]

@zamoosh I could place markers on progress bar with my own code.

Would you please share your code?

[carbonrider]

I will have to check if I can share the code. But here are few hints

1. Create a new plugin for Plyr and pass plyr instance to it.
2. Invoke an initialize function
   a. Locate a HTML element using class selector - .plyr__progress
   b. Create a div element and add it to the above element. (Make sure to set its display to contents and pointer events to none)
   c. Inside the div element created in step 2, create markers you want. Each marker can be placed at absolute position using const percent = (parseFloat(item.start) / this.plyr.duration) * 100;
   d. Make sure that each of these marker should also have pointer events set to none. This should allow user to drag thumb tracker in progress bar.

[zamoosh]

@carbonrider Please check here 👇. I found the answer.

ClassHook#8 (comment)

[carbonrider]

@carbonrider Please check here 👇. I found the answer.

ClassHook#8 (comment)

That's really cool. Since I had to put the feature in production, I had to write my own plugin. Anyways, thanks for pointing out the link.

[zamoosh]

@carbonrider Happy to help yogesh!👌🙂
also I have directory named Plyr in my account that have some feature maybe u like! It's on add_marker_completed branch. please see that and tell your opinion...