Interactive self-portrait

Live Web: week 1

Assignment 1.2: Using HTML5’s video or audio tags along with JavaScript, create an interactive self portrait. Link to it on your blog.

This self-portrait is more like the portrait of my current internal struggle with getting back into the rhythm of the classes. It should be about attempts of control, focus, and the idea that the context in my country is part of what takes away my time and head space. So, all I wanted was a page that didn’t do much until you clicked it, and then would get overwhelming very quickly, but still needing user interaction for that.

I first imagined it being only with text, beginning with a positive or calming message, and then populating the spaces between the words with more self-destructive messages, and ending by adding phrases about the context in my country. Since this is my first time trying JavaScript, I had a lot to learn, even to do this, that sounded very simple.

I started by trying to access the content in the Wikipedia page for Brazil, and soon realized it was way harder than I expected. I copied all the content into a text file, hoping to make it easier, but I still couldn’t find a way to access it as a string in my code. I found two examples:

.then( response => response.text() )
.then( text => console.log(text) )

The first one would print the text on the console, but I still couldn’t use it as text. I also had no idea how it worked, but got help from a resident to at least understand the syntax.

let response = await fetch(url);

if (response.ok) {

// if HTTP-status is 200-299
// get the response body (the method explained below)
let json = await response.json();
} else {
alert(“HTTP-Error: ” + response.status);

This second one looked readable to me, and helped me understand the logic behind fetch, but it doesn’t work at all.

Well, the assignment asked for video or audio tags anyway, so I gave up on the text file, and decided to populate my page with pre-written unhelpful messages and random videos of my favorite Brazilian news program. I added the video tag, but I was having trouble accessing the Youtube URL with it. In trying to understand what I was doing wrong, I found the iframe tag, and started using it. It worked fine, so I kept using it, but I only now realize I haven’t understood completely what is the difference between them.

Finally, I made a video URL array to pick randomly from, but it would give me an x-frame cross-origin error. The problem was that I was using the short URL provided by youtube ( ), and it had to be the full embedding link ( ). With that, I was able to add the videos just fine. I needed them to autoplay though, and apparently not all browsers allow that, so sometimes that part will need the user for it to work.

I am using two addEventListener, removing the first one and switching to the second. That means that the page is waiting for a click, and once that happens it will update whenever the user moves the mouse.

Interaction screenshots (before click / click / mouse moving after click):

Este slideshow necessita de JavaScript.

I definitely learned a lot from this assignment, but I don’t feel like I got where I wanted to get. For me, the main problem now is that, being it that I update the whole body HTML every time that the mouse moves, the videos also refresh and need to be reloaded. I wish that the videos that were already in the page would just continue playing while new ones appeared, but I couldn’t find a solution for that on time. I would also like to add some CSS to it, and make it both nicer and more aggressive.

Link to code.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logo do

Você está comentando utilizando sua conta Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s