4.3 – D.S. 3 – Implementing all videos

Development Step THREE

Implementing all videos

Lets start where we left off last week and play the same code but change the videos with pre videos I made last year. These videos just simulate a movement and show the current genre, so you can keep track of the genre and the time your in the video.

As you can see in this clip when I change the video the text stays at the same location which means that I don’t change the time while swapping vids. So now I am planning on implementing all 18 videos which basically include 6 genres with each 3 objects.

Since the idea is to have one button to change the genre and one for each object, I first implemented four new buttons with a corresponding new function.

var src1 = "data/ab.mp4";
var src2 = "data/ad.mp4";
var src3 = "data/ag.mp4";
var src4 = "data/cb.mp4";
var src5 = "data/cd.mp4";
var src6 = "data/cg.mp4";
var src7 = "data/hb.mp4";
var src8 = "data/hd.mp4";
var src9 = "data/hg.mp4";
var src10 = "data/jb.mp4";
var src11 = "data/jd.mp4";
var src12 = "data/jg.mp4";
var src13 = "data/nb.mp4";
var src14 = "data/nd.mp4";
var src15 = "data/ng.mp4";
var src16 = "data/wb.mp4";
var src17 = "data/wd.mp4";
var src18 = "data/wg.mp4";

Here I linked all 18 videos with the correct names. But to be able to switch between everything I wanted to go with two variables. I made var currentGenre = 1; which will go from 1 to 6 for each genre and var currentItem = 1; which will go from 1 to 3.

Then I worked on making my script work for “scrolling through” the 6 genres and it looks somewhat like this:

function sGenre() {
time = vid.currentTime;
    if (currentGenre == 1) {
        if (currentItem == 1){vid.src = src1;}
        if (currentItem == 2){vid.src = src2;}
        if (currentItem == 3){vid.src = src3;}
        currentGenre = 2;
     if (currentGenre == 2) {
        if (currentItem == 1){vid.src = src4;}
        if (currentItem == 2){vid.src = src5;}
         if (currentItem == 3){vid.src = src6;}
        currentGenre = 3;
[...] //And so one with the other genres

First I declared the function time to be equals the video time so every time I call out the function it remembers the current time which I might need later.
Then it checks if the currentGenre is equals 1 which is genre action in this case. If it is 1 then it checks if the item is either 1, 2 or 3 and corresponding to that it plays either action – banana, action – dildo, or action – gun. And when its done with that it will switch the currentGenre to the next one by increasing the variable by one.

This is the part where I encountered something weird. Because now when I start up the page and play the video, on one side it is loading way longer than its supposed to do (more than 2 seconds) even tho it did that in an instance before. And also I cant switch the genres more than once because it will get stuck in the western genre.

Since I really did not know what could have caused these problems I looked back at the code, checked all the stuff I changed and made some assumptions on what could be causing the problems.

I implemented a new variable “currentGenre” that might not be counting correctly.

I implemented a ton of if statements that might be overlapping.

The if statements might also be taking up a lot of calculating power because they are all loading at the same time.

First I looked over the currentGenre problem and I noticed that when I enabled the program to show the variable while im trying to change it, it jumps from 1 directly to 6 and then gets stuck there. The thing is that, after I looked back at the counting on the variable it all feels like their can’t be much to improve.
So I looked into the if statements and checked *if* they are causing the problem. Since the only way I can think of to solve the overlapping and extensive loading would be an else statement since it is only getting called *if* the if statement is not true. But you can’t have 5 else statements following one if statement.

Which is why I googled “how to use several else in javascript” and clicked on the first suggested link. Here they actually describe something called an else if statement “Multiple if...else statements can be nested to create an else if clause.” and show this example

if (condition1)
else if (condition2)
else if (condition3)

which looks pretty similar to my code structure. So I changed all my if’s that were following at least one if, to else if’s, and BOOM, it worked magic!

Now the currentGenre variable is smoothly going from 1 to 6 and than back to 1 and so on. Also all the videos are loading quickly and getting displayed perfectly.

This is how my currently working code looks like:

function sGenre() {
time = vid.currentTime;
if (currentGenre == 1) {
if (currentItem == 1){vid.src = src1;}
else if (currentItem == 2){vid.src = src2;}
else if (currentItem == 3){vid.src = src3;}
currentGenre = 2;
else if (currentGenre == 2) {
if (currentItem == 1){vid.src = src4;}
else if (currentItem == 2){vid.src = src5;}
else if (currentItem == 3){vid.src = src6;}
currentGenre = 3;


My goal for this Dev Step was to implement all videos. I actually did a little more since just implementing the video sources was literally one line of code per source. So I combined these videos with my existing button and encountered the problem of loading to much information at the same time which I then solved by implementing else if statements.
But I also have to admit that I thought I could implement the code for the items this week already (as I said in the ToDo’s for this week) but I guess that just happens and I will get that done by the next week.
Now I am looking forward to the next step which will be implementing the genres.