From the course: Learning Web Audio and Video
Unlock the full course today
Join today to access over 22,500 courses taught by industry experts or purchase this course individually.
Dynamic time display
- [Instructor] Using the HTML5 media API we can read the current position and duration of our audio or video content. And display a user readable time for each value within the established time element. Let's go ahead and look to our updateTime function which right now is way at the bottom of our script tag. And, if you remember, this is called whenever meta data is loaded into our video and also whenever the time is updated. So this is the current time if it's playing. So, within updateTime, what we need to do is actually set the text content of both our position and duration elements to the media current time and media duration. Let's do position first. So we'll set position.textContent. This is the value of the text between our position tags and our time element. If we go ahead and scroll back up to refresh ourselves, we can see there's positiondisplay and here is the text content right there. Just a placeholder for now. That's what we'll be changing inside of updateTime. And to…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.