Search code examples
javascriptjqueryhtmlcssjplayer

jPlayer progress bar knob

I was recently working with jPlayer and I want the play bar ("jp-play-bar") to have a little knob in the right side when streaming, like the one in this pic: Desired progress bar behavior

Yet, when I try to set the background, the image is sliced and contained within the borders of the progress bar (jp-progress). How could I set it to pop up without breaking the other visuals? Has somebody tried?

Here's the demo version from their official website: http://www.jplayer.org/latest/demo-01

Thank you very much!

Solution

  • I've just had a fiddle around and came up with:

    http://jsfiddle.net/gRoberts/BNt3m/

    With a little more tweaking, it should be very simple to replicate what you need.

    You could also then use the $.jPlayer.event.timeupdate event to create the time bubble should you want to.