tag to empty, which removes any previous movie. Then, I set the contents to an
tag whose URL is specified by the movie list.
In this simple example, the movies.xml file is just a flat file with some references to short home movies of mine. Listing 2 shows the file.
Listing 2. movies.xml
When I navigate to the page, I see the something like Figure 1.
Figure 1. The simple movie list page
The movie is at the top of the page, being played by the
Obviously, this system isn't going to scale particularly well to large video repositories, so I need a way to do some searching on the movie list.
|
Back to top |
|
Searchable movie lists
To add search functionality, I need to add a search box, which you can see in Listing 3. I've also added a search input field named q.
Listing 3. Add search functionality
On the key-up event, I specified that the search() method should be called. That search() method is like the Ajax.Request call, with the exception that it now passes along the query string to a page called search.php. The search.php script returns the same XML format as the original, so the code that does the XML parsing doesn't need to change.
I admit that a search() function on key-up is a bit too responsive for my taste. Ideally, the system would wait for a second or so before running the search so that I could finish a complete search text without having the list flicker in the meantime. You can easily implement such behavior by using the window.setTimeout() method.
Listing 4 shows the revised search.php script.
Listing 4. search.php
$v ) {
if ( strlen( $_GET['q'] ) > 0 &&
preg_match( '/'.$_GET['q'].'/i', $v ) ) {
?>
|
At the top of the script, I create an array that holds all the movies. For simplicity's sake, I hard-coded the movies. But in reality, these elements are likely to come from a database of movie listings.
The code then iterates through the list and applies a regular expression of the search query to each movie title. When they match, a tag is output with the URL and the name.
When I start the page and type s, I get the page shown in Figure 2.
Figure 2. The movie query page with a simple query
If I press Delete and type water, I get the page shown in Figure 3.
Figure 3. The movie query page looking for "water" movies
While the point of this article is mainly to show how you could create a front end using Dynamic HTML (DHTML) and Ajax, there's a lot more to creating a video sharing site.
|
Back to top |
|
Video sharing basics
Jumping from the practical to the more theoretical for a moment, let me talk about how to handle some of the trickier video-sharing issues. There are three main issues to cover:
- How to store and stream the video
- How to handle different video formats
- How to get thumbnail images and video information from the uploaded files
Video storage is a real problem?particularly for small applications. Video files are large, so expensive hardware is required to store them. And there are bandwidth charges for feeding them down the wire to your customers. You could buy your own equipment and put it in a hosting facility. Or you could use a service such as S3 from Amazon, which allows you to upload any material (database backups, images, movies, and so on) and feed them out of the Amazon datacenters for a reasonable cost. It's probably worth looking into one of these services before bankrolling a datacenter roll-out.
The next issue?video formats?presents an interesting challenge. Many video formats exist, and not all players handle all formats. In fact, most players handle just their video format of choice. To make it easier on the customer, it's probably best to standardize on a particular format, and then convert all the incoming video into that format. One particularly handy tool for doing that is a command-line application called FFmpeg. Not only can it convert from one video format to another, but it can also take frame snapshots and thus provide a thumbnail of the video before customers view it.
The choice of which video format to standardize on can be complex. Flash video is the clear winner at the moment, but Windows Media?, particularly with the release of Microsoft Silverlight (formerly WPF/Everywhere), is gaining ground. FFmpeg can export almost any movie to the Flash video format, which is compelling. And there are several free and open source Flash movie players that you can easily embed in your site. You can combine those players with the code above to make a complete end-to-end video-sharing solution with an Ajax front end.
But video isn't the only thing going on with the Web: Image sharing is also important.
|
Back to top |
|
Slide shows
Listing 5 shows a simple DHTML-based slide show that sources its data from an XML file.
Listing 5. index.html
The code is based on the Prototype.js JavaScript library. It uses the Ajax.Request object to get the list of images to show. The returned XML code is then parsed to get the URL as well as the width, height, and title of each image. The showSlide() function is then called to get the slide show ball rolling. A timer is set to go off every five seconds to move the show onto the next slide.
The slide show is implemented by having one ![]()
tag for the title. The slide show simply hides the current image and title, sets the source of the image and the text of the title to the new slide contents, and then shows them. If you want something that fades in and out, I recommend using the
Effects classes in the Scriptaculous library, which is built on Prototype.js.
Listing 6 shows the data images file.
Listing 6. images.xml
This one is hard-coded, but you can just as easily generate the XML code using a PHP script. The slide show is shown in progress in Figure 4.
Figure 4. The simple slide show
Note: I previously published a much more elaborate version of the slide show (see Resources for a link). This one differs in that it uses the Prototype.js library and is much simpler in its transitions between slides.
|
Back to top |
|
Conclusion
Sites like Flikr and YouTube show just the tip of the full potential for media on the Web. This article provides some easy implementations of video and image browsing that you can use in your own project. If it works for you, please let me know by joining the developerWorks Ajax forum (see Resources) to talk about your success.
