2.5 – D.S. 1 – Video in JS

Development Step One

Video in javascript

So after I chose my technology and made up my plans for this quartile’s project, I started reading into HTML and Javascript.

First off I had to google the functionality of videos and jumping to any time in the videos. Since I already know w3schools and stack over flow those where the “go-to websites”. So w3schools showed how to play a video and how you can change sizes for example. But they did not talk about jumping in time at all, so I googled for jumping inside of videos and found an answer on stackoverflow, where they combined Javascript and HTML to reach their goal.

The explanation showed me that videos have a “currentTime” property which was, for now, everything I needed to know, because by manipulating and knowing the currentTime I should be able to jump wherever and whenever I want. I also found an in depth explanation on this w3schools entry.

So I used their “Try Out” section to play around a little using this property.

and this is what I found out:

As you can see in this line,

function setCurTime() {
vid.currentTime = vid.currentTime-3;
}

I can set the currentTime equals the currentTime minus any amount I want, which means I can either jump forward or backwards using buttons.

The next step was to create a variable called time which I can manipulate to save the currentTime and apply it to whichever movie I want.

After looking for answers on w3 and playing around with variables and time, I encountered the following problem:

var t = vid.currentTime;

function getCurTime() {
var t = vid.currentTime;
alert(t);
}

function setCurTime() {
alert(t);
}

If I create a variable in the beginning of the code and before both of the functions, then my variable is undefined, since it is not getting called out and just laying around.

So I tried putting it in the function “getCurTime” where it does get the correct value when called out by a button press, but now only this function has access to the variable. And this means that my second function “setCurTime” doesn’t know what value t has and is still undefined.

So I read looked for answers on forums but all of them were vage and didn’t get me further which made me figure it out on my own by reading through w3 and I came up with the following:

var t;

function getCurTime() {
t = vid.currentTime;
alert(t);
}

function setCurTime() {
alert(t);
}

If I declare the variable time (t) before anything else and leave it undefined to then declare it in the first function to be equals the videos current time then this value is saved and I can recall this saved time when I press the second button. (My code)

Retrospective

Looking back at my problem in retrospective I see that the mistake I made was declaring the var t = vid.currentTime; in the beginning and then inside the function, instead of setting the “t = …” I declared the variable again by saying “var t = …” which basically overwrites the var set down before which ends in getting 0 out as a value when I want to use t in any other function since I created it in a function.

As you can see in the video above, through extensive research, I managed to solve the problem and further developed my HTML and my self-analysing skills in the process.