Video Streaming with an AJAX Video Gallery Part One

There's no denying that multimedia content enriches websites in both fun and business environments; just look at the recent success of sites like Youtube for example.  Video-enabled websites draw in visitors and help to ensure repeat-visits and an eager consumer base.  Streamed content can improve almost any website; you may have a small blog that your friends use to keep up with your day-to-day activities.  You could stream small videos of a recent snow-boarding trip to your friends without them having to download lots of data.  At the other end of the scale, you may own a DVD rental website.  Providing short trailers of the DVDs means that members don’t have to leave your site (and potentially forget to return) to watch a movie trailer and decide whether or not they want to rent the DVD.  The list of uses is endless, and the benefits are many so maybe it's time to video enable your site.

This tutorial will be the first in a series of articles, with this part discussing a mixed bag of technologies; in previous articles I've focused on three to four complimentary languages, such as HTML, JavaScript and CSS, with occasional XML drop-ins as and when required.  With the subject of streaming media, and AJAX however, there is a lot more that needs to be considered, such as encoding your video files for streaming, delivery of your media, the server-side script that interacts with the web page via AJAX as well as all of the associated HTML, CSS and JavaScript.  What I intend to do is walk through the process of enabling streaming media from scratch, looking at everything I need to do along the way to achieve it.  Some things will be looked at in less detail than others and not everything will be applicable to everybody.