Understanding HTML5 media states with readyState
As a media files(such as a video or audio file) changes states it updates the readyState property. In this video we will explore the various states and through it understand how to create a buffer.
Video Transcript
00:00Welcome back. And now we're going to talk about the ready state property. The ready state property is really important if you want to create a buffer of any sort, basically knowing when the user's when the video is playing when it's not playing.
00:13I want to walk through the different properties really quickly. Before we start doing this example, if we look into our document, we'll see that first of all in our HTML, I stripped down and emptied our controller.
00:25And in our JavaScript, I removed all everything really, because we're going to be focusing exclusively on this property.
00:33Now, the next thing that I want to do is I want to go to our sound, I just want to play it to make sure that we have a sound going on and playing as we're going.
00:41Now, the first thing that we'll see is obviously the music will play. But even before we set the place and if we go to our console console log, and we try to log out our sound dot ready state, the ready state will give us information on numeric information between zero and four giving us information on what is the current state of the load process of the file.
01:06So if we're looking for zero to give originally the value would have been zero.
01:14Learning better means have nothing. I want to output and just like write down the static variables or constant variables actually would be the more preferred word that exists in our sound objects.
01:31So I'm just going to write them down really quickly. So we have them. And I'm just going to paste them right in so we could walk through them. So our sound object and again, our sound object or any audio object has these properties.
01:44Now, the properties are basically have nothing, have metadata, while have nothing basically means that a load didn't even start, nothing is going on currently have metadata.
01:57If you remember when we were talking earlier, way earlier, in one of our earlier videos, when we're talking about the audio in general, in our earlier tag, we said that we could set the preload to metadata.
02:10By setting the preload to metadata, we're basically asking the browser to load our object and set it to be in the metadata format.
02:19Now, in that scenario, we'll get to the state have metadata, which is one, the next state after that is that when it has enough information to show something, which would be two, or that we'll be able to hear something.
02:32But it's not enough of a buffer yet. Well, have future data means that it has some of the future data already, it's already in the process of loading up enough information to play, while having enough database means that we're good and we could start playing and there are no issues.
02:48With that said, I want us to see it in action. So literally, if we go in, we check our ready state without even setting a play. So even if I don't set a play, and I just save this information, our information should be zero by default originally.
03:03So if I go into my browser, and I click on refresh, we'll see that we're at zero. And that makes a lot of sense. Now, if we go back into our application, but this time around, we actually add the property preload and set its value to be metadata.
03:17So I'm just going to go right into our object. And after we set the source, or even before, it doesn't really matter, I'm going to go to my sound and add the preload property and set its information to be metadata.
03:29Once I've done that, I could actually first of all, if I play that if I go back to the application, and click on refresh, we'll still see zero. The reason is is because it didn't have enough time to preload the data.
03:42So how could we actually fetch that information and do get that information and actually get that information? Well, the way to do it is quite simple as well. The way we'll do that is we'll add a new event listener.
03:54And that event listener will be loaded metadata data data all lowercase, and we'll just call the on loaded
04:06metadata. Now, you might get confused and think that on loaded made it metadata actually means that the track name has been loaded. But actually, all you're really getting is the length of the sound and the basic information of the music. So basically, whenever the metadata whenever our ready state changes to one changes to have metadata, then we'll be able to access the length of our sound. Well, if I try to go to my sound and ask for its duration,
04:34before I even loaded that file. So if I go my console log, it didn't have enough time to load in the file. If I try to get to that sound duration, and I go back and I click on that refresh, we'll see that we'll get non, we're getting information that isn't relevant. Now, obviously, we need to add our function. So we're going to continue in our example, I backtrack for a second there. So back into our application, I'm going to create that function and add its event. And by the way, once we get into the stage, we're basically going to create a function.
05:03So at this stage, we're basically upgrading from our current state. So if our ready state was originally at zero, at this stage, and we just comment this out, if our original state was zero, and we couldn't see anything in our duration. Now, when we go inside of our load metadata, now we know the information. And beyond that, we also know that we also our ready state will be updated or upgraded to be one, which is basically equivalent to have metadata.
05:33So again, I'll go into my browser and click on refresh. Now we'll see that we do have a length and I have a typing error because I'm excited. So let's fix that console console, save that go back into the browser, click on refresh. And here we go. So now our ready state updated from zero to one.
05:50Now we could have at this scenario, we probably don't need even to ask if we're in that metadata state because we know we are. But we could have if we wanted to just to be safe, say ask if our sound is have metadata, or if in any state or any scenario, we had a global function that manage all these different changes, such as a buffer that would change its graphic based on the state that it's in, you might have put that in a global function and actually call your on load metadata and all the rest of it.
06:20So the information in one global function. Alright, so let's just take a peek at that for a second. And here we go. And the value that we're coming back is true. So let's move on to the next one. And the next item is when we have enough data, as we said, the next date is when we have current data, which basically means the metadata is for sure already loaded. And also, we have a little bit of information from the music already, we already or video, maybe we have the first frame. So if it was a video.
06:48So the next one that we want to capture, and I'm just gonna create another event. And our next event is going to be an event that's called loaded data. So it's not loaded metadata. So we could delete the word meta. And loaded data means that some data has been loaded. If it's the first frame or the first beat of the music, we could call the law on loaded data, and unloaded data function will work very, very similarly. So in this scenario, and I'm just gonna log out and I'm going to comment out.
07:17The log of before so we could see only the log of the on load data. And this time around, it will be equivalent to on to have current data. So I'm just gonna put the have current data in here instead. And we should be getting the exact same trace out only this time around, we're actually in a new state, which is state number two, which is have current data.
07:39Once we click on the refresh, we will be shocked to discover that nothing is coming back. And the reason is it could be also different browser configurations. But really, in this case, in scenario, our file is local. So it doesn't even run through that current data because it already has all the future data and enough data to test this out. So how about we run through the rest because the rest are quite similar and quite easy. So I'm going to go back into our editor.
08:02And instead of creating a separate element, a separate function for each, we're just going to call this on ready state change, right? And on ready state change, we're going to just output the ready state configuration as it's changing. We don't need to trace out the duration again. But let's walk through them really quickly and see how this information can change. So first of all, this would be triggered, as we said, when we reach the value of one in our ready state or have metadata.
08:31Well, this one would be triggered if we had the value of two. So let me just instead of that, just call both like have both of them call the same method. And we're going to add a few other callbacks. So first of all, the next callback that we're going to be adding is can play.
08:47When can play is called, that means we're at state three, when can play through is called, when can play through is called, we're in state four, which basically means we're all up and ready and in perfect condition. Now, another state that could be called is whenever we are playing. So in a state when we are playing, just as just as a side note, when we are playing, we would be in state four as well. So when we are playing, we're in state four as well.
09:20Last but not least is when we're in a scenario where it needs to buffer and load in more information when it's actually waiting when the play state isn't in its state anymore. So the next item, and again, we're in that scenario again, and this time around, we're in waiting. So these are all the different configurations that change the basically the ready state and our video configuration changes based on it. And this time around, any time around, we're going to be waiting for it.
09:48And this time around, any time our value would go down under three, which would always be above, above, above one, obviously, because the metadata was loaded already. So really, this would happen whenever we were at four and went down to two or three.
10:05And as we climb back up, we would get our triggering again. So first of all, can play through would be for perfect. And we could go back and down in the very variations of these.
10:18So what we're going to do is actually just maybe trace out our errors, but our events. But before we do that, and you know, and I'm going to trace out the event itself, and maybe event type even, so we could actually get the actual event that was triggered and play it out and see how many times it's being called when we play a video locally, not on a server.
10:37So I'm going to save that go back into a browser. And now when I click on refresh, we'll see that loaded metadata one is being called, nothing else is being called because we're not playing the video.
10:46So the next state that we want to do is maybe in our application itself, just so we could actually see the process going through, how about we set here and if our ready state equals to that metadata, which is basically that our metadata has been loaded, oopsie, I'm just going to copy that, put that in an if statement.
11:07And in that case, and only in that case, I'm going to start playing because that really only happens once, although I could set also to the auto play, but I wanted to show you the different configurations and how the numbers change as the states change.
11:20So let's play this out one more time. And I'm going to go back into my browser and click on refresh. And we'll see our music is now playing. And we could actually see the different steps as it's going through. Learning better is better.
11:33So we could see first of all, our loaded metadata loads, and then we're waiting. Once we're waiting, we're loaded enough data, and then we could play and then we start playing and we could even play through. So we see all the different steps involved.
11:47I want to add just one more metadata event, one more event, which is called ended. Now when ended happens, let's see what would happen and what state our metadata would be at.
11:56So we're going to click on to our ended. And I'm going to save that. And I'm just going to go right back in. So there's one more event that we have. And if I go back into Safari and click on refresh and wait for the music to be.
12:11Let's see what happens. Learning better is better. So our ended triggers and we could see when our ended triggers were still at four because everything was loaded. We didn't have any issues in our process. We're still in stage four.
12:27If we wanted to, we could have created a loop basically starting all over, we could have asked to seek all the way to the start and maybe start playing it all over again whenever it stops and create dynamically another loop.
12:40But we won't do that because we could use that for you as an exercise of creating your own dynamic loop without using a loop attribute. Although this wouldn't be relevant for a real world application.
12:49This could be very relevant to when maybe you want to move on to the next video without having the user reload the page. So maybe if they're watching one of your courses, like maybe they're watching one of our courses on zero to geek and we want them to be able to pass through to the next video.
13:04We might be able to just add that interactiveness by updating the video player without taking the user out of the video player.
13:11Alright, so that covers the ready state. We covered all the different segments of the ready state and we went through it relatively quickly. So I do encourage you to go and download our source files again for our audio format which you'll find at zero2geek.com if you're one of our members.
13:27And I hope you enjoyed it and we're going to continue on into the next topic in the next video.