WEBVTT 0 00:00.200 --> 00:00.980 My 1 00:01.010 --> 00:02.090 my my ... 2 00:02.770 --> 00:11.020 this is going to be a fun example! Because in this example I'm yet giving you another skill set in your 3 00:11.020 --> 00:11.710 "dev hat" 🎓 4 00:11.740 --> 00:13.030 if you want to call it that. 5 00:13.030 --> 00:17.020 I know this course is all about forms, and we're learning about form controls. 6 00:17.020 --> 00:20.130 One of these form controls is the progress element. 7 00:20.140 --> 00:26.650 But you don't only have to use the progress bar with forms so you can take the skills you're learning 8 00:26.650 --> 00:28.940 and apply it to many different situations. 9 00:28.960 --> 00:31.270 Here I've got a video. 10 00:31.310 --> 00:31.620 Okay. 11 00:31.630 --> 00:36.550 As you can see on the browser, minions singing the banana song, but can you see below it? There's a 12 00:36.550 --> 00:37.360 progress bar. 13 00:38.280 --> 00:45.930 So what I want you to try and do, is I want us to create a video element in HTML and I want us to display 14 00:45.930 --> 00:50.910 to the user via a progress bar the completion of that video. 15 00:50.910 --> 00:52.310 So can you think how to do that? 16 00:52.320 --> 00:57.690 Remember the two important attributes on a progress element are max and value. 17 00:57.780 --> 01:03.120 So the max attribute here should be 100 because that's 100% of the video complete. 18 01:03.120 --> 01:07.320 So therefore the range will start from zero and work all its way up to 100. 19 01:07.350 --> 01:08.280 That makes sense. 20 01:08.280 --> 01:14.370 The value attribute should be the percentage completion of this video. 21 01:14.370 --> 01:20.730 So you're going to need a way to dynamically update that value of the progress bar. 22 01:20.730 --> 01:24.000 And when you hear the word dynamic, ding, ding, ding 🔔JavaScript. 23 01:24.000 --> 01:24.900 That's right. 24 01:25.170 --> 01:26.970 So that's the first thing I want you to do. 25 01:26.970 --> 01:32.250 Then you'll know, or remember from the previous lectures, that the progress bar doesn't display anything 26 01:32.280 --> 01:33.900 to a user by default. 27 01:33.900 --> 01:37.380 So I want us to display a value to the user. 28 01:37.380 --> 01:38.440 How do we do that? 29 01:38.470 --> 01:39.400 That's right. 30 01:39.430 --> 01:47.260 We use an output element. So I want the value also displayed to the user in an output element. 31 01:47.280 --> 01:53.230 Bit of a hint: in order to put a video on a web page like this, I'm going to be using the video element 32 01:53.230 --> 01:54.130 in HTML. 33 01:54.160 --> 01:58.180 I then include the controls attribute on the video so we can actually push play, pause, etc 34 01:58.180 --> 01:58.710 etc. 35 01:58.720 --> 02:00.220 So that's just setting up the HTML. 36 02:00.250 --> 02:04.450 I then include a progress bar obviously, and an output element and that's it. 37 02:04.660 --> 02:05.860 HTML is very simple. 38 02:05.890 --> 02:11.530 Then when we get to JavaScript, there's an event I want to listen to on this video and that event is 39 02:11.530 --> 02:13.240 called timeupdate. 40 02:13.270 --> 02:19.480 The timeupdate event is fired literally all the time on a video as it's playing. 41 02:19.480 --> 02:24.550 So we're listening for that event, and then we are displaying that in the output element. 42 02:24.550 --> 02:28.270 And we are also affecting the value attribute of the progress element. 43 02:28.320 --> 02:31.390 Oh, I know it can sound very difficult, but let me show you what I mean. 44 02:31.390 --> 02:33.780 When I push play, look what happens. 45 02:33.790 --> 02:35.050 Let me actually mute this. 46 02:35.650 --> 02:36.580 Let me push play. 47 02:36.610 --> 02:38.800 (sneeze). Whew! Excuse me. 48 02:39.010 --> 02:39.820 There we go. 49 02:41.230 --> 02:42.910 (sneeze again). Excuse me again. 50 02:43.060 --> 02:43.930 So there we go. 51 02:43.930 --> 02:47.860 We've got our output, and we've got the progress bar displaying in real time. 52 02:47.860 --> 02:54.190 Obviously, if we get to the end, the progress bar is pretty much all done and we reach 100% of the 53 02:54.190 --> 02:56.110 completion task and the video stops. 54 02:56.110 --> 03:00.790 So that's what I want you to try and create, give it a go, have fun and I'll see you in the solution 55 03:00.790 --> 03:01.270 video.