The Blog

If you've spent some time on my homepage you may have found my intro video. It should be playing nicely with your browser and the best part at this point no Flash is involved. Although I wouldn't mind a flash fallback but that just doesn't seem to work.

Anyway, trying to get that video to work on mobile was quite a pain so I thought I'd write this tutorial on how to do it.

First, you will need to have your video in the correct resolution. Originally I tried 1920x1080 and it didn't play in any of my iOS devices. What I found works is 855x480, this will play in modern smartphones and still look good on a desktop without taking up much bandwidth or time to load. For instance the average video size for the various versions of my intro movie is about 1.3mb for a 38 second video.

Second, with HTML5 different browsers play different encoded file types. Chrome VP8 Encoding .webm files. Firefox Theora Ogg files either .ogv or .ogg, or H.264 Encoded videos .mp4, .m4v, and .m4a Safari (including mobile) H.264 Encoded Videos .mp4, .m4v, and .m4a Internet Explorer H.264 Encoded Videos .mp4, .m4v, and .m4a

Before you start encoding you want to have your video in a high quality, equal or higher resolution, generic container format. I worked with an Apple ProRes HQ codec and .mov movie type.

There's 3 tools you really need and for the most part they're easy to setup.

• FFMpeg - Really the only tool you need.
• HandBrake - Another Open Source video encoder but comes with few options and haven't found much on adding more in.
• Miro Encoder - A Open Source video encoder but I've had bad luck with their VP8 encoder

The tool I recommend the most is FFMpeg though it is the more difficult of the tools to use since it's command line based.

Installing FFMpeg

To install ffmpeg the easiest way is to install homebrew if you're on OS X. If you're on unix you can use your package manager to install ffmpeg as you normally would.

After you install homebrew open your Terminal.app located in /Applications/Utilities and run the following command:

brew install ffmpeg

This will download the ffmpeg source code files, configure it, and build it for you.

Now you should be able to run the following command:

ffmpeg

If it installed correctly you'll get an error about not giving it proper information. If it says command not found, try closing and restarting terminal. If it still says command not found try installing again or doing it manually with the source.

These are two bash shell scripts I created for converting a HD 480p or greater video into HD 480p Google webm and firefox's theora/ogv.

#!/bin/bash

echo -n "Enter the source file: "
read input
echo -n "Enter the output file: "
read output

ffmpeg -i $input  -vcodec libvpx -acodec libvorbis -s hd480 -r 29.97 $output

You can download it or fork it from the source on github.

Here's the one for theora/ogv:

#!/bin/bash

echo -n "Enter the source file: "
read input
echo -n "Enter the output file: "
read output

ffmpeg -i $input -acodec libvorbis -ac 2 -ab 96k -ar 44100 -b 345k -s hd480 -r 29.97 $output

You can download it or fork it from the source on github.

Once you download those scripts you just have to run them.

cd /directory/contains/video/files
/directory/that/contains/the/script/files/ffmpeg_vp8_encode.sh

Then you can specify which file to use as your input (source video) and the name to output it as. Then just run it again with the other script and you'll have 2 of the three complete.

If you want to customize those scripts you can edit them in any text editor and you can use the arguments from the ffmpeg documentation

For the H.264 mp4 video you have a lot more options. A lot of editing software can just export to mp4 with H.264 encoding. As for my website's video I used HandBrake.

Using Handbrake

Handbrake is very simple. Just download the correct version of the software for your computer's operating system. Install it, then run it. Upon starting it should just pop-up and ask for your source video which is the raw footage you want to encode. Then you can select your output just below that. If you select the MP4 File as your format you'll notice that it will add .m4v extension to the file name. That's fine for now and if you rename it to .mp4 it will play fine unless your audio codec is AC3.

After that click the Picture Settings at the top to select the 480 resolution which means the height of the video is 480 and it will calculate the width for you if the maintain aspect ratio checkbox is checked.

Once that is done click "Start" at the top toolbar and it will encode the file for you.

Displaying Video in HTML5

Finally you can upload those videos onto your site and play them with the HTML5 video tag like this:

<video>
    <source src="video_file.mp4" type="video/mp4" />
    <source src="video_file.webm" type="video/webm" />
    <source src="video_file.ogv" type="video/ogg" />
</video>

And that should be it, it should play on both desktops and iOS Mobile. I want to think it will play on Android devices but I haven't had a chance to test it. If you find that's not the case, please leave a comment.

While I've been very proud of my work thus far, there are some key areas I feel I've been missing out on. After meeting with the department head at my school he very quickly discovered what that was: My work thus far doesn't have real emotional pull to create action which is a vital, and necessary skill for a designer. To really manipulate an audience into caring or buying something that they feel they now need or want.

So now I need to brainstorm some problems people have so I can create work that identifies their problem, relates to it, and then offers a solution for it. The form is of my choosing which could be another django app, a jquery/HTML5 website, a node.js web application or even an iOS application.

I don't really know off the top of my head what other people are needing help with something I can offer on the web. I do know though how I feel about some happenings I would like to know more about but don't know where to start.

• Nutrition

  I don't know much about nutrition but I do know my current health habits are atrocious. So maybe something that plays into the fear of the side effects of an unhealthy life style and some factual information about what the average human body needs to stay healthy. For example the average amount of calories one should intake in a day. Of course that's been done before...

• Drawing

  Drawing is something I'm finding I need more and more and it's something I just haven't enjoyed. So a project that tries to connect the frustration of learning to draw and breaks it down into something actionable that makes it enjoyable would be a good app to make. There's a few different directions it could take. Like smaller assignments that just involve drawing with a timer just to get people comfortable with just going at it and not worrying about how perfect it is but capturing the 3D object into 2D space and if you don't use it at least once a week it sends you an email every couple of days to say you should.

• Art

  I've met a lot of people out there that just don't get the idea of "art" in general. They don't understand how to look at it, how to think of it, and they see it as something that's not important or useful. So maybe some basic art education app/site for people that don't otherwise give a shit?

• Web Design & Development

  This one would require the least amount of research for me which would mean I can put more time into creating that emotional impact with it. I've talked to a lot of students at my school who are trying to get into interactive design but struggling with the coding elements. Even the classes we offer either deter a lot of people or they feel kind of frustrated & overwhelmed by it. So maybe something that explains the context of coding and offers more insight of what a programmer does to try and build logic skills to solve problems while focusing on breaking that information into something more fun and something that helps students not feel so overwhelmed. But granted there's a lot of competition in this, and this definitely wouldn't be new to attempt something like that.

Hm.. well that's all I got for now. I'm going to keep mulling it over and see what I can come up with.

Ok enough dramatics but I really like that song! Anyway I just pulled an all-nighter working on some projects for the last day of classes in this semester. As per usual my brain is still going no matter what so I got to thinking about the whole situation and I realized I kind of enjoy it once in a while. It's thrilling to find how committed you are to a particular interest or field. I think that's what you gotta do with your self to make sure you are where you want to be. Can you sacrifice a night of sleep for your job, career, passion?

It is rewarding though when all the assignments are handed in and the work is complete and the last class of the semester is dismissed. While I may not be standing tall, I'm at least still here. Still breathing. Sometimes, that's enough :)

I find myself often trying new software and techniques to help me get more out of my initial design ideas and documentation before I begin a site. What's worked best for me so far has been designing it in photoshop since it's less limited than the web.

However, it just occurred to me that the best tool to wireframe a design is actually paper. The reason is there's far fewer creative limits on it. For instance if you are working in HTML for your prototypes, you're always going to have to work in giant rectangles that either go side by side, vertically, or on top of each other. You can work around it but I feel if I were to start with HTML I wouldn't be pushing my designs to use those properties creatively.

The reason why I think that's bad is that it limits the result you'll have. Your design shouldn't be solely based on how it works behind the scenes but rather how it is experienced from a user's point of view. Therefore you should be working in a medium that focuses on the result and not the process and the mechanics behind it. There are of course exceptions but for most the client work I got, I'd be better off thinking more freely of what is the pure experience I want to offer the users of this website.

So from now on when faced with a design project I'm not going to jump into photoshop I'm instead going to take the time to really flesh everything out on paper using some 960 grid paper and color.