WEBVTT

0
00:00.830 --> 00:02.010
I'm super, super amped [excited].
(music playing in background)

1
00:02.030 --> 00:03.620
I'm super, super amped [excited].

2
00:06.380 --> 00:11.090
This is going to be a fun example and just yet another way that you can apply the skills you learn in

3
00:11.090 --> 00:15.500
this course, which is focused on forms, outside of forms, right?

4
00:15.500 --> 00:17.150
This is just another example.

5
00:17.150 --> 00:21.650
So we're going to be using the progress element with our video, as I explained in the introduction,

6
00:21.650 --> 00:25.820
and we're going to display the completion status to the user.

7
00:26.000 --> 00:27.530
How do we do it?

8
00:27.650 --> 00:35.870
Well, the very first step is let's create an HTML document. Within here, create a body. In the body,

9
00:35.870 --> 00:42.020
want a video element. And I have my minions video in the same directory here.

10
00:42.020 --> 00:43.580
So it's very, very simple.

11
00:43.760 --> 00:46.340
I want to give it an ID of anything we want.

12
00:46.370 --> 00:47.900
Let's just give it an ID of "vid".

13
00:47.990 --> 00:52.790
The problem with this though is we're going to need the controls attribute because if we look at this

14
00:52.820 --> 00:53.630
on the browser.

15
00:54.800 --> 00:55.940
And I'll refresh.

16
00:56.210 --> 00:59.050
We've got our video, but we can't play it.

17
00:59.060 --> 01:00.380
There's no controls.

18
01:00.380 --> 01:04.100
So let's go to our code and just add on the controls attribute.

19
01:04.100 --> 01:06.530
Let's go back to our browser and there we go.

20
01:06.530 --> 01:09.650
Let me just mute the song

21
01:09.680 --> 01:11.780
otherwise it's going to get very annoying and let's play it.

22
01:11.780 --> 01:17.510
But right now there's no visual cue to the user on the web page itself as to how far along we are in

23
01:17.510 --> 01:18.230
this video.

24
01:18.260 --> 01:22.460
Yes, you can hover over the video and you can kind of see this bar here, but it doesn't give you a

25
01:22.460 --> 01:23.660
percentage itself.

26
01:23.660 --> 01:24.560
So how do we do this?

27
01:24.560 --> 01:28.730
Well, firstly, I just want to start off the bat by saying I don't want to worry about CSS and styling.

28
01:28.730 --> 01:30.170
I just want to show you how to do it.

29
01:30.170 --> 01:34.430
So it's not going to look pretty, but it's going to be super, super interesting and useful for you.

30
01:34.520 --> 01:39.550
So the first thing I want to do, we're going to want a progress bar, right?

31
01:39.560 --> 01:42.200
So let me create this progress bar.

32
01:42.320 --> 01:45.350
Let's give it an ID of progressBar.

33
01:45.650 --> 01:49.190
Remember the two very important attributes when it comes to progress bars.

34
01:50.100 --> 01:50.580
That's right.

35
01:50.580 --> 01:51.090
It's max.

36
01:51.090 --> 01:53.640
And we are wanting a percentage here, right?

37
01:53.790 --> 01:58.170
It's going to start from zero and work all all its way up to 100% complete.

38
01:58.170 --> 02:02.880
And the other important attribute, because we don't want it in an indeterminate state, we want it

39
02:02.880 --> 02:05.190
in a determinate state.

40
02:05.190 --> 02:11.610
And in order for that, we need the value attribute. And the value is going to start off at zero.

41
02:11.670 --> 02:12.780
So let's go to the browser.

42
02:12.810 --> 02:13.800
What does this look like?

43
02:13.800 --> 02:14.580
So there we go.

44
02:14.580 --> 02:15.840
We've got our progress element.

45
02:15.840 --> 02:16.230
You know what?

46
02:16.230 --> 02:18.090
Let's actually just display it as block.

47
02:19.140 --> 02:20.970
We'll have a style section here.

48
02:21.150 --> 02:22.410
Progress.

49
02:23.290 --> 02:24.220
Display.

50
02:25.180 --> 02:25.470
Block.

51
02:26.110 --> 02:26.780
And there we go.

52
02:26.800 --> 02:28.750
At least it's displayed below the video now.

53
02:28.930 --> 02:31.660
But of course, it's not linked to the video at all.

54
02:31.660 --> 02:33.640
We're not updating the value dynamically.

55
02:33.670 --> 02:34.720
Nothing's happening.

56
02:35.950 --> 02:42.880
I don't only want the progress bar to be kind of growing visually, I also want a percentage number

57
02:42.880 --> 02:43.930
shown to the user.

58
02:44.410 --> 02:45.460
How do we do that?

59
02:45.490 --> 02:46.300
That's right.

60
02:46.300 --> 02:51.940
We use the output element. And this output element we can leave empty for now because we're going to

61
02:51.940 --> 02:54.820
dynamically add values to it.

62
02:54.850 --> 02:55.420
All right.

63
02:55.420 --> 03:01.180
So this leaves me with the question, how do we now dynamically update these numbers?

64
03:01.600 --> 03:02.380
That's right.

65
03:02.380 --> 03:04.850
Whenever you hear the word dynamic, ding, ding, ding 🔔 ...

66
03:04.870 --> 03:05.900
JavaScript.

67
03:05.920 --> 03:07.600
So we have to use some JavaScript here.

68
03:07.600 --> 03:15.340
And on the video element, we get access to an event listener called timeupdate. 

69
03:15.460 --> 03:18.880
And this updates literally all the time in the video.

70
03:18.880 --> 03:25.330
So we want to listen to that event all the time and constantly update the output element and the progress

71
03:25.330 --> 03:26.280
bars value.

72
03:26.290 --> 03:29.590
So let's code up some JavaScript together and let's get this done.

73
03:29.860 --> 03:31.210
You know the drill.

74
03:31.210 --> 03:35.200
We have to start off by including our JavaScript within script tags.

75
03:35.230 --> 03:40.130
I want to now fetch our video element itself because this is where we're going to attach the event

76
03:40.130 --> 03:41.000
listener, right?

77
03:41.150 --> 03:48.430
We can do that by accessing the document object, getElementById(), because we gave it an ID of vid.

78
03:49.320 --> 03:50.430
Can you see it?

79
03:50.730 --> 03:52.280
ID of vid.

80
03:53.390 --> 03:54.020
So there we go.

81
03:54.020 --> 03:55.870
We've got our video element.

82
03:55.880 --> 03:58.070
I want to now get our progress bar itself.

83
03:58.070 --> 04:00.290
Let's put it in a variable called pBar.

84
04:00.500 --> 04:02.540
And very similar process here.

85
04:02.540 --> 04:07.490
Let's getElementById(), and we gave it an ID of progressBar.

86
04:07.520 --> 04:08.270
So there we are.

87
04:08.300 --> 04:10.160
We've got our progress bar, we've got our video.

88
04:10.160 --> 04:13.310
Finally, I want to grab our output.

89
04:13.340 --> 04:16.220
Let's define it in a variable called output.

90
04:17.030 --> 04:18.350
Again, document.

91
04:18.380 --> 04:20.780
Now we can actually getElementsByTagName(). 

92
04:21.890 --> 04:23.470
And we haven't even given it an ID.

93
04:23.560 --> 04:27.090
The tag name we want to get is the "output".

94
04:27.130 --> 04:30.310
But bear in mind this returns an HTMLCollection.

95
04:30.310 --> 04:31.690
I don't want a collection.

96
04:31.690 --> 04:33.700
I want the actual output itself.

97
04:33.700 --> 04:39.340
So we access the first item in the collection, which we know is this output because it's the only item

98
04:39.340 --> 04:39.970
in the collection.

99
04:39.970 --> 04:40.780
So there we go.

100
04:40.780 --> 04:44.320
We've literally fetched all the elements we need to in order to make this work.

101
04:44.320 --> 04:46.240
Now, we want to listen

102
04:46.240 --> 04:46.990
for what?

103
04:47.020 --> 04:47.890
That's right.

104
04:47.890 --> 04:49.570
The timeupdate method [event].

105
04:49.690 --> 04:52.330
So let's access our video element.

106
04:52.360 --> 04:56.900
We've put it in a variable called video, and let's create an event listener here.

107
04:56.920 --> 05:00.710
And the event we want to listen for is the timeupdate event.

108
05:00.730 --> 05:04.030
And then when that's fired, let's execute a callback.

109
05:04.970 --> 05:06.820
And I'm just using the arrow syntax here.

110
05:06.830 --> 05:08.560
And what do we want to happen in this callback?

111
05:08.570 --> 05:10.220
Well, it's very, very simple.

112
05:10.250 --> 05:13.220
The first step is we want to get the percent,

113
05:14.190 --> 05:15.270
percent completion I mean. 

114
05:15.630 --> 05:20.340
And in order to do that, all we have to do is access our video object. On here, 

115
05:20.370 --> 05:23.910
the browser gives us access to many different properties and methods.

116
05:24.000 --> 05:30.780
One of these on a video element is the currentTime. And all we want to do to get a percent, is we want

117
05:30.780 --> 05:35.790
to divide the currentTime divided by the entire duration.

118
05:35.790 --> 05:39.150
And we have a property on the video object called duration.

119
05:39.150 --> 05:41.530
So this is not what I typed or I coded.

120
05:41.550 --> 05:43.680
This is given to us by the browser.

121
05:43.680 --> 05:51.180
And in order to convert this into a percent, and not decimals like 0.008, in order to get 8%, we just

122
05:51.180 --> 05:52.800
want to multiply it by 100.

123
05:52.830 --> 05:54.450
That's all I'm wanting to do.

124
05:54.450 --> 05:56.490
And then what are the two things we want to do?

125
05:56.520 --> 06:00.870
The first thing we want to do is update the value attributes of this progress bar, right?

126
06:00.870 --> 06:05.160
Because that value attribute has to grow all the way up to 100%.

127
06:05.160 --> 06:08.340
So we have to replace it with the value of percent.

128
06:08.340 --> 06:10.170
And it is this easy.

129
06:10.170 --> 06:12.300
Let's access our progress bar.

130
06:12.600 --> 06:19.330
Let's affect its value property, and assign it the value of the percent.

131
06:19.630 --> 06:27.340
And then the final thing we have to do is I want to visually display the actual percent figure to the

132
06:27.340 --> 06:28.690
user in that output element.

133
06:28.690 --> 06:36.200
All we need to do is grab our output element, change its innerHTML and assign that the value of what?

134
06:36.220 --> 06:37.060
That's right.

135
06:37.060 --> 06:39.190
Again, percent.

136
06:39.640 --> 06:42.480
Why don't we even put a percentage symbol after that?

137
06:42.490 --> 06:43.690
Let's save this.

138
06:43.960 --> 06:45.190
Go to the browser.

139
06:45.970 --> 06:48.640
And should I be daring enough to push play?

140
06:48.910 --> 06:50.470
Let's just turn this on mute.

141
06:50.980 --> 06:52.060
Should I push play?

142
06:53.130 --> 06:54.120
All right, let's do it.

143
06:54.120 --> 06:54.990
Let's do it.

144
06:56.200 --> 06:57.370
Oh, look at that

145
06:57.370 --> 07:01.450
my dear students 🤩. I know we haven't rounded this to two decimals, etc etc.

146
07:01.450 --> 07:07.270
We could be very funky on design, but I wanted to show you how cool and easy it is.

147
07:07.300 --> 07:08.860
We're using the progress element.

148
07:08.860 --> 07:11.560
We are updating that value property dynamically.

149
07:12.430 --> 07:12.900
Oh man,

150
07:12.910 --> 07:14.710
maybe we should listen to some of the music.

151
07:14.740 --> 07:22.160
La la la la la la la la la la la la la la la la la la la la la la.

152
07:22.960 --> 07:25.630
All right, all right, that's enough.

153
07:25.630 --> 07:26.320
That's enough.

154
07:26.410 --> 07:27.300
So there we go.

155
07:27.310 --> 07:28.360
Hope you're having a lot of fun.

156
07:28.390 --> 07:29.890
Hope you're enjoying this course.

157
07:29.890 --> 07:33.670
And I can't wait to see you in the next lecture.