Video Gallery

Visit site Download source

Unfortunately this project was cancelled part way through, but I thought it was interesting enough to finish anyway. The video gallery is, I guess, a proper web app: it relies heavily on JavaScript and uses JSON throughout to load new content for (hopefully) snappier and smoother performance. The search part is loosely based on Bing / Google Images, listing videos in a grid with infinite scroll. The video preview part uses a layout inspired by Reeder or, going back a bit further, Outlook.

The layout is responsive up to a point, hiding the related videos list if there isn’t enough room and choosing a default video size based on browser width. It doesn’t scale down to phone screen sizes though, which is unfortunate. It also doesn’t work very well in IE7 or below, which is perhaps less unfortunate. To make linking and the back button work, the Video Gallery supports Google’s crawlable Ajax standard.

I’m a big fan of Microsoft’s new Metro design language and this seemed like a great opportunity to get to grips with it. Unfortunately I don’t have a Windows 7 phone, so I spent a lot of time looking at videos and screenshots to figure out how it worked. :) Translating it to a bigger screen was sometimes tricky, so the release of the Windows 8 preview was tremendously useful.

As it involved a fairly large amount of JavaScript (over 2000 lines), I built the project using the jQuery widget framework so I could instil some proper structure in the code (no more hundred line $(function ()); blocks :). Danny Wachsstock’s wonderful widget subclassing code was also invaluable.

The backend was built on the CodeIgniter PHP framework. Most of the work here went into building decent search queries, which can often extend to several printed pages. I tried to make the search predict the user’s intent, returning results that take account of partial words or phrases and misspelt words. Typing angel var should return angel variation as the first result (which contains the whole phrase), followed by angel (which contains just one of the words), then all videos including variation (part of one of the words) and finally all videos including air (a spelling suggestion for var).

The video gallery was developed for fairly structured data (all videos have a name, some have alternate names, and all have various attributes that can be filtered in the advanced bit) and a dataset of 100s. I’m not sure how well it would scale to significantly larger datasets; it may be necessary to make the search query more discriminating to stop too many results being returned. It’s unsuitable for UGC right now as there’s no ordering by video popularity.

The videos use HTTP pseudostreaming and switches bitrate and resolution automatically depending on the video size and available bandwidth. (Most of this comes free with JW Player.) Unfortunately there’s currently no support for the video element (on the to do list…).

Download the source code from GitHub

As I don’t have the footage that was supposed to go in it, the video gallery uses some really nice sample video clips from They Call Us Animals.

· · · ·