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: