Assessment wanted on Video and Audio APIs

we have a small task at the end of the article Video and Audio APIs

saying

Can you work out a way to turn the timer inner

element into a true seek bar/scroller — i.e., when you click somewhere on the bar, it jumps to that relative position in the video playback? As a hint, you can find out the X and Y values of the element’s left/right and top/bottom sides via the getBoundingClientRect() method, and you can find the coordinates of a mouse click via the event object of the click event, called on the Document object.

this is my work

I basically add the following code at the end of js file

timerWrapper.addEventListener('click',toJump)

function toJump() {
    const wrapperRect=timerWrapper.getBoundingClientRect();
    document.onclick = function(e) {
        console.log(e.x) + ',' + console.log(e.y)
    }
    timerBar.style.width=`(${e.x}-${wrapperRect.x})px`;
}

but when I click on the timerwrapper, nothing happened :sob:

Hi @Austin_Hart

Since you haven’t linked a running example and I haven’t done this exercise myself before, it’s kind of hard to give a good answer. From what I see there are two things which should get you further:

  • You are not passing the event object into your toJump() function. This should look like this: function toJump(e) {
  • The format of your calculation is wrong. Only what’s inside ${...} gets evaluated. This should look something like this:
    `${e.x-wrapperRect.x}px`
    

Those changes should let you set the bar length by click. What’s still missing is setting the video time according to the bar length.

I hope this gets you further in this exercise. :slightly_smiling_face:

Have a nice day,
Michael

1 Like