How to Use HTML5 to Embed Media in a Web Page


show more Creating a Load Progress bar provides you with in-depth training on Video. Taught by Steve Heffernan as part of the HTML5: Video and Audio in Depth show less
please wait ...

Creating a Load Progress bar

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...

Creating a Load Progress bar
Video duration: 9m 29s 2h 7m Intermediate

Viewers:

Creating a Load Progress bar provides you with in-depth training on Video. Taught by Steve Heffernan as part of the HTML5: Video and Audio in Depth

Subjects:
Video Web
Software:
HTML
Author:
please wait ...