Our first assignment for Live Web is to use HTML5’s video or audio tags along with JavaScript, to create an interactive self portrait. I created a webpage that shows my state of being according to the current weather in New York City. If it’s 70 degrees fahrenheit or above, a video of me having fun in the sun plays. If it’s below 70, it shows a video of me having trouble waking up.

See the page here. I used the Open Weather Map API to pull in the current temperature in New York. The temperature is in kelvin, so I convert it to fahrenheit, then decide which video to play and which to hide based on the temperature. The selected video autoplays and loops.

Two questions came up for me while I was doing the assignment.

First, in class we used “function init() {}” to declare a function, but in CodeAcademy it uses “var init function() {}.” Do these do the same thing? Any reason to use one over the other?

Second, I used Miro to convert my video, but it kept vertically flipping my video when I converted it to MP4. As a result, I had to convert my video from MOV to MP4 in Miro, then flip it to the correct orientation in Quicktime, then reconvert it from MOV to MP4 in Miro. Really time consuming. I Googled around about it, but didn’t see anyone else having the problem.

Here’s the live page: http://lmj.io/projects/live-web/selfportrait/

Since it’s currently winter in New York, here’s a duplicate page with the location set to Maputo, where it is summer: http://lmj.io/projects/live-web/selfportrait/index_maputo.html

Here’s the code: