Video Streaming with an AJAX Video Gallery Part Three

Welcome to part three of the video streaming tutorial.  In part two we got the JavaScript file including the main AJAX function written and working, and added some CSS to position our player selection buttons and logo's.  This part of the tutorial is going to finish the tutorial with some more CSS to style the AJAX-generated buttons, write the server-side ASP code that returns the list of available files in the chosen format and add a function that plays another video when its button is clicked.  We'll begin with the ASP code.

A Little ASP

As wonderful as our AJAX is, it won’t do anything without the data returned from the server and in order to generate that data, we need some script to run on the server.  ASP provides exactly the functionality we require and can happily run on the server and pass the required data back to the AJAX function.  One simple function in our ASP file will do everything we need.  In a text editor, begin by opening the ASP file and setting the variables the function will need:

Video Streaming with an AJAX Video Gallery Part Two

In part one of this series, we created an initial HTML page and some associated CSS that allowed visitors to our site to select a video clip to watch.  We also created three additional pages (one for each clip) that provided a method of selecting which format the visitor  wanted to watch the video in, giving a choice of either; Windows Media Player, Apple Quicktime or Real Player.  In this part we're first going to look at the CSS needed to layout each of the individual video clip pages, and the JavaScript required to show the embedded player of the visitors choice, before moving on to look at a way of using AJAX to generate a list of other video clips in the same format and display a method for viewing these additional videos.

Some Additional CSS

Open up the videocontent.css file in your favourite plain text editor and add the following selectors to layout the section of the page in which the visitor selects the video format they want to watch the video in.  If you remember, when we coded the HTML, the class and id attributes were already defined.  The buttons used to select the desired player, and the logo's linking to download sites for each of the players are held in a containing div element, and then in a columnar layout.  The container div should be styled as follows using a pretty standard ID selector:

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.

Free Video on how to build a CMS with Advanced HTML Editor 2

Richard shows you how to use Advanced HTML Editor 2 to add and edit articles on your website. You can add your own text, images and markup editing your website has never been this easy!

Get the extension