Jump into the stream

One of the earliest mantras chanted by web evangelists was “information wants to be free”. The idea was, and still is, that the Internet should be an environment where a liberal exchange of information, data and content could and should be allowed to take place.
There was a while in the late 1990s when it looked like this edict might be forgotten: a stampede of commercial initiatives made it seem like the web was moving towards a pay-per-view model. It’s gratifying, then, to see that the most successful initiatives of the 21st century have all been in the spirit of the early web. Open source software thrives, blogging and Wiki websites have led to a boom in free content, and there’s an increasing number of free media archives opening on the web.
The pioneer is the Internet Movie Archive at www.archive.org. This vast repository hosts everything from fan films to old public information movies. There are about 23,000 items to choose from. Bidding to catch up is a joint enterprise between the BBC, British Film Institute and Channel Four. The Creative Archive (creativearchive.bbc.co.uk) uses a licensing system inspired by open source software to distribute video clips. The aim is to provide a free stock footage service for budding movie-makers. With all this material to choose from, it’s easier to create video for the web than ever.
Video over broadband
Many web developers have been reluctant to include video in their pages, but broadband is changing that. The download speeds of more than half the UK’s web users mean it’s possible to handle digital video’s bandwidth-hungry files.
The development hours that companies spent trying to crack the problem of distributing video over low-bandwidth connections weren’t in vain. Streaming protocols and compression features became a standard part of the most popular file formats to compensate for slow network speeds – now they make sure that video over broadband snaps to the screen at resolutions that are worth watching.
One of the main problems with including video in web pages is still their size. Broadband might give us faster bandwidth, but that doesn’t solve the problem of playback over a network. Thankfully, the protocols created to make video distributable over low-bandwidth connections scale up to high-bandwidth links.
When you open a streaming media file, the application playing it begins to download and temporarily store the first part of the file. This process, called buffering, carries on until enough of the file has been downloaded to allow continuous playback. The file then begins to play as the rest of it is downloaded. When a section of the file has been played, it’s erased from the buffer, making room for the remaining parts of the file. All the media formats and players we look at here have built-in streaming features – you don’t have to set a thing.
There are dedicated media streaming server tools that are used for heavy-duty video and other media. The BBC, for example, uses RealAudio streaming servers to allow live streaming of its radio programmes and to provide its Listen Again service via www.bbc.co.uk/radio.
In most cases, converting – or, more properly, ‘encoding’ video for the web – can be done using free tools. The most technically demanding part of the process comes when choosing which format to use. There are a few to choose from, and each comes with its own advantages.
Real Networks took the lead in streaming compressed multimedia with RealVideo several years ago. The quality of video playback is noticeably less consistent than on some other formats, but a combination of good marketing, free distribution of the basic player and free development tools keeps Real close to the top of the heap. It’s a truly cross-platform format too, which can’t be said for most other formats. Real Producer is the platform’s encoding tool. You can downloads the free version from www.realnetworks.com/products/producer/basic.html.
Windows Media Video has taken over from RealVideo in the popularity stakes, thanks to free tools and the ubiquity of the player on desktops. In a situation that’s reminiscent of the browser wars between Netscape and Internet Explorer, Windows Media Player has grabbed a degree of access to the market that makes it difficult to ignore. Not only does Microsoft provide free editing and encoding tools for the format, but Windows Media Player is integrated into the Windows operating system as a key component. Microsoft does make a limited-capability Windows Media player for Mac OS X, but Linux users must rely on third party players.
QuickTime is Apple’s cross-platform media format and is found widely on the web. Unlike with other formats, though, there’s no free encoder. You can upgrade the free Windows player to QuickTime Pro, though. This will enable you to convert files for $29.99 (about £19.50).
For true cross-platform compatibility and the widest choice of conversion tools, we need to turn to the public domain. MPEG video protocols aren’t owned by a single company and can be incorporated into any software. There are several different versions, with most embedded video on the web using MPEG-2, an established standard that’s recognised by the Real, Windows Media and QuickTime players. The newer MPEG-4 offers more efficient compression that makes playback at higher resolutions possible.
Coming up quickly on the inside is the DivX codec, based on the MPEG-4 standard – as is Apple’s QuickTime 7. Even though DivX encoding produces higher-quality results and smaller files than older standards, you’re more likely to find it used as a method for compressing full-length movies instead of web embedded clips. As it’s a codec – a compression protocol, not a format in its own right – DivX is most often used to encode and compress .AVI Windows Video files. Windows Media Player and QuickTime Player can play back DivX-encoded files when the proper codec is installed on your machine. It’s available for free from www.divx.com.
Flash contender
While these dedicated formats have been tussling with each other over market share for years, a newer contender is steadily toppling them all. Macromedia introduced video import tools into Flash MX, and now those features have been significantly improved in Flash 8, with a new, higher-quality compression protocol – the On2 VP6 codec. Movies can be edited as they’re being imported, have special effects and interaction added to them in Flash, and can then be exported in Flash Video (FLV) format.
Flash Player is undoubtedly the web’s most popular plug-in, extending the abilities of browsers. Macromedia statistics claim that 98 per cent of all web users can view Flash files on any platform. For web developers, FLV is a great prospect because it allows you to design the look and feel of the playback mechanism with little coding. While Windows Media Player’s customisation capabilities are cumbersome and QuickTime’s are barely acknowledged, you can create Flash-based interfaces for your video clips in either Flash 8 or Dreamweaver 8. The program even embeds the finished file into a web page for you.
The latest versions of the Shockwave Flash plug-in are also capable of playing MP3 audio, so you can embed longer audio sequences into pages as a part of a Flash movie with relative ease. You can also use Flash to loop shorter sections of audio, or even combine multiple loops to create a more complex soundtrack. In short, Flash may be the best all-round video delivery system available for the web.
Dreamweaver 8 includes import options that allow you to add video playback controls to Flash video files quickly and easily. The first step is to encode the source material into Flash Video format, using the Flash Video Encoder shipped with Macromedia Studio. The higher the quality of the original file, the better the result will be. The footage can be cropped, resized and compressed using a menu-driven interface, then exported to FLV.
Dreamweaver 8 has a new Flash Video item under Insert - Media. Use this to browse for FLV files on your hard drive, then easily insert the video into a page in Dreamweaver, along with playback controls selected from the available templates.
You’ve even more control over the look of the finished product if you build your own playback console in Flash 8. The import process for video files in Flash 8 is similar to Flash Video Encoder, but after the set-up stage, you can choose playback controls from over 40 ready-made skins. The resulting file can be published in Shockwave Flash format and inserted into any web page, or published to an HTML file from within Flash.
Whether you choose a more traditional video encoding format or go down the Flash route, the final hurdle is distributing the converted file through a web page. We’ll assume you’re using standard web space, with no fancy media streaming capabilities: these are still rarely part of a standard web-hosting package. You have two choices: the first, and by far the easiest option, is to simply place a link to your movie file from the page. All the players we’ve mentioned install themselves as helper applications in your browser. Any of those formats, including MPEG video, will launch automatically in the default or associated player, or in a new window in your browser. Embedding video directly into web pages, which will allow it to appear alongside text and graphics, is trickier. HTML often gives you multiple ways of achieving the same result. As we’re keenly aware, browser manufacturers have added their own proprietary code – leading to a situation where different browsers solve the same problem in different ways. This is definitely the case with inline video.
For example, Microsoft introduced the <img dynsrc> tag in Internet Explorer 4, which can be used to play back either video or sound files – but no other browser supports it. Netscape’s preferred method was the <embed> tag, a more generic container for plug-in content. While <embed> is supported by all current browsers, and is the easiest method to configure, it is deprecated in HTML 4.01 and all versions of XHTML, the latest HTML standard.
These days the smart money is on the <object> tag. This is more or less the same as <embed>, but it’s endorsed by the World Wide Web Consortium, the committee that decides web language standards. The other methods are likely to be phased out over time.
The problem is that in using the <object> tag, you need to specify a target media player for Internet Explorer using its ‘classid’ number – and not all media players work on all platforms. This is a major reason why using Flash Video is such a great idea for developers. You’re able to embed video in a drag-and-drop environment, tweak advanced features, define your own player skin and – guarantee that it will work on a majority of browsers. And in web development, that’s one of the best recommendations you can get. Better still, you don’t necessarily need to be a Flash genius to use it.
One of the easiest ways to add content to your site can be found at www.wimpyplayer.com. There are three basic tools on offer here, the Wimpy Button (a simple Play button that cues an MP3 file on demand), a general MP3 playlist-based-player, and Wimpy A/V, which works as a mix of both. You can create video playlists for your site, or point to one single file as and when required, safe in the knowledge that it’ll download and play without your visitors getting a headache. The only slight catch is that you’ll need a converter, and if you don’t have a copy of Flash, you may have to pay a little bit extra for a third-party tool that does the same thing. Still, a few pounds now could well save you hours of work later on.
There are standards governing support for embedded media objects in web pages, but they’re not well implemented in the more popular browsers. Because of this, the code here is designed to work in Internet Explorer running Windows Media Player, but it should also work on older systems and different browsers. Start by using the <object> tag to define a player and load the video file testmovie.mpg, which is already on our web server.
<object classid=“clsid:6bf52a52-394a-11d3-b153-00c04f79faa6” width=“352” height=“288” id=“mplayer” />
<param name=“showcontrols” value=“true” />
<param name=“URL” value=“testmovie.mpg” />
<param name=“autoStart” value=“true” />
Below that, we add legacy code so that it works on older players and other browsers:
<embed src=“testmovie.mpg” width=“352” height=“288” autostart=“true” showcontrols=“true”>
</embed>
</object>
The result is that the video is actually embedded twice. The <object> tag is specifically for a Windows set-up running Internet Explorer. Nested within the <object> tag is the legacy <embed> tag. Try opening this code in Firefox or in Safari on a Mac, and it’s the <embed> tag that’s used – the <object> tag is ignored. Note that with the <embed> tag, we don’t need to specify a player: because we’re using MPEG video, it should open in whichever media player the user has installed.

