11. Multimedia
This week, we'll explore how to place a number of multimedia file formats on a basic web page. Learning how to compose and edit multimedia files is beyond the scope of this course, though I will provide a process overview of how to bring video from the camera to the web during our class sessions. Our focus for the week, however, is learning how to format XHTML pages for a number of multimedia file formats.
Multimedia Files and Plugins
Early attempts to support multimedia files within web browsers resulted in Netscape formulating the <embed> element for linking such files to a specialized application known as a plugin, which allows the files to be displayed within the browser window. However, the W3Cs never supported the <embed> element and instead favored the <object> element, which was picked up by Netscape competitor Microsoft for support of its proprietary ActiveX technology. Eventually, Internet Explorer for Windows stopped supporting the <embed> element altogether, creating a dilemma for all web developers: "Which element should I use for multimedia?"
Though no absolute resolution of this problem has appeared, most developers use a compromise set of code that incorporates both type of elements, placing the <embed> element within a similarly coded <object> element. Suppose, for example, we wanted to place a QuickTime movie called "chickenrun.mov" on a particular web page. The code for doing so would look something like this:
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="480" width="640">
<param name="src" value="chickenrun.mov" />
<param name="autoplay" value="true" />
<param name="controller" value="true" />
<embed src="chickenrun.mov" type="video/quicktime" width="640" height="480" pluginspage="http://www.apple.com/quicktime/download/" controller="true" autoplay="true">
</embed>
</object>
All the numbers shown in red on the first line of the <object> element are used to call Internet Explorer's ActiveX control for the QuickTime file format, followed later by an <embed> element.
There is much more to embedding QuickTime and other movie files than shown here, but the example above is the basic format that most developers use. For more information on XHTML coding for specific multimedia formats, check out the following sites:
- QuickTime - full set of documentation for developers of QuickTime projects, including information on web-based delivery of various QuickTime formats.
- Windows Media Developer Center - information for developers of Windows Media content. You can also use <embed> elements with WM files.
- RealMedia - this streaming file format requires a dedicated server, but this page covers how to produce such files if you have access to their server technology.
- Flash - Flash files and movies can be served from any standard HTML server. A brief tutorial on posting Flash files on the web after you've created them.
- SMIL - a metalanguage for describing multimedia content on web pages. A brief tutorial on SMIL.
Dreamweaver CS3 and Multimedia
Using inserted objects, Dreamweaver supports most of the multimedia technologies currently used on the web, though as you can see, this support heavily favors the Flash format developed by Macromedia, the parent company of Dreamweaver before it was purchased by Adobe. Before using the Flash commands available in Dreamweaver, take a momemt to learn about the different Flash file formats and how the interact with Dreamweaver:
- Flash file (.fla) - the source file for any project created in Flash. This type of file can only be opened in Flash (not in Dreamweaver or in browsers). You can open the Flash file in Flash, then export it as an SWF or SWT file to use in browsers.
- SWF file (.swf) - a compressed version of the Flash (.fla) file, optimized for viewing on the web. This file can be played back in browsers and previewed in Dreamweaver, but cannot be edited in Flash. This is the type of file you create when using the Flash button and Flash text objects.
- Template file (.swt) - these files enable you to modify and replace information in a Flash SWF file. The files are used in the Flash button object, which lets you modify the template with your own text or links, to create a custom SWF to insert in your document. See our Dreamweaver textbook for more information.
- Element file (.swc) - a Flash SWF file that lets you create Rich Internet applications by incorporating them in a web page. Flash elements have customizable parameters that you can modify to perform different application functions.
- Video file (.flv) - a video file that contains encoded audio and video data for delivery through Flash Player. For example, if you had a QuickTime or Windows Media video file, you would use an encoder (such as Flash 8 Video Encoder, or Sorensen Squeeze) to convert the video file to an FLV file.
Dreamweaver also supports Java Applets and ActiveX with insertion of named media objects, but for QuickTime or other unspecified media, you need to insert the generic Plugin at the bottom of the drop-down list. Or you can simply insert the code example used in the first section of this page.
These are the basic multimedia technologies currently used on the web, but be aware that new development of such technologies occurs at a very rapid rate, and what appears to be a favored application today may well be obsolete tomorrow. Your best bet is to adhere to open standards as much as possible and continually check the prevailing winds of technological change.