In this lesson I create a slider interface that manipulates the <video> speed.
First I get the parent <div> 'speed', child <div> 'bar' and <video> element 'video'.
Then I listen for the 'mousemove' event and run handleMove(e).
In handleMove(e) - 'this' being 'speed', first set:
- 'y' to (e.pageY - this.offsetTop).
- 'percent' to (y / this.offsetHeight)
- 'min' and 'max' values which serve as the range for the controller
- 'height' equal to (percent * 100)
- 'playbackRate' to (percent * (max - min) + min) which ensures the value isn't between 0 and 1, instead it is a value range between the 'min' and 'max', multiplied by the percentage
Finally set the 'bar.style.height' to 'height'. Then set the 'bar.textContet' to 'playbackRate' and the 'video.playbackRate' to 'playbackRate'.
See the Pen
JavaScript30 - 28 - Video Speed Controller by Corey Noble (@CoreyNoble)
on CodePen.