10.4 – D.S. 10 – Finalising the Product

Development Step Ten

Finalising the product

I have made it! This is not only the last week, but also the last development step. Looking back at all my previous dev steps and the progress I made, I have to admit that I am indeed proud of all the developments I have done. I also have my interactive movie online and to be watched by everyone. I still have a few more things to add before it is perfect. And that is why this last development step is called finalising my product.

My plans are to add some kind of help/about window that pops up the first time you visit the window and which is also viewable when you click some kind of question mark button. I also noticed that some browsers have the video quite big, which is why i am probably putting an arrow pointing downwards so people now that there is something to click if they don’t immediately see the buttons.

To jump right in I googled “how to have a pop up window in html css when visiting website”. First I found this link but when further investigating it, it felt too specific and complicated since it wouldn’t have brought me to my goal, so I looked a little more and found this Stack Overflow question where someone how can i create pop up window that loads when you enter the site?. The top answer was well up voted so I looked at it and brought the code over to my brackets. The javascript part was really small and basically only closes the window if the x is pressed.

lightBoxClose = function() {
  document.querySelector(".lightbox").classList.add("closed");
}

But I had to change the first line to:

function lightBoxClose () {}

to make it work. Then I added the html, and here I encountered the problem that the light box would display behind the video instead of on top.

<div class="lightbox">
  <div class="iframeContainer">
    <div class="toolbarLB">
      <span class="closeLB" onclick="lightBoxClose()">x</span>
    </div>
    <iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fpermalink.php%3Fstory_fbid%3D1346255332069110%26id%3D1345708592123784&width=500" width="500" height="287" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
    allowTransparency="true"></iframe>
  </div>
</div>

It actually took me a while until I figured out that I had to put it behind everything in the code, but also inside of a certain division. After I fixed that I put in the css and checked out the result.

body {
  margin: 0;
  background-color: #EBB;
}
.lightbox {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .5)
}
.toolbarLB {
  text-align: right;
  padding: 3px;
}
.closeLB {
  color: red;
  cursor: pointer;
}
.lightbox .iframeContainer {
  vertical-align: middle;
  background: #CCC;
  padding: 2px;
}
.lightbox.closed {
  display: none;
}

The pop up blocks all the clickable objects so you need to click the window away in order to look at the videos. So now I need to put my “help-window” in there and stylise it a little bit. My idea was to, instead of putting plane text in there, show a little image that explains all the functions. So I made that in photoshop first.

And this is the result, now I will try to implement that into the pop up overlay. After changing the source this is what I am getting:

Now I have to play around with the margin, padding and check If I can make the X disappear without loosing its hit box. So what I did was removing the X on my help screen and making the clickable X “position: absolute;”. Because it now is absolute it doesn’t push my image away. But it now is also not bound to its corner which is why I had to add 400px padding left so it moves back to its top right corner instead of the left one. I also removed all the padding from the images so the grey outline is gone (I left it at the bottom because it gives some kind of 3D effect to it). But the image was still croppped at the bottom and I didn’t really now why. So what I just did was marking at which spot its getting cut off and moving everything in photoshop up so the cropped out part is just not visible.

You might consider this cheating but I think it was a good workaround. May the smart and lazy ones be blessed with power! :D.

So this is my result which I am very happy with:

But than a problem appeared. For some reason the X is not clickable anymore. It shows the pointy mouse curser but clicking doesn’t make anything disappear.
The weird thing is that after changing the position and removing all changes I made, the X still did not have any function.

Okay I really don’t know what to do since this is also extremely frustrating. I have been trying out everything for more than an hour now, also inspecting the element and removing parts of it but nothing works. The thing is it did work in the beginning when I put the code in for the first time, so what I am going to do now is reset everything to the start and then try to figure out what went wrong.

So after rewriting all the code snippets step by step to figure out what caused the not clicking error, I managed to get it working properly but didn’t really found out what the problem was. Since I was really interested and kind of wanted to learn out of my mistake I opened both versions, the working and the old not working one and compared every single line of code.
I noticed that the problem neither came from the html, nor the javascript. But after checking the css code I didn’t find anything either. Then I switched the css codes and it worked. So what I am guessing that I might have put in a small typo at any point which made everything stop working.

Anyways I managed to get it working and this is how it looks:

 

Since this is finally done, I only need my arrow pointing down to show that there is more below the video. Once I had the arrow image I just added img inside my html and put some css to it. I also made the opacity less bright and moved it to the right side of the video. But to completely honest I wasn’t really happy with it. I think now that I have the help screen, people now that there are buttons and they will look for them. So I removed the arrow again.

Since this development step doesn’t have the length of total 8 hours yet, but I am quite satisfied with my website, I got one more idea. I want to implement the ability to press keys on the keyboard as an option. So B stands for banana, R for the Revolver, D for Dildo, G for Gun and Spacebar will play and pause the video.
First of all I obviously had to google key inputs in javascript and got to this link. Here they tell you whichever keycode the key that you are pressing has. Through this I got the following informations:

B = 66
D = 68
R = 82
G = 71
<Spacebar> = 32

Then I read through this page to figure out how to implement the Key Codes. It did deliver a lot of information but it felt more like too much to take in, so I googled a little more and found this on stack overflow.

document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.ctrlKey && evt.keyCode == 90) {
        alert("Ctrl-Z");
    }
};

I implemented this into my code and tried it and it worked! When I pressed ctrl + z it showed me the alert. So all I had to do now was putting that into my code and calling out the right functions on key presses. And this is how it looks:

document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 32) {
playPause();
}
if (evt.keyCode == 66) {
Banana();
}
if (evt.keyCode == 68) {
Dildo();
}
if (evt.keyCode == 82) {
Gun();
}
if (evt.keyCode == 71) {
sGenre();
}
};

Now the last thing is to add a small text on the site that shows that you can press you keys as well as the buttons. Or I might put it into the help pop up.

After some time elaborating, I figured that I don’t really want anything else on my website other than the buttons so I decided to put the key shortcuts into the help menu that pops up once you enter the website. But there was one more problem that came into my way and just didn’t want me to finish everything. I changed the code and added my new help pop up image and on the brackets preview it was working fine, but once I uploaded everything to Cyberduck and previewed it in my browser, the margins and changes i made in my code applied, but the image was still the old one even tho I checked that it wasn’t.

I even uploaded the image, and then downloaded it and saw that it was the new one. And then, when I checked it on a friends laptop it worked. So I am just guessing that it might take a while for me, or maybe that it has something to do with my cookies.
So after clearing my cache everything worked perfectly.

Now the last thing I want to add is a little icon in the top browser. And give the tab a name. I googled on how to do it and found this helpful threat on stack overflow. I implemented it on my website using the title and the converted my png image into an .ico image online and connected that as an href.

And this is my final product:

Retrospective:

I am happy.
Very happy and satisfied. All the work I have done till now really payed off and I can now happily show all my friends and also maybe feature bosses the work I have done. And even tho I worked more than 2 months on this there are still points to improve on like a responsive site if people visit it on a phone. But all in all I am relieved that this turned out so well and looking forward to all upcoming future projects.

10.3 – D.S. 9 – Hosting the videos

Development Step Nine

Hosting the videos

It’s me again! So I actually just spent almost an hour reading through all the Vimeo guidelines on what I am allowed to upload, whats copyrighted and what the benefits are for me to use Vimeo over YouTube and I now decided that I want to upload all my videos to Vimeo since they don’t play any ads and with a normal subscription (that I can try for 30 days) I can even customize the video player.
To do this, first I uploaded one of my videos to Vimeo and then read into how to embed this into my page. Vimeo had a good explanation, so through that I got the embedding code for my video from Vimeo itself and it looks like this:

<iframe src="https://player.vimeo.com/video/297625607" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

As you can see they use an iframe, which is something I have never worked this, but just to try it, I am now going to switch it out with my video.

Okay, so now that I switched to iframe, basically my whole code breaks. Everything was written around the video file and doesn’t synergise with the iframe. So if I would wan’t to use that I would need to change my whole code again. Also I would need to get a subscription at Vimeo which isn’t the best thing. So what my solution to this would be, since the current links through WordPress work, I am going to render every video again in a smaller resolution so I can more easily quickly load them and so they take away less storage on WordPress. Because the one issue that I encountered when I opened the website on a new Wifi, was that it first had to load the video for several seconds which isn’t too pleasing. Since my videos are currently full hd and take up at least 100 MB each, I need to size them down.

So after a lot of rendering, exporting and waiting, I did not just export all videos, but also uploaded them on my WordPress page. I also included all the links in my code and it was working perfectly. I also noticed that the loading time is way shorter and everything feels smoother now.

And now to the final step, UPLOADING EVERYTHING to the INTERNET!

To do that, I needed help. Professional help.

I had, to call my brother..

Since we already had a domain, He told me to install Cyberduck which looks somewhat like this:

We then set up my login and website, and after a while I was able to just put my index.html, style.css and data folder into the website and it worked. The website is now online on this link: julien.truebiger.de/interactivefilm.
After visiting the website on different devices I noticed that since I removed the ability to scroll, some laptops can’t see the buttons at the button, so I had to jump back into my css code and remove the overflow: hide. Now my website has all the functionalities and is available online. It still has some flaws and things I need to implement but generally I am super satisfied so far.

Since this was only more or less 4 hours of work, I decided to split this Development Step into two smaller parts, so here comes the second one.


Development Step Nine And a Half

Visual Feedback

I didn’t really know how to call this development step but I thought problem solving would come close to what I am planning to do. So first of all I actually have to rearrange the order of all the movies, because currently when you go onto the website it starts alphabetically (from Action to Comedy… and so on), but in my original project It started with western and moved on differently because I thought its better to start with something recognisable.

Edit: I changed the name to visual Feedback.

And the easiest way to do that was renaming the “src1 – src18” so they would call out different movies.

The correct order, now is:  western – noire – horror – anime – action – bloopers

Now, where this is done and I have all my videos uploaded, I need some kind of indication on the website that shows the current genre and item. I could do that either by having a plane text somewhere just for indication, or for example have the genre button say the current genre and the objects increase size if active.

To do that I started with the genre button changing the text. For that I actually found a good example in like the 4th dev step or something so I looked back over it and checked how it was done.

var btnTxt = [
'hehe',
...etc...
];

function changeText(){
if(txtPosition !== btnTxt.length){
btn.innerHTML = btnTxt[txtPosition];
txtPosition += 1;
}
}

The most interesting part was the variable that had several names that then get called by going through txtPosition + 1.

So I tried implementing this part in my code. To do that I implemented the variable btnTxt with all the 6 different Genre names, and then, instead of creating a new function, putting the btn.innerHTML = btnTxt[txtPosition]; inside of my button click. But to make the text get displayed correctly I changed txtPostion to currentGenre. The problem that I now encountered was that everything behind this line of code wouldn’t work, which means that something in the line is missing because it basically stops the code. So I looked at what it said and saw that I forgot to creat the variable

var btn = document.getElementsByClassName('buttonG')[0];

The weird thing that happened now, was that the button did change its name when I clicked but it always was one genre ahead and when it started from the beginning again it would say “undefined”. So what I just did was adding

var btnTxt = [
'Western',
'Western',
'Noire',
'Horror',
'Anime',
'Action',
'Bloopers',
'Western'
];

a Western in the beginning and in the end and it actually worked :D. Since this is now solved I will look into showing the active item.

My idea was that if for example the banana is active it should just be bigger or maybe glow, so I read into how to change an html button with js since there are no if statements in css. I tried w3schools but wasn’t totally successful. But once I found this threat on StackOverflow I managed to implement the following into my code:

var but = document.getElementById("ba");
but.style.width = '120px';
but.style.height = '120px';

Now I only had to add it to every button and make the buttons go back to 100px when another one is pressed and this is my result:

As you can see, the user now always nows the current genre and items, so the last missing visual feedback is the play pause function. For that I am thinking of a simple play button that appears when you pause the video just how they do it with the WordPress videos.

For that I just took a Play button image and threw it into the division with my video border. then I created a variable with a link to the play-button. I also arranged the position with css and then just added the function

butP.style.visibility = "hidden"; / butP.style.visibility = "visible";

to whenever the video is paused.

This is my result (photo) and I was very satisfied with it:


(function is also working, trust me)

But then reality somehow hit me really hard. After I just imported the button and the new html+css file through Cyberduck into my website, this was the confusing result:

I am not just confused but also hard-stuck at this problem. I seriously don’t understand the problem since the html, css and image files are the same and even the browser that I’m using is the same. So there shouldn’t be any difference between my preview from brackets and my online version. To fix this I just went ahead, put my image in its own division and changed some values. Now the video button just displays below the video which is also fine because it is depending on the browsers. On safari for example everything is working fine, so I am just going to make my own button and that should be it for this Development Step.

Retrospective:

This is now the last week and as it being the 9th development step its also almost the last one that I am making. My website/product looks really nice and I am extremely happy with all the progress I made. I am also looking forward to my last Development Step which is going to add a “menu” to it so people know what this is all about and which puts more depth into this project. So I guess I will see you in the last development step!

9.3 – D.S. 8 – Composing everything together

Development Step Eight

Composing everything together

I wasn’t really sure how to call this development step but since my plans are to make the website good looking and flawless I thought I would call it composing everything together since I now have to make minor adjustments here and there to make it pleasing to look at.
My first step into that direction would be a background over the whole page, and for that I wanted something “papery” self made since it would fit my box design.

My first step, was finding a good texture. After having that done and saved in my data folder, I could implement it. To do that I just used

background-image: url(data/paper.jpg);

inside of the body. The result was the image covering up the whole background of the website. Now, I am actually going to size the video down a bit because I feel like all of the buttons should be clickable without scrolling. So I put the width of my video to 920p and moved the buttons up so everything is on one site.

But the scroll bar is still accessible even tho it moves the page only by a few pixel. So I googeld on how to remove the scroll bar and found this. Here someone explains that with using

overflow: hidden;

the scrollbar on the used div/ element disappears. The problem is that, if I use that on my div that has all the content inside, the scrollbar still doesn’t disappear.

But looking a little further down on the suggested links by google I found this forum where someone suggested this as a solution:

html {
width: 100%;
height: 100%;
clip: auto;
position: absolute;
overflow: hidden;
}

I just put this into my css code and it worked. My scrollbar is now gone. Since I got this out of the way I want to make my background fit the old box design even more so I am going to jump into photoshop and change it up a little bit.

Adding a white bar at the bottom and some “reviews”/icons on the background it lives up the scene already:The only thing that is annoying me now is the fact that the video isn’t really part of the scene. Its more like a square thats just pasted on there, so I want to integrate it more into the image. What I came up with, was putting a filter over it which blurs the edges to make it more fitting to the background, and that looks somewhat like this (in photoshop):

And what I need to do now, is export this as a png, import it and somehow make it perfectly stick on top of my video. But to be honest I have no clue on how to solve this, so I just started googling and found things like this, and this from which I tried both, and actually the second one got me a little closer. What I tried was putting the overlay inside of the videos div and the result was the following:

As You can see, the overlay now is more or less on top of the video, and even scales with it, its just not correctly positioned yet. But that should be fixed quickly. To do that I used

position: absolute;

Which makes the object able to lay on top of the video instead of getting pushed away by it.

left: 1.7%; top: -3.7%; right: 0%;

This was just me trying out until I found the perfect position. And this is what it looks like:

The only problem that this creates, is that the video isn’t clickable anymore to play and pause, since there is an image in front of it. So what I thought is that I can maybe make the image clickable instead. And wow it actually just worked like that. I just had to put the

onClick=”playPause();”

into the <img …> and now the video can be played and paused. Now I only want the mouse curser to be pointing when you hover over it. To do that I first tried putting

cursor: pointer;

into the division that has the image inside, the problem is that the cursor now is pointing over the whole page since the division takes 100% width. So I had to see how to select an object inside of a division. I could just give the img an id or put it into a class but since I already used that method a lot I want to learn how to use the selector. And for that I googled how to select an img inside a div. I found this link, but when I tried out what they suggested,

.overly > img {
cursor: pointer;
}

it didn’t work. But then I noticed that I had a typing error cause my division is called overlay, and then it worked :D.

Now, my masterpiece is almost perfect. The only thing I want to change is the background because I think I should have more icons and make them all smaller so its more of a texture than 4 things that cant be readable if your image is on top. So after photoshopping and putting everything together this is my final product:


Retrospective:

Finally A Development Step which wasn’t depressing like crazy :D. Which doesn’t mean I had no struggles or problems. But I feel like the outcomes from this development step where so significant that it motivated me more then ever. I now have a final and ready to present website. This doesn’t mean it is flawless, not to speak of the responsiveness with mobile devices (which I will look into in another DevStep), but this is definitely the part where I reached my first big goal. Which means that I know have to upload all of this to a server so everyone can access it through my website. And when I am done with that I will look into responsiveness and probably a new way of hosting the videos because WordPress may not be the best way.

8.3 – D.S. 7 – Fixing the Videos

Development Step SEVEN

Fixing the videos

Like I said in the ToDo list for this week, I don’t know which way is the easiest and best to solve my current problem with the video scaling to big. And while I’m at it I don’t want to waste time fixing this problem and then later when I upload my videos online just noticing that everything was a waste. So what I am doing instead is first of all reading myself through several different solutions and then trying to implement my videos on the website (so jumping to the final step/look) to then fix any visual problems.

Long story short, I just dived into google looking for a good way to save and play my videos. I went through these links (1, 2, 3, 4, 5) which took longer than expected but rewarded me with great knowledge. One possibility that I read quite often was to host the videos on youtube and then embed the links in my code, but to be honest, that will be the last thing I wanna do since I really don’t want ads on my videos. I am also considering Vimeo but I will take those once my last hope died. So I actually just checked how big the files are allowed to be if I upload them to WordPress and the limit is 500 mb. Since my videos are all around 100 mb I might actually be able to host them myself.

Now, I uploaded one video and I can just regularly watch it on this link. Before I upload all my videos, I have to check how to embed them into my code and how to use my code on my WordPress website, or If I need to make a new website without WordPress.

IDEA: I just randomly got the idea to take the link that WordPress provides me (where the video is saved) and include that in my current code in Brackets. And WOLLIA, IT WORKS! The video is playable and the interaction runs smooth as butter. (the video is a little laggy because of the screen recording). The only “bug” that I encounter is that it doesn’t play the video automatically, but I will get into that later.

Now I will upload a second video, just to have the switch working and to see if it works out, and then I can proceed.

Okay, so I have added a second clip and it works fine. But now I really need to fix the problem so the video buttons aren’t stuck to the video image.


I really don’t know how to explain this, but I just spent several hours trying to somehow fix my problem.
Problem: I just want a video to scale up and down with the browser and buttons that scale with the browser but to always stay below the video. I have been trying everything out with my code, like removing “position: absolute” which makes the button stick to my video but then, when one button increases size, all of the other buttons move. The only progress that I made so far, is putting “width=”1080″” into the video declaration in the html file so now my video doesn’t scale bigger than 1080 px. I also read through w3schools again, but it didn’t really help.

Then, suddenly, I opened a new tab, and it struck me. I saw the google window and noticed how they are also using a video with a button beneath. So I tried how they are dealing with the scaling and was kind of shocked that they made it so simple.

As you can see, the video never scales down or up. It always keeps it original size and just stays centered (same with the buttons). What I did, after I saw this, was inspecting the page and reading through every single line on how they structure the code and how they get everything centered. After I understood most of it I started copying the structure and using it on my code.

I added more divisions and gave those divisions extra attributes. I am quite sure that I have some useless stuff in my code now, but I can remove that once I am happy with the result. After taking over parts of the google structure, I noticed that my page already changed but the main problem was, that my video was “glued” to the left side of the screen. So once again I just googled on how to center a video and found this answer:

display: block;
margin: 0 auto;

I added this to my code, and changed the height of my buttons, and this is what I got out of it:

It took me a long time to actually got to this medium to easy solution, but if you look at my code you might see that I probably made it into the most difficult problem to solve.

But I guess thats just how it goes sometimes. Sometimes you just get completely stuck with something so simple that you oversee all the easy solutions. But what matters is not only the outcome but also the journey there, and I guess I went on a big one :D.

To finish this off I noticed that I don’t have any real way to pause the video so I thought of implementing a play/pause function again. Since I have the button done, I only need a way of implementing it, and I want to try to put it over the video so if you click it it toggles between playing and pausing.

I just put the play button back on visible which makes it just appear on top of the video now, and what I need is the button to be invisible and exactly the size of the video. Because I wasn’t sure how to solve it I googled and found this. And what someone was suggested was:

background: transparent;
border: none !important;

Adding this to my play button and adding a width and height of 200 px and a cursor so i now when im over it made it look like this for now:

The blue outlines are only there because I clicked it and I will remove those in the end with “outline: none;”. What I need now is to change the buttons behaviour so it doesn’t push the video down and then the buttons size. I am planning to use position absolute and just change width and height and will check on how it works.
Well.. The problem that I encounter when I make it as an absolute, is that it may not push the video away anymore but its also not clickable anymore. So I googled, how to put a button over video in css and found this, where they solve how to put an object like text over a video. The interesting thing is that he used:

z-index:0; and z-index:1;

Which is just (assuming) a way to place the objects on the z axis in front and behind of one another. It was easy to implement and made it work perfectly.

Now my button is over the video, invisible and clickable. The only problem now is that it isn’t “scaling” (moving) with the video. So its always stuck in the top left corner and not following the video. But since I already have some centring buttons I should be able to take their code and use on this new one.

Side Note: Sometimes googling different things can help.

I actually googled one more time: “css make a clickable video” and immediately found out here that I can just add

onClick="playPause();"

just like with a button, to a video and it uses my function. As funny and ridiculous as it may sound, but I noticed while working with the video and trying to scale the button over it, that my video isn’t HD (1280p – 720p) as its supposed to be, but its 1080 p wide, so I changed it to 1280p width which makes the buttons to appear almost offscreen, so the viewer is basically forced to scroll but I already have a good idea on how to implement this into the whole theme of the interactive box.

And this is what I now have with the newest feature:

Retrospective:

Now, after this problem appears to be fixed I can finally head into the next Development Step. Even tho I am basically through with most of my looks and functionalities, I still have things to change and see a lot to improve in here, like changing the button stile again and adding a background.
All in all this dev step was a lot of frustration and making everything complicated for myself but nonetheless I have grown because of that and also reached my set goals. So I am looking forward to have everything to work out at least a little better in the next Development Step.

7.3 – D.S. 6 – Making the Item Buttons

Development Step SIX

Making the item buttons

Since I changed the genre button in the last development step and read already into CSS, I can now immediately dive straight into setting up images for buttons. For that first of all I need some images. Three to be precise. One gun, one banana and one dildo icon. I made those in photoshop and just drew them by hand:

Now, that I have the icons I have to implement them into my Item-buttons. To do that I googled “how to use icons for buttons CSS” and found this forum link. I looked at the code and tried it with my icons, the problem I encounter though was, that the icon did not scale, which means that when my button is for example 100×100 px you can only see the top left 100×100 px big corner of my icon. And again I asked google, and found this answer “Most modern browsers have support for CSS background-image options like background-size, so you may really use something like this:” on stack overflow.

So if I add background-size 100% to the other attributes, the outcome looks like this:

And this is my code for each Icon:

.buttonIB{
background: url(data/BananaIcon.png) no-repeat;
background-size: 100%;
cursor: pointer;
border: none;
width: 100px;
height: 100px;
}

Now I removed the play button since I will add it in later again and make it better looking, I moved the three item buttons below the video and added a little hover animation which just increases the size from the selected button by 20 px with these lines of code:

.buttonIB{
[...]
transition: all .2s;
}

.buttonIB:hover {
width: 120px;
height: 120px;
}

The goal now is to position the three buttons in a triangle shape around the genre button, that means that I have one left, one right and one below. Since I don’t have a real idea on how to solve it I googled myself around and stumbled across the following links: stack overflow, w3schools 1, w3schools 2 and w3.org, and what I learned out of those are the following things:

position: absolute;

Which is kinda tricky to be honest, because even tho it fixes the problem that the button jumped up when the video reloaded since it now is “fixed” to a certain position, it now feels more difficult to position correctly so I am still looking for a solution to position it perfectly.

top or bottom or right or left: x%;

This positions the button at 50% of the screen, the problem is that it takes the first (or last) pixel of the button and not the middle which results in the button being offset by 50 pixels (half of the button). The interesting thing is, that if I position the button at 50%, 50% top and right, and then use the following code (transform) I can transform it by 50% top and bottom to the left so it now is positioned from the middle point of the button rather from the top left most pixel, which can center it perfectly.

transform: translate( x%, x%);

With transform: translate the given object should be translated (moved) to for example the middle of the screen when 50%, 50% would be used. The problem I encountered here was that it did indeed positioned my Item buttons correctly but somehow had no effect on my Genre Button.

So what I did to fix this problem, I just tried out everything I could, and to show you my “workflow” I made a time-laps which shows the time I took in 20 seconds. You can see how I am just trying out by removing lines of code and checking what might be causing the problem. After a while I found out that the wiggle effect stops the object from being transformed since you can only transform an object once. My solution to this was just simply removing the wiggle from the button because it didn’t really fit in and was very small anyways. I also encountered the same problem when I looked for how to rotate the buttons and just figured out by myself that I can call several different commands in one transform (e.g. transform: translate(-50%, -50%) rotate(75deg);).

In the end of the time laps you can also see me trying to remove the annoying blue selection which appears when I click a button. I googled for “how to remove the blue selection css” and found a link to stack overflow. Here they described

input:focus {
outline: none;
}

which should fix that selection box, but somehow it did not work for me. I also tried “box-shadow: none” with no success, so I just left it like it was for now.

And this is the product of this weeks development step:

EDIT: Ha! jokes on me. Few minutes after I posted this video, I checked one more time on how to remove the annoying blue selection box and found here, that I could just add “outline: none;” to the buttons and the blue selection box is history! So, well, another problem solved.

Retrospective:

This Development Step was rather made out of several small steps than one big step since I had a lot of different and small problems that always jumped in between me and my goal. But I am not saying that this was a bad thing. Actually I really liked it, because even tho it might have taken me longer since I always have to stop the progress and learn something new, but also the many small mistakes made me learn way more in total. So in a conclusion, I am very happy of this weeks “Development Step” and am looking forward for the next one which will, probably contrast this one since there will be one big problem to focus on (the video scaling).

6.3 – D.S. 5 – Getting Started with CSS

Development Step FIVE

Getting started with CSS

Like I mentioned previously, I am not really affine with css so I will start this off by just googling for the possibilities and functionalities of css.

After googling for “css functionalities” and clicking on the first two links I noticed that there are also special css functions (w3schools.com, quackit.com) and that the functions are only a small part of css:

So I googled “videos in css” to get something more specific for me and again went on w3schools, and checked out the three examples on the Responsive Web Design Video section.

The first example was using width 100% which basically resulted in the video always scaling with the window of the browser.
The second example did something similar but it only scaled when the browser width was smaller than 400px (maximum video size). It accomplished this by setting the “max-width” to 100% which might be something that I want to use since I don’t want my video to scale bigger than it is since it would loose quality.
The third and last example was, again working with the 100% width expression but it added more objects which made everything scale together depending on the size of the window.

Before trying this out, I also went ahead and looked for different things for my buttons. So I figured the first thing I should do is go on w3schools and check the css button functions to get a good overview of what would be doable. After reading through the features I just implemented some on my project to try them out in live action.

.myvideo{
width: 640px;
height: 480px;
}

.button {
background-color: #555555;
border: none;
border-radius: 6px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
}

.button:hover {
background-color: #ffffff;
color: black;
border: 2px solid #555555;
}

The results where stunning 😀

But since I just learned that the video itself doesn’t really have any cool possibilities for layouts etc. I want to emphasise the buttons a lot more. This is why I googled “cool buttons css” and the first link I found was this one.

Looking through the buttons, these two were the most interesting and fitting to my layout: “Jelly Button by ayamflow”, “Particle Button by Timo Hausmann”. But I wasn’t really satisfied so I tried out another link. And here I found one interesting design. Still not being happy, I searched the web even further and checked this and this. And found these two more button effects (1, 2). That makes my following plan the following:

I want to have this button as the main Genre switching button and the next genre will also be displayed on the button (GIF).
This wiggle effect might help to call to action and put more importance on the genre button (GIF).

And for the three objects I planned using images with this effect on the buttons which should make it way more playful.

Sadly, after copying the code into my existing code and also linking the used stylesheet, the “Jelly Button” didn’t work out at all. my result is basically just a deformed button since it somehow can’t link itself to the stylesheet or read jQuery.

So instead of trying to fix it I moved on because it’s not really worth spending my time on this feature. What I did instead was implementing the wiggle script from Lewitje and it worked out perfectly since he didn’t use any external sources. I implemented the wiggling, changed the speed at which it plays and customised the button so it fits the rest (for now). I also placed it below the video as the main button. And while I was at positioning I changed the video look to max-width 100% so it scales with the website to its max resolution and the button scaling with it – always staying centered.

And this is my result:

As we can see in the video, the buttons are still functioning, the genre button wiggles every 4 seconds, and when I scale the window the genre button and the video scales with it.

But we can also notice a small “bug” which happens when we change the genre/video. When the video is changed you can see the background for a second and the button moves up since the video object disappears for a split second. It is indeed only a small thing but I personally don’t like it and will try to fix it now.
Luckily I more or less know already what the problem is so my solution would be to put some kind of filler object in the size of the video behind it so when we switch the video the button stays in its position. And if I use like a black box then it wont flash up white.

Since google is my best friend I just quickly googled the problem that I have to see if someone else maybe got it fixed and this is what i googled “video flashes when changing html js”. The first link with the headline “Html video tag blinking when Setting new source? [duplicate]” looked promising and it referred me to the solved question “HTML5 Play movie from multiple parts without flashing screen“.
The way it was solved by preloading all the videos and having a black box as the background. So I looked at the solution and tried implementing it into my code. The problem that I encountered was that the guy with the solution had another approach at switching the videos because he only had two videos and hid one of them which makes it easy for him to preload the two videos. Nonetheless did I add “preload=”auto”” to my video and put “background: black;” into my css – video class. But this brought me to another problem. As we can see in this video, my video now has a black background which you can see for a split second when I change videos, but it doesn’t cover the whole background and doesn’t scale with the video.

And again I started googling. But this time I wasn’t as successful. To make it short, I googled “css scaling video background” and found two decent looking links, one of them putting the video as a background video in a division (tried it out and it would have either made the whole page black or nothing), and the other link using “min-width: 100%;” which actually made my video background to be almost 100% of the video. I actually tried out many different things, like putting my video in a div, changing all kind of attributes from that div, changing the attributes of the video, and so on but sadly I couldn’t get to any better solution than this for now.
Note: I also removed the controls to make it a little less flashy since they are useless anyways.

Retrospective:

So far it looks very pleasing and I am satisfied with the Genre button and the scaling video width. I am not fully happy with the switching “animation” and the flashing but I do think that the progress I made and the solution I have for now are perfectly fine. I do still want to do something about this in the future but I think it will be something that comes with time and shouldn’t be focused down completely. Although this development step was more than 8 hours of work it was more than fine since the last dev. step was a little less.

5.3 – D.S. 4 – Implementing the Items

Development Step Four

Implementing the items

Now lets implement the 3 items, the dildo, the gun and the banana. Since we already have the sources loaded, we only need to create a function that can switch trough the items.

To set that up I created another variable called “currentItem” that will keep track of the current Item (Banana = 1, Dildo = 2, Gun = 3). Then I made three buttons because with the items you are supposed to individually click them instead of “scrolling through” them.
For each button I made a new function that looked like this for every object:

function Banana() {
if (currentGenre == 1){vid.src = src1;}
else if (currentGenre == 2){vid.src = src4;}
else if (currentGenre == 3){vid.src = src7;}
else if (currentGenre == 4){vid.src = src10;}
else if (currentGenre == 5){vid.src = src13;}
else if (currentGenre == 6){vid.src = src16;}
vid.load();
}

This should now, if the genre is 3 (horror) for example, switch to the horror clip with the banana, and same for all other genres and objects. But if we look at the outcome from this clip, we can spot a problem:

As we can see, both functions work on their own but when switching from genres to objects or the other way around they seem to reset or jump forward.. But we can also observe that, while the counter for the currentGenre variable is going from 1-6, the currentItem variable is always staying at 1.

Looking back at the code I actually found out that the problem is, that even while I am switching the video to different items, I am not changing anything with the variable. So all I had to change was adding “currentItem = 1;” (or 2 or 3) at the beginning of the function.

With that change, the genre button will now also keep the item saved, so when I switch the genre from action gun to comedy for example then it will keep the gun item.

But that is only one of the two problems. The other one is that when we click on the genre button after the items it will repeat the genre once, and when we click on the items it will jump one genre ahead.

Before diving straight into the code I actually sat down once more and tried to find the problem by just looking at the video and breaking it down.

  • When I play the videos, the cG (currentGenre) is at 1 and it plays Action (1).
  • Clicking the first time on the Genre button changes the video to the same Action (1) and cG stays at 1, even tho the first click should already jump to Comedy (2).
  • Switching at any point to another Item, keeps the cG variable but shows one Genre further.
  • If I then click on the Genre Button again it repeats the currentGenre.

The information that we can draw out of this is actually helpful and interesting. We already know that the problem lies somewhere in the variable currentGenre and maybe when its getting updated within the swapping Genre function.

Actually, after looking only at the first part of the function,

function sGenre() {
time = vid.currentTime;
statusElementG.innerText = currentGenre;
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;
}

I can see that the cG is getting written out before it changes so the value that we see on the website is always the old value, so what I did was removing the “statusElementG.innerText = currentGenre;” and put it at the end of the function so we then have the correct and updated cG.

Now we can see that even tho it is playing the Action, which is genre 1, the cG variable is already at 2 which means that changing an item now would also show the second genre. And to fix that I need to update the cG variable before it changes the genre.

So instead of putting the cG to one value further after every click, I now add + 1 to the variable as soon as the function gets called, but since we only have 6 genres, I added an if statement that sets the variable to 1 if it gets bigger than 6:

currentGenre++;
if (currentGenre > 6){
currentGenre = 1;
}

And this is the final result:

Retrospective:

Looking back at the To Do for this week and the Development Step I made I am more than satisfied with my progress. I now have a perfectly functioning interaction, just as I wanted and needed it. The steps for the future will now probably be to go deeper into html and css to make my whole layout and make everything look dope.

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)
   statement1
else if (condition2)
   statement2
else if (condition3)
   statement3
...
else
   statementN

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;
}
[...]

Retrospective:

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.

3.3 – D.S. 2 – Playing two videos

Development Step Two

Playing two videos

First step I made was just copying the code I made last week into my “code editing software” brackets and ran it in a live preview. Everything was working except the video, since it is saved locally and I did not have it in my folder.
So I took a random .mp4 that I had somewhere, named it accordingly and put it in the same folder. Now the live preview shows this video and all the functions are working accordingly.

The next step was to implement a 2nd movie. First I put another .mp4 video in the folder and declared it at the start of the code as “myVideo2” and even added another button that does not have any functionality for now. And this is what happened:

It is cut off at the bottom since you would need to scroll, but my point is that now both videos are automatically displayed above each other. And since I need only one video playing and the other one hiding until you swap them, this is a problem.
So I tried to look for a solution on w3schools by looking for html video attributes. After reading through it I thought I could load everything in as a <source> and then easily swap the videos, but as I found out it wouldn’t be that easy.

To summ up my current problem:

I need two videos loaded which you can switch at any point.

One idea of a solution would be:

Load all videos above one another and hide them using css.

The other one is:

Load everything in the source and then somehow change the source.

While I was trying to solve this problem I came up with a third solution where I would hide the videos by changing the width to 0 and then swapping them back and forth. So I came up with this code:

function swapMovie() {
if (myVideo1.paused)
myVideo1.width = 420;
myVideo1.play();
myVideo2.width = 0;
myVideo2.pause();
else
myVideo1.width = 0;
myVideo1.pause();
myVideo2.width = 420;
myVideo2.play();
}

This should have (at least in my head) swapped the videos back and forth and only playing the video that you can see. But somehow this didn’t work at all and I could not find any possible solution for it. So I just googled “how to switch video source” and came to this guy on stackoverflow  who had EXACTLY the same problem that I had.

He asked:

“I have a JS function that changes the video source of an HTML video. A button activates this function. It loads the same new video on switch. There are 2 videos of the same length.How do I:

  1. interchange the video every time I click the button?
  1. when i click the button, can the video load at the same time the previous video was playing?”

And the proposed solution was the following:

if (currentlyPlaying === 1) {
vid.src = src2;
currentlyPlaying = 2;
statusElement.innerText = 'Going to play video2..';
} else {
vid.src = src1;
currentlyPlaying = 1;
statusElement.innerText = 'Going to play video1..';
}

Here, the person answering chose a toggle function as a solution. If the first video is playing, then switch to the second one by changing the source, and else (if the second one is playing) then switch to the first.

After I took that solution and applied it to my code, I also started implementing css in mine to scale the video.

.myvideo{
width: 640px;
height: 480px;
}

And these are the results:

As you can see, when toggling between the two videos, the other video always starts where the video before left off.

Retrospective:

In this development step my goal was to have two different videos that I could play by switching in between them. I got hard stuck on one problem because I did not know the correct function of <source> but after finding the correct solution I also found out that <source> doesn’t “save” anything and only declares one source, so my first try where I wanted to save several videos in it didn’t really made any sense.