Project Week or “Hell”
Project Week. Two words that without any context could be interpreted in different ways, but to me they mean…“Hell”. Ok ok, I am being a little dramatic, but it does come close to hell when you are in a coding camp and you have very little experience with coding. The good news is that this hell, you can get out of, and as if that wasn’t enough, you actually come out knowing more than you did before you were dragged into it. So here is what I brought back with me.
After a few unsatisfactory projects, many hours of videos, and not enough sleep, I settled with a project that I thought would be challenging and at the same time practical. My project is a video player. Before I had built my own, I was convinced that there was not much to them, but I now have a different appreciation for these code loaded tools. The “video tag” which is the html tag that makes it possible for us to create such tools is especially interesting.
The video tag, or node in JavaScript terms, is really the star when it comes to video players. This is the element that contains the link to the videos we want to display in our applications thanks to its source (src) property, much like the <img> tag.
This simple tag is full of properties and methods that were fundamentally important to the creation of my video player. Here is a list of some properties jut to give you an idea of how versatile this tag is:
As you can see, the list is quite long. As much as I would love to tell you that I used all those properties, I can not. Instead, I can give you a glimpse of the things you can achieve with the highlighted ones.
Paused property allowed me to create functionality based on the result of an if statement.
This function uses the result of the paused property to decide if it should apply the play() method (sets the video in motion), replace the icon from a pause icon to a play icon, and set the title property to ‘Pause’, or do the opposite. Setting the title property to pause allows it so when you hover over the button, you see a little box with the word Pause/Play as shown below.
Duration and Current Time: These two properties were essential in creating the functionality that allows users to position themselves at whichever part of the video they want. Not only do they dynamically update the time of the video but also update the width of the progress bar which gives the visual effect of moving back and forth through the video.
If we take a closer look at the two functions displayed in the image above, we will notice both duration and currentTime are being used. These properties, like their names explicitly says, returns the duration of the video and the current time of the video. To simplify, I use them to calculate a percentage to dynamically update the width of a the div element (the red bar) that shows the users how far in through the video they are. They also help in updating the time being displayed while the video is running. The duration property was also used to interpolate the properly formatted time inside the element displaying the length/duration of the video.
Well, you get the point. The video tag’s properties and methods allow you to create these amazing tools that we interact with frequently, if not every day.
Next time you update the progress of a video by clicking on the progress bar, just think that you are modifying the width of a div element to make it bigger or smaller. If you are not aspiring to become a software developer, I guess it isn’t worth your trouble. After all, it is our job to provide you(user) with abstractions so that you don’t have to be burdened with all that complexity.
Thanks for reading through my “Hell” anecdote, which really wasn’t too bad once you realize you were just enjoying yourself by means of mental torture.