Join Steve Heffernan for an in-depth discussion in this video Creating a Load Progress bar, part of HTML5: Video and Audio in Depth.
- View Offline
- Exercise Files
The next control we are going to build is a load progress bar which shows us how…much of the video has been downloaded.…I'll show you an example here.…(Music playing)…If I reload the page, you could see the blue bar grow as the video plays.…Now if you are loading the video from your computer, the blue bar with probably…jump all the way to the end right away, but I am loading this from the Internet…so we can actually see the gradual downloaded video.…So now we are going to go and build this bar.…
Let's go back to our code.…I am going to start right where we left off with the play_progress and we are…going to add another div inside the progress bar holder and this one is going to…be for our load_progress.…And we are going to put this above the play_progress because we want the green bar…to show in front of the blue bar so that even wants the entire video has…been downloaded the green bar still shows in front of it.…So I am going to add a div with an id of load_progress and add div.…
Okay, that's all we need in the HTML and let's go to our CSS.…
- 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?
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.