Join Steve Heffernan for an in-depth discussion in this video Creating a Play Progress bar, part of HTML5: Video and Audio in Depth.
- View Offline
- Exercise Files
All right, the next control we are going to build is a progress bar, which is a visual…indicator of how far the video is time- wise through the total duration of the video.…We can see an example of it here.…It's the green bar that continues along as the video plays.…(Music playing)…Nice! We are going to go and build that.…So let's go to our code, and the way we're going to do this is by adding two elements.…The first is going to be the container and for that we are going to use a div…and we will give it an id of progress.…
What this is going to do is hold our other element which is going to be…the actual green bar.…Give that an id of play_progress. End div.…So the second element is going to grow inside of the first, and that's how we need for that.…So let's save there and let's go to our CSS and style this.…
So for our outer element which had an id of progress, I can give it a background…color so we can see it.…And we'll give it a gray and we will also give it a width of 310 pixels so it…doesn't take up the whole bar.…
- 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.