HTML5 Video Gallery - Part 1

by Stephen Fluin 2009.07.09

Update from 2010-06-01: The HTML5 Video Gallery is now live!

After deciding to build a video sharing site, the first step was to write up some goals and requirements for the first version. This entire project is kind of an experiment so I am open to what may come. It may become popular and I will have to shut it down due to bandwidth costs, but I think this would be a good problem to have.

Version/Milestone 1 Requirements

  1. Videos between 0MB-500MB should be accepted.
  2. Videos should automatically be converted to .ogv files using Theora and Vorbis for codecs.
  3. I want to downgrade videos if they have too high of resolution/bitrate/etc, but I don't want to save any extra data for low-res videos (no upconversion).
  4. Anyone should be able to upload video, no users required.
  5. I need to be able to delete videos quickly in case of abuse or DMCA requests.
  6. No pornography allowed, due to legal restrictions.
  7. Gallery of videos
  8. Uploads should be run in the background, not requiring flash/java.

Version/Milestone 2

  1. Custom branding on player
  2. Allow users to annotate their videos like on Youtube
  3. Allow users to pause video and press a "create thumbnail" button

Approach

The first step of my approach is to start with the first step of the user experience, the upload. I have worked with Flash and Java uploaders in the past. My first thought was that I didn't want to use a flash uploader, because of the proprietary technology required, as well as the additional browser features I don't want to have to require. My second thought was that this relegated me to using a Java Applet, but after attempting to download and try out a couple open source versions, I realized that Java doesn't currently work in my browser. I gave Java the benefit of the doubt and attempted to install a couple plugin packages, and none of them did the trick. Due to my belief in dogfood this meant that Java was out, because if I can't use the system, then others won't be able to use the system.

This left me in new territory. In my research into the flash and java options, I discovered an option I hadn't heard of before, AJAX. I've used AJAX extensively in the past, but never for file uploads. I looked into a few, and they looked like masked Flash approaches, but then I stumbled upon a couple examples that used an IFRAME coupled with some AJAX to accomplish the goal. I tried a couple of the demos and it looked like the scripts would be easy to adopt / create, and that the functionality was where I want it.

Next time I will share my experiences implementing the upload/encoding functionality.


permalink