Add markers

[adeeb1]

Cherry-picked from the great work done by ForeverSc: https://github.com/ForeverSc/plyr/tree/feat/markers
Pull request in main repo: sampotts#2386

This branch also:

• Adds getters and setters for markers so they can be dynamically updated on the UI
• Enables markers to be shown without tooltips
• Updates the README documentation with markers usage

[zamoosh]

@adeeb1
Hello Alexander Deeb! I'm trying to find a way to put markers dynamically using a button added to player like this:

would you please explain to me how to set markers on a Plyr object? (if there is a specific method to use)
here is my code: let audio = new Plyr('#player1');

thank you! 🙏🏻

[adeeb1]

@zamoosh Hi! Sure, you can do it by setting the value of the markers attribute:

audio.markers = {
  enabled: true,
  points: markersAry
};

For example:

audio.markers = {
  enabled: true,
  points: [{
    time: 30,
    tipHTML: "<p>Test</p>"
  }]
};

[zamoosh]

@adeeb1
many thanks to you!! 🙏🏻 ☺️

but it's not working yet!
I tried to insert the markers throw inspect, but the label won't show!
like below:

would you please see my code?

Is it possible to add markers after initialing the object?

[adeeb1]

@zamoosh This fork deviates from the main API, as we don't use a label key when defining a marker. Please see the markers options under the documentation here: https://github.com/ClassHook/plyr#options

Yes, it is possible to add markers after initializing the object. Try something like this to make sure it works at initializing:

let audio = new Plyr('#player1', {
  markers: {
    enabled: true,
    points: [
      { time: 30, tip: 'Test tip' }
    ]
  }
};

[zamoosh]

@adeeb1
Ohhh...! forgive me! I must use this fork!
sorry for taking you time!

thanks a lot! 🙏🏻 😃

[zamoosh]

@adeeb1
Bro! finally I got the answer! 🎉
thank you!

[adeeb1]

@zamoosh Glad to help! Make sure to use tipHtml instead of tip if you want to display HTML in the tooltip.