Projects: Tags: AJAX: Silent Draw Outdoors

Information

Timeline: Fall 2009
Application Type: Streaming Video Site
Status: Complete
Technologies: PHP, AJAX, jQuery, Flash
Partners: BWD Staff

This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.

Click on a section of the image below to see an explanation of that feature.

Silent Draw Outdoors Homepage

Video Player

The site fetches Flash videos (selected on the sidebar) via AJAX calls. We initially installed FlowPlayer, but later the client decided to use JW Player because it displays more information about the video stream. Most crucial was the buffer size indicator, so users would know if their connection was fast enough.

Scrolling Video Selector

The client wanted a scrolling video selector. I used a jQuery library called jQuery Tools to implement this. I added some custom code so that in addition to clicking the arrows to advance the videos, the user could hover over them and the list would scroll after a delay.

Low/High-Resolution Selector

The client was very excited to have high-quality, high-resolution video content. At the same time, he wanted to be able to accomodate users with slower connection. He really wanted to emphasize the high-resolution content, so we made it so that the hi-res versions of videos are served first (as opposed to YouTube, where low-res is the default).

So videos are served in high quality at first, with an explanatory paragraph and link to switch to low-resolution if the user's connection can't keep up with the video stream. The setting is preserved across page views (so users don't have to click the 'Low Resolution') link each time they visit a different page on the site and then come back to the video page.

Gallery