Embedding Sound and Video <img src="a01607av.gif" dynsrc="a01607av.avi" loop="2" start="fileopen" /> Internet Explorer will ignore the value of the src attribute as long as the video supplied by dynsrc is valid. Task: Exercise 11.2. Embedding a QuickTime Movie For your second exercise, you'll try your hand at embedding a QuickTime movie in a web page. QuickTime is a video format created by Apple. Apple recommends that you use the combination of the <object> and <embed> tags that I've discussed in this lesson. For starters, create or open a web page template similar to the following: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title></title> </head> <body> </body> </html> From here, title the page and add a <div> element that you will use to center everything on the page. Next, add a heading that appropriately describes the video and a title for the video: <div align="center"> <h1>Apollo 17 Videos</h1> <p>Astronauts placing the flag on the Moon</p> </div> Now it's time to add the video itself. Start with the <object> tag. Here's the code: <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="136" width="160"> <param name="src" value="Apollo_17_Flag.mov" /> <param name="autoplay" value="true" /> <param name="controller" value="true" /> <embed src="Apollo_17_Flag.mov" height="136" width="160" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/" /> </object> file:///G|/1/0672328860/ch11lev1sec3.html (11 von 16) [19.12.2006 13:49:25] Embedding Sound and Video You should recognize this code from what you've seen previously in this lesson. The classid and codebase for QuickTime are unique to that plug-in, as is the plug-ins page specified in the <embed> tag. You should also note that I set the height of the movie to 136. The movie is actually 120 pixels high, but the QuickTime player includes controls that are 16 pixels tall, so I added 16 pixels to the height of my movie. If I hadn't done so the controls would be cut off. I used two parameters that are specific to QuickTime autoplay and controller. I set the autoplay parameter to true so that the movie would start playing as soon as the page is displayed, and I set controller to true so that the video controls would be shown (this is the default). Had I set controller to false, the controls would not appear and I could have set the height attributes to 120. To see whether this works, test the page using your web browser. When you're satisfied, add a final piece to the page that will show people where to get the QuickTime plug-in if they need it. Because this is the last element on the page, remember to close the <div> with the end tag. <p>Apple <a href="http://www.apple.com/quicktime">QuickTime</a> is required to view this movie. <a href="http://www.apple.com/quicktime"> <img src="qt7badge_getQTfreeDownload.gif" border="0" align="absmiddle" width="88" height="31" /></a></p> When it's all put together, the source code for your web page (shown in Figure 11.10) should look like this: Input <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Apollo Multimedia Archive</title> </head> <body> <div align="center"> <h1>Apollo 17 Videos</h1> <p>Astronauts placing the flag on the Moon</p> <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="136" width="160"> <param name="src" value="Apollo_17_Flag.mov" /> <param name="autoplay" value="true" /> <param name="controller" value="true" /> <embed src="Apollo_17_Flag.mov" height="136" width="160" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/" /> </object> <p>Apple <a href="http://www.apple.com/quicktime">QuickTime</a> is required to view this movie. <a href="http://www.apple.com/quicktime"> <img src=" qt7badge_getQTfreeDownload.gif" border="0" align="absmiddle" width="88" height="31" /></a></p> </div> </body> file:///G|/1/0672328860/ch11lev1sec3.html (12 von 16) [19.12.2006 13:49:25] Embedding Sound and Video </html> Output Figure 11.10. Embedded QuickTime movies use special attributes created by Apple. [View full size image] Table 11.7 summarizes the attributes that QuickTime supports. Table 11.7. Attributes/Parameters Supported by QuickTime Attribute Description autohref Can be set to true or false (default false). Starts loading the URL specified in the href attribute immediately if true. autoplay When TRue, plays the movie when the plug-in estimates the clip can be played without waiting for more data ( true or false). bgcolor Specifies the background color of any space not taken up by the movie. QuickTime 6 accepts colors specified using hexadecimal notation or a color name. file:///G|/1/0672328860/ch11lev1sec3.html (13 von 16) [19.12.2006 13:49:25] Embedding Sound and Video cache When true, the browser caches movies, resulting in the browser replaying a movie from its cache rather than downloading again. Supported by Netscape Navigator 3 and later only ( TRue or false). controller When TRue, makes the movie controller visible. Sixteen pixels should be added to the height of the movie when the controller is shown and the height attribute is used (true or false). correction Applicable to QuickTime VR only (none or full). dontflattenwhensaving Saves the movie without flattening (no value). enablejavascript If this is set to true, you'll be able to control the QuickTime plugin using JavaScript on the page. endtime Defines the last frame of the movie (time in hours:minutes: _seconds:frames). fov The initial field-of-view angle for QuickTime VR movies (integer between 8 and 64). goto Same as qtnext. height Required. Defines the height of the region in which to display the movie. If the movie controller is visible, add 16 to the movie height to reach the total height required (in pixels). hidden Hides the movie, and really is only useful for background sound (no value). hotspotn Enables hotspots in a VR panorama where n is the hotspot ID (URL). href Links to another web page or movie (URL). (See the target attribute.) kioskmode When true, no pop-up menu is available for the movie and you cannot save it by dragging and dropping it ( true or false). loop When TRue, the movie plays in an infinite loop. When set to palindrome, the movie will play alternately forward and backward ( true, false, or palindrome). movieid A numeric ID (integer). moviename The movie name (text). node Sets the initial node for multinode QuickTime VR movies (integer). pan Sets the initial pan angle for QuickTime VR movies (integer from 0 to 360 degrees). playeveryframe When set to true, audio tracks are turned off and every frame of the movie is required to play, even if that forces a slower frame rate ( TRue or false). pluginspage The URL to the QuickTime download page. You should set this to http://www.apple.com/quicktime/download/. file:///G|/1/0672328860/ch11lev1sec3.html (14 von 16) [19.12.2006 13:49:25] Embedding Sound and Video qtnextn Identifies the URL for a movie to load and play when the current movie finishes. The number n can be an integer from 1 to 255 and defines the index of the URL in the playlist. The number n is the index of the next qtnext URL to load (URL or goton). qtsrc Forces a web browser to use the QuickTime plug-in. The URL overrides any value in the src attribute (URL). qtsrcchokespeed Specifies the data rate of a movie, regardless of the actual connection speed (number). qtsrcdontusebrowser Instructs the plug-in to load the movie using its own internal methods rather than using the browser, thus preventing caching. scale tofit scales the movie to the dimensions set by the height and width attributes. aspect scales it to fit this box while maintaining the original aspect ratio of the movie. A number scales the movie by that ratio ( tofit, aspect, or a number). src Sets the URL of the movie (URL). starttime Sets the first frame of the movie (time in hours:minutes:_ seconds:frames). target If set to quicktimeplayer, launches the QuickTime Player to play the movie specified in the HRef attribute. If set to myself, plays the movie specified in the HRef attribute in the player embedded in the page. targetn Used with hotspot and HRef. Sets the target for links that use the hotspot or href attribute. The number n corresponds to the hotspot number (name of a valid HTML frame). targetcache Caches the movie that is targeted by another movie (TRue or false). tilt Sets the initial tilt angle for QuickTime VR movies (integer). type Defines the MIME type of the movie. If the movie is visible and has width and height values, type must be included. This attribute is supported by Netscape Navigator 2 or later only (MIME type). volume Sets the initial audio volume. The default is 100 (integer from 0 to 100). urlsubstitute Accepts two strings separated by a colon. In all URLs specified in the HRef attribute, or sprite or hotspot URLs, it replaces the first string with the second. So, "foo:bar" would replace any instance of foo in a URL with bar. width Sets the width of the display area for the movie (in pixels). Note QuickTime VR enables the author to create movies with a 360-degree view of an object that the user can pan through using the QuickTime viewer. file:///G|/1/0672328860/ch11lev1sec3.html (15 von 16) [19.12.2006 13:49:25] Embedding Sound and Video file:///G|/1/0672328860/ch11lev1sec3.html (16 von 16) [19.12.2006 13:49:25] Sound and Video File Types Sound and Video File Types I challenge anyone to come up with a complete list of the audio and video formats currently in use today! There are so many that it's not productive to survey all of the different multimedia file types, their extensions, and MIME types. So, I'll just cover the most popular ones, or at least the ones you might be inclined to include in your web pages. Before I list them, however, it would be useful for you to understand what factors to consider when choosing a multimedia format. By this, I mean sound or video quality, the size of the final file, how many plug-ins or players are compatible with the format, and how readily available the file format is. The quality of sound and video files depends primarily on the original sampling rate, number of bits used per sample, and the number of channels. The sampling rate is the number of times per second the sound or video is sampled or measured. This value is represented in thousands of cycles per second or kilohertz (KHz). Imagine yourself walking through a room and being able to open your eyes only once every five seconds. Do you see how that might be dangerous? Now imagine yourself opening and closing your eyes every second. You get a much better picture of what is around you and a closer approximation of reality. It's the same with sampling rates: The faster the sample, the closer the sound or video will represent the original recording. The only problem with this is that when you increase the number of times you sample per second, the amount of data quickly becomes voluminous. The number of bits you use determines the fidelity of the sound. An 8-bit sample, for example, can measure 256 discrete values, whereas 16-bit samples measure more than 65,000 values. The more bits you use, the closer you come to the actual pitch of a sound or the color in a video clip. The number of channels refers primarily to audio files, where you can have mono (one channel) recordings, stereo (two channel), and even more. Having more channels enriches the sound and makes for a more enjoyable experience, but again, at the price of file size. Six audio file types are in common use on the Web today, each with its own unique advantages and drawbacks. ● Musical Instrument Digital Interface (MIDI) files are synthesized rather than recorded sound. The file sizes are small; however, because you can't play back recorded sound, MIDI plays a niche role. (In fact, MIDI files can be so grating to listen to that you should probably never use them in a web page at all.) ● MP3 audio offers four types (or layers) of sound files and is very popular because of MPEG's widespread acceptance as an audio and video format. MP3 audio is by far the most popular and common format for MPEG audio because it can compress audio files very efficiently. MP3 remains the more popular format, and is supported by devices ranging from portable audio players like the iPod, to DVD players, to car stereos. MP3 files can also be streamed, which means that they can be played as they're being downloaded, and sites can provide a constant stream of MP3- encoded audio to act as an Internet radio station. ● Waveform (WAV) files originally were created by Microsoft and IBM, but can be played by nearly any audio program. WAV files are popular for small sound clips. Larger files are generally stored in MP3 or another format. ● Windows Media Audio (WMA) files are supported by Microsoft's Windows Media Player and anyone who licenses the formats. WMA is a format that's designed to compete with MP3, and offers both quality and compression better than MP3. There are actually a number of different file:///G|/1/0672328860/ch11lev1sec4.html (1 von 3) [19.12.2006 13:49:26] Sound and Video File Types formats that live under the WMA banner, including a straight MP3 competitor, a lossless audio format for distributing music purchases, and a compression scheme that's designed for speech rather than music. WMA files can be protected using a DRM scheme created by Microsoft that prevents the files from being shared freely. ● AAC audio files are compressed using the Advanced Audio Coding format. AAC is another MP3 competitor, and is the default audio format for Apple's iTunes music player. Audio tracks purchased through the iTunes Music Store are encoded using AAC, and are protected by a DRM scheme that prevents them from being shared freely. AAC is the encoding format behind the MPEG 4 audio format. ● RealAudio is an audio format designed for streaming. It's generally associated with Real Networks's line of media players. Unlike the other formats listed here, it sacrifices quality for compression so that even users with low bandwidth can receive live audio feeds over the Internet. Table 11.8 summarizes the popular audio formats. Table 11.8. Common Audio File Formats Name Extension(s) MIME Type MIDI MID, RMI audio/mid Waveform (WAV) WAV audio/wav MPEG Audio MP2, MP3 audio/x-mpeg RealAudio RA, RAM audio/vnd.rn-realaudio Windows Media WAM audio/x-ms-wma AAC M4, AAC audio/aac The common video types available are AVI, MPEG, and QuickTime, and are described in the following list: ● AVI, which stands for audio/video interleaved, is a very popular Microsoft Windows video format. It's very widely supported. AVI files can be encoded using any one of a number of formats, so users must not only have an AVI player on their computer, but they must also have the codec necessary to view a file installed a well. ● MPEG video is used by things such as satellite television and digital cable. It's also a popular format for distributing video over the Internet. ● QuickTime video is proprietary to Apple. However, there are QuickTime players available for both the Mac OS X and Windows. ● Windows Media Video is the counterpart to Windows Media Audio. There are two Windows Media Video schemes. The first is a format designed for streaming and distributing video over the Internet; the second is a professional format designed for storing high-quality video for broadcast or archival. ● RealVideo is a format designed for high compression and streaming to Real Networks's media players. ● Flash Video is video that's embedded in Flash movies. The advantage of this approach is that the only dependency is the Flash player, which is already included with most browsers. The controls for video playback are also built into the Flash movie, so there's less confusion when it comes to figuring out what sizes to use when embedding the movie in a web page. file:///G|/1/0672328860/ch11lev1sec4.html (2 von 3) [19.12.2006 13:49:26] Sound and Video File Types Table 11.9 summarizes these video formats. Table 11.9. Common Video File Formats Name Extension(s) MIME Type Audio/Video Interleaved AVI video/x-msvideo MPEG MPEG, MPG video/mpeg QuickTime MOV, QT video/quicktime Windows Media WMV video/x-ms-wmv RealVideo RV video/vnd.m-realvideo Flash Video SWF application/x-shockwave-flash Another factor you might want to consider is whether a particular file type is streamable. This means it can be played as it's being downloaded. At one time, RealAudio and RealVideo were the two main streamable audio and video formats. These days, though, there are players for many file types that allow the files to be streamed. For example, many MP3 players allow MP3s to be played as they're downloaded, and QuickTime files are also streamed to the player. When you're choosing a multimedia format, you should strongly consider one that supports streaming. file:///G|/1/0672328860/ch11lev1sec4.html (3 von 3) [19.12.2006 13:49:26] Of Plug-Ins and Players Of Plug-Ins and Players Plug-ins are external programs that can be launched within your browser. They enable you to add capabilities to your browser without adding new functionality to the browser software itself. Plug-ins are often installed as part of a larger standalone application. For example, the QuickTime Player is a standalone application used to play videos, listen to audio files, and view images, but it also installs plug- ins that enable you to view QuickTime files in your browser. On the other hand, Macromedia's Flash Player exists only as a browser plug-in. It simply enables you to view Flash animations within web pages. Plug-ins originated with Netscape 2.0. Internet Explorer uses ActiveX controls, which provide similar functionality, but work differently. The advantage of the Internet Explorer approach is that new ActiveX controls can be downloaded and installed without closing the browser when you encounter a file that requires a control in order to be viewed. I'm lumping all of these under the general-purpose label of plug-ins, but the approach differs between the two browsers. Mozilla Firefox uses plug-ins just like its ancestor, Netscape Navigator. As you learned earlier today, the problem with multimedia files that require plug-ins is that if you use them in your web pages, your visitors must have the correct plug-in installed in order to view them. Visitors who don't have your plug-in will get empty space or broken icons on your page where the multimedia should be or, in the case of Internet Explorer, be prompted to install the appropriate control. To further complicate the matter, some plug-ins are available only for some platforms. The big four plug-ins are Windows Media Player, which is bundled with the latest versions of Windows; QuickTime, which is native to Macintosh but is available for Windows as well; RealPlayer, which is also available for Windows and Mac OS, and Flash Player, which is installed with Microsoft Internet Explorer. They each support their own proprietary formats, which generally only they can play, and except for Flash, they can also all play the common audio and video formats. When you have more than one of these applications installed, they sometimes fight over which of them gets to play the types of files that they have in common. Windows Media Player The Windows Media Player, available at www.microsoft.com/windows/mediaplayer, is included as part of the Windows operating system and can play many multimedia file types. It also offers a number of other features, such as the capability to copy songs from CDs, burn them to CDs, and maintain a media library. Version 10, shown in Figure 11.11, is currently available, but only for users of Windows XP. Users of Windows 2000, Windows Me, Windows 98 SE, and Mac OS X can use version 9. Windows 98 users can install version 7.1. If you're using Windows NT 4.0 or Windows 95, you must stick with Windows Media Player 6.4. Figure 11.11. The Windows Media Player can play MP3s and other popular multimedia formats. [View full size image] file:///G|/1/0672328860/ch11lev1sec5.html (1 von 5) [19.12.2006 13:49:27] . streamable. This means it can be played as it's being downloaded. At one time, RealAudio and RealVideo were the two main streamable audio and video formats. These days, though, there are. audio/x-ms-wma AAC M4, AAC audio/aac The common video types available are AVI, MPEG, and QuickTime, and are described in the following list: ● AVI, which stands for audio/video interleaved, is a very. functionality to the browser software itself. Plug-ins are often installed as part of a larger standalone application. For example, the QuickTime Player is a standalone application used to play