we have a small task at the end of the article Video and Audio APIs
saying
The time display currently breaks if the video is an hour long or more (well, it won’t display hours; just minutes and seconds). Can you figure out how to change the example to make it display hours?
Because
<audio>elements have the same HTMLMediaElement functionality available to them, you could easily get this player to work for an<audio>element too. Try doing so.Can you work out a way to turn the timer inner
<div>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 thegetBoundingClientRect()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.
In addition to the three tasks, I also displayed the total playback time.
It actually moved.
However, I am not very confident because I am not good with mathematical formulas.
The contents of the setTime function have become quite messy.
How can I make the code more beautiful?
Also, the English text is generated using machine translation, so I’m sorry if it’s difficult to read.