Join Steve Heffernan for an in-depth discussion in this video Creating a Current Time and Duration display, part of HTML5: Video and Audio in Depth.
- View Offline
- Exercise Files
The next thing we are going to build is the time display, which shows us both…how far we are through the video and how long the video is. If I play this video--…(Music playing)…You can see the seconds go up as the video continues to play.…That's what we are going to build.…So, let's go to our code.…The first thing we need to do is create our time element.…It's going to be similar to our progress element.…We are going to have a container element and that's going to be a div that…will give an id of time.…
That's going to hold the two different times, both the current time and the duration.…Then instead of divs, I am going to use the span element, because we just want…the two times to sit next to each other.…We can give the first one an id of current_time.…This is going to be our current time display and that span.…I am going to give it a starting value of 00:00.…So 0 minutes and 0 seconds.…
Then I am going to do another span and we will give that an id of duration and…that's going to be our duration display.…
- Understanding the differences in media formats
- Preloading, autoplaying, and looping in HTML5
- Setting a video's width and height attributes
- Displaying subtitles and captions
- Generating embed code with an embed code builder
- Encoding files using HandBrake, Firefogg, and VLC
- Creating a load progress bar
- Recognizing Android and iOS issues
Skill Level Intermediate
1. Video and Audio Basics
Understanding the format war3m 53s
2. Embedding Video and Audio
3. Falling Back to Alternative Playback Methods
4. Encoding Audio and Video Files
6. Known Issues and Workarounds
7. Audio and Video in the Wild
Further exploration1m 40s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.