Next is Listening in on the duration change event
Our seeker doesn't work if we try to click on it as soon as our app loads. Why is that? and how can we fix it? the short answer is using the duration change event. Let's jump in and see why and how it works.
Video Transcript
00:00All righty, so it's time for us to solve our error.
00:02And to solve the error we're talking about
00:04is that the scrubber, when we tried to scrub before anything
00:07was loaded, before we knew what the duration of the video is,
00:10it would generate an error.
00:11To solve this problem, I want to, by default,
00:14set the scrubber to be disabled, making sure
00:16that the user can't just go immediately and start scrubbing
00:18before a video is loaded in at all.
00:21To do that, I'm going to go into our code,
00:23and I'm just going to grab our seeker.
00:26And I'm going to do it in the JavaScript itself
00:28and not in the HTML.
00:29I'm just going to add the value disabled and set it to be true.
00:33On the other way around, I could have, if I wanted to,
00:35go right into the HTML, into the seeker,
00:37and add another property which would be disabled.
00:41And just by setting the word disabled on it,
00:42it would automatically set it to be disabled by default.
00:45But I won't.
00:46Instead of that, I'm doing it directly in the JavaScript
00:48through the JavaScript API.
00:51Once I've saved that and I go into my browser again
00:53and I click on refresh, we'll see that there'll be
00:55no way to actually control the scrubber any more manually.
00:59And the only way the scrubber would get updated
01:01would actually be if the JavaScript changes it
01:04without the user actually clicking on it,
01:06making the user interactions impossible.
01:09Now the next step is we really want to make it
01:12possible to engage with, again, once there is a duration
01:15because then it would work.
01:16To make that happen, what we're going to do
01:18is we're going to add another event listener for our video.
01:22And the next event listener that we're going to add
01:24is not update time like we had in the previous one,
01:27but it's called duration change.
01:31Once the duration change method is called,
01:33that means now there is some sort of a duration there.
01:35So on duration change, we could get our callback
01:40and I'm just going to put this right next to our seeker.
01:43So we'll put it just above our seeker.
01:45I'm going to have your function on duration change.
01:48It's going to be an event.
01:49And I'm just going to trace out,
01:50I'm going to do a console.log
01:52and I want to output out the actual duration
01:55and see that we really have a valid duration.
02:00And I'm going to save that, go right back into our browser,
02:04click on the refresh button.
02:06And now as soon as I click on the play
02:07when the video will start loading,
02:09we'll see that now it automatically will give me a value.
02:12Now, one thing to note is the reason why
02:15it's not giving us a value by default immediately
02:17is because we set our value for the video itself
02:21to not preload.
02:22We set the preload to be none.
02:24If we didn't put a preload none,
02:26then the video would preload
02:27even before the user engages with it.
02:30But we don't want the video to load in advance
02:32in case the user is not going to watch the video,
02:34so why load it in advance?
02:36And that's the reason the scrubber can't work
02:38until there's actually a video to scrub.
02:40All right, so now that we got that out of our way,
02:43it's time for us to actually set the scrubber,
02:46set the value to be true.
02:48So what I want to do is instead of the duration itself,
02:51basically, we have a few options here.
02:53And really what we want to do
02:55is maybe we could set the value that if our duration
02:58is larger than zero, and only if our duration
03:02is larger than zero, then we will put the value in.
03:06If not, we won't.
03:08Now, one way we could do this
03:09is instead of putting a whole if statement
03:11is basically assigning the value that comes back
03:14out of if duration is larger than zero,
03:16which will be a true or false value.
03:19By doing that, I could actually go directly
03:21in our seeker itself and then set the seeker
03:24disabled value to be basically whatever comes back.
03:27Now, the value will be true,
03:30and we don't want it to be disabled.
03:31So we want the exact opposite of true.
03:35So basically, if we have a value that is larger than zero,
03:39then put in there disabled exactly the opposite of it.
03:42And this is the way you would add a,
03:43instead of putting here an if else statement,
03:46you're automatically making sure that if the video
03:48at any point doesn't have a duration anymore,
03:50such as maybe you are dynamically changing the video,
03:53whenever the duration is not set,
03:55it will automatically disable the scrubber
03:57so the user cannot scrub it.
03:59And whenever there is a value,
04:00the user will be able to scrub again.
04:02So now if I go back into my player and I click on refresh,
04:05initially, there won't be any way to scrub,
04:08but as soon as I start playing and there is a value in there,
04:10the scrubber will start working and will continue working
04:13because we don't have a scenario again
04:15where our scrubber stops working,
04:18where the duration of our video changes.
04:20So there we go.
04:21We just completed a full video player
04:23that has a play and pause, it has a dimmer,
04:26it has a scrubber, it has a mute and an unmute button
04:28and even has a volume control
04:30and we've even added in an animation to our volume.
04:33At this stage, it's up to you to take all these,
04:36all these capabilities that you've just learned
04:38and integrate them into a real world example video player
04:42with a prettier visual interface.
04:45So I encourage you to do that
04:46and I would love to see your work
04:48and would love to feature your work.
04:49If you created, just send me an email
04:51at ben at zero2geek.com
04:53or send us post us notes in our video page,
04:56we would love to see your work.
04:58Well, congratulations and good luck and that's about it.