I'm super, super amped [excited]. (music playing in background)
I'm super, super amped [excited].
This is going to be a fun example and just yet another way that you can apply the skills you learn in
this course, which is focused on forms, outside of forms, right?
This is just another example.
So we're going to be using the progress element with our video, as I explained in the introduction,
and we're going to display the completion status to the user.
How do we do it?
Well, the very first step is let's create an HTML document. Within here, create a body. In the body,
want a video element. And I have my minions video in the same directory here.
So it's very, very simple.
I want to give it an ID of anything we want.
Let's just give it an ID of "vid".
The problem with this though is we're going to need the controls attribute because if we look at this
on the browser.
And I'll refresh.
We've got our video, but we can't play it.
There's no controls.
So let's go to our code and just add on the controls attribute.
Let's go back to our browser and there we go.
Let me just mute the song
otherwise it's going to get very annoying and let's play it.
But right now there's no visual cue to the user on the web page itself as to how far along we are in
this video.
Yes, you can hover over the video and you can kind of see this bar here, but it doesn't give you a
percentage itself.
So how do we do this?
Well, firstly, I just want to start off the bat by saying I don't want to worry about CSS and styling.
I just want to show you how to do it.
So it's not going to look pretty, but it's going to be super, super interesting and useful for you.
So the first thing I want to do, we're going to want a progress bar, right?
So let me create this progress bar.
Let's give it an ID of progressBar.
Remember the two very important attributes when it comes to progress bars.
That's right.
It's max.
And we are wanting a percentage here, right?
It's going to start from zero and work all all its way up to 100% complete.
And the other important attribute, because we don't want it in an indeterminate state, we want it
in a determinate state.
And in order for that, we need the value attribute. And the value is going to start off at zero.
So let's go to the browser.
What does this look like?
So there we go.
We've got our progress element.
You know what?
Let's actually just display it as block.
We'll have a style section here.
Progress.
Display.
Block.
And there we go.
At least it's displayed below the video now.
But of course, it's not linked to the video at all.
We're not updating the value dynamically.
Nothing's happening.
I don't only want the progress bar to be kind of growing visually, I also want a percentage number
shown to the user.
How do we do that?
That's right.
We use the output element. And this output element we can leave empty for now because we're going to
dynamically add values to it.
All right.
So this leaves me with the question, how do we now dynamically update these numbers?
That's right.
Whenever you hear the word dynamic, ding, ding, ding ðŸ”” ...
JavaScript.
So we have to use some JavaScript here.
And on the video element, we get access to an event listener called timeupdate.
And this updates literally all the time in the video.
So we want to listen to that event all the time and constantly update the output element and the progress
bars value.
So let's code up some JavaScript together and let's get this done.
You know the drill.
We have to start off by including our JavaScript within script tags.
I want to now fetch our video element itself because this is where we're going to attach the event
listener, right?
We can do that by accessing the document object, getElementById(), because we gave it an ID of vid.
Can you see it?
ID of vid.
So there we go.
We've got our video element.
I want to now get our progress bar itself.
Let's put it in a variable called pBar.
And very similar process here.
Let's getElementById(), and we gave it an ID of progressBar.
So there we are.
We've got our progress bar, we've got our video.
Finally, I want to grab our output.
Let's define it in a variable called output.
Again, document.
Now we can actually getElementsByTagName().
And we haven't even given it an ID.
The tag name we want to get is the "output".
But bear in mind this returns an HTMLCollection.
I don't want a collection.
I want the actual output itself.
So we access the first item in the collection, which we know is this output because it's the only item
in the collection.
So there we go.
We've literally fetched all the elements we need to in order to make this work.
Now, we want to listen
for what?
That's right.
The timeupdate method [event].
So let's access our video element.
We've put it in a variable called video, and let's create an event listener here.
And the event we want to listen for is the timeupdate event.
And then when that's fired, let's execute a callback.
And I'm just using the arrow syntax here.
And what do we want to happen in this callback?
Well, it's very, very simple.
The first step is we want to get the percent,
percent completion I mean.
And in order to do that, all we have to do is access our video object. On here,
the browser gives us access to many different properties and methods.
One of these on a video element is the currentTime. And all we want to do to get a percent, is we want
to divide the currentTime divided by the entire duration.
And we have a property on the video object called duration.
So this is not what I typed or I coded.
This is given to us by the browser.
And in order to convert this into a percent, and not decimals like 0.008, in order to get 8%, we just
want to multiply it by 100.
That's all I'm wanting to do.
And then what are the two things we want to do?
The first thing we want to do is update the value attributes of this progress bar, right?
Because that value attribute has to grow all the way up to 100%.
So we have to replace it with the value of percent.
And it is this easy.
Let's access our progress bar.
Let's affect its value property, and assign it the value of the percent.
And then the final thing we have to do is I want to visually display the actual percent figure to the
user in that output element.
All we need to do is grab our output element, change its innerHTML and assign that the value of what?
That's right.
Again, percent.
Why don't we even put a percentage symbol after that?
Let's save this.
Go to the browser.
And should I be daring enough to push play?
Let's just turn this on mute.
Should I push play?
All right, let's do it.
Let's do it.
Oh, look at that
my dear students ðŸ¤©. I know we haven't rounded this to two decimals, etc etc.
We could be very funky on design, but I wanted to show you how cool and easy it is.
We're using the progress element.
We are updating that value property dynamically.
Oh man,
maybe we should listen to some of the music.
La la la la la la la la la la la la la la la la la la la la la la.
All right, all right, that's enough.
That's enough.
So there we go.
Hope you're having a lot of fun.
Hope you're enjoying this course.
And I can't wait to see you in the next lecture.