Embedding Sound and Video Embedding Sound and Video There are two tags that are used to embed multimedia files in web pages<object> and <embed>. The <embed> tag was introduced by Netscape to enable files that require plug-ins to view within a web page. The <embed> tag indicates that Netscape-style plug-ins (multimedia primarily) should be used to view embedded media. Unfortunately, <embed> isn't sanctioned by the World Wide Web Consortium (W3C) and can't be found in the official HTML standard. The other tag, <object>, is officially sanctioned by the W3C. It was originally used by Internet Explorer to allow users to load ActiveX controls within a page. I'll talk about them more a bit later. Since then, browsers that use Netscape-style plug-ins have also added support for the <object> tag. The <embed> tag is only necessary for older browsers that use Netscape-style plug-ins (like old versions of Netscape). Using the <embed> Element Despite the fact that <embed> isn't in the HTML standard, Microsoft and Netscape continue to support it, mainly because many pages out there that still use it. The <embed> tag has no closing tag; however, it does support a number of attributes. Unfortunately, despite the fact that most browsers support <embed>, they only have a handful of attributes in common. The good news is that each web browser ignores the attributes it doesn't understand, enabling you to include as many different attributes as you like. Because of this, it's best to rely on a set of attributes that will work in all cases, and use them religiously, including the others for added value. And, because the <embed> tag won't validate anyway, you don't have to worry about complying with standards with regard to the attributes either. Let's explore the attributes you absolutely need to use the <embed> element. <embed src="a01607av.avi" height="120" width="160" /> The src attribute contains the location of the multimedia file you want to embed in the web page. The height and width attributes specify the dimensions of the embedded file in pixels. There are some tricks to setting the height and width properties properly. If you're presenting video, setting the height and width to the actual resolution of the movie causes the video to become crunched because the controls are displayed in that space as well. Figures 11.8 and 11.9 demonstrate the problem using the <embed> tags that follow: Input <embed src="a01607av.avi" type="video/x-msvideo" height="120" width="180" /> file:///G|/1/0672328860/ch11lev1sec3.html (1 von 16) [19.12.2006 13:49:25] Embedding Sound and Video Output Figure 11.8. An embedded movie that does not include space for the plug-in's controls. Input <embed src="a01607av.avi" type="video/x-msvideo" height="136" width="160" /> Output Figure 11.9. An embedded movie with the proper proportions. file:///G|/1/0672328860/ch11lev1sec3.html (2 von 16) [19.12.2006 13:49:25] Embedding Sound and Video If you leave out the height and width attributes, the browser will determine how much space to reserve for the file. Unfortunately, this causes problems because each browser behaves differently. Internet Explorer 6 will provide too small a space, and only part of the movie will be shown. Mozilla Firefox provides too much space, leaving lots of padding around the movie. In other words, you need to specify a height and width. Table 11.1 summarizes the <embed> attributes supported by Internet Explorer. Table 11.1. <embed> Attributes Used in Internet Explorer Attribute Description align Aligns the element in relation to the web page. Allowable values are absbottom, absmiddle, baseline, bottom, left, middle, right, texttop, and top. This is the equivalent of the <img> tag's align attribute. class Sets or retrieves the class of the element. Used with CSS. height The height of the element. id The ID of the element. Used with JavaScript or CSS. name The name of the element. Used with JavaScript. pluginspage The URL of the page where you can download the plug-in used to view this object. file:///G|/1/0672328860/ch11lev1sec3.html (3 von 16) [19.12.2006 13:49:25] Embedding Sound and Video src The URL of the multimedia file. style Style sheet declaration. title The title of the element. units Sets or retrieves the height or width units. Pixels are the default unit of measurement. unselectable Specifies that the object cannot be selected. Valid values are on and off (the default is off). width The width of the element. Table 11.2 summarizes the <embed> attributes supported by Mozilla Firefox. Table 11.2. <embed> Attributes Used in Mozilla Firefox Attribute Description src The URL file location. type The MIME type of the multimedia file indicated by the src attribute. pluginspage A URL pointing to a web page that has instructions for installing the required plug-in. pluginurl A URL to a Java Archive (JAR) file. align Aligns the element in relation to the web page. Allowable values are left, right, top, and bottom. border The width of a border drawn around the element. frameborder Does not draw a border around the element when set to no. height The height of the element. width The width of the element. units The units used to measure the height and width. Pixels are the default unit of measurement. hidden Hides the element when set to true and displays it when set to false, which is the default value. hspace The horizontal margin around the element. vspace The vertical margin around the element. name The name of the plug-in required to play the file. palette For use in Windows only. foreground makes the plug-in use the foreground palette, whereas background (the default) makes the plug-in use the background palette. In addition to these attributes, additional attributes might be available for specific plug-ins, such as the file:///G|/1/0672328860/ch11lev1sec3.html (4 von 16) [19.12.2006 13:49:25] Embedding Sound and Video Macromedia Flash Player. Finally, you can include the noembed element to provide support for visitors who do not have a web browser that can display plug-ins: <noembed>This Web page requires a browser that can display objects.</noembed> <embed The bottom line on <embed> is that these days it makes no sense to use it alone to embed a multimedia file in a page. It is still used in conjunction with <object> in order to support the widest range of browsers. I'll discuss that technique a bit further on. Using the <object> Element According to the World Wide Web consortium, you should use the <object> element when embedding sound and video (among other things) in web pages. The only catch is you may run into problems if your user is running Netscape Navigator 4 (or an even older browser). If you must support these users, you need to use the <embed> tag along with <object>. To use the <object> element, start with the opening <object> tag and attributes, as follows: <object data="movie.mpeg" type="application/mpeg"> The data attribute is the URL for the source file for your sound or video, and type is the MIME type of the file. Next, include any content you want to display, such as a caption, and close the <object> element with the closing tag, as follows: <object data="movie.mpeg" type="video/mpeg"> My homemade movie. </object> You also can cascade objects so that if one cannot be displayed, the browser keeps trying down the list. <object data="movie.mpeg" type="video/mpeg"> <object data="moviesplash.gif" type="image/gif"> </object> My homemade movie. </object> <object> also uses the param element to initialize any parameters the embedded file might require. The param element is included in the body of the <object> element and does not require a closing tag: <object data="movie.mpeg" type="video/mpeg"> <param name="height" value="120" valuetype="data" /> <param name="width" value="160" valuetype="data" /> file:///G|/1/0672328860/ch11lev1sec3.html (5 von 16) [19.12.2006 13:49:25] Embedding Sound and Video My homemade movie. </object> The preceding code sets the height and width of the embedded object to 120 by 160 pixels. The parameters you supply via the <param> tag depend on the type of object you're embedding. For example, an audio file wouldn't have a height and width. For example, if you use the <object> tag to place a Flash movie on a page, the param elements will be used to specify the movie's URL, whether to play the movie when the page loads, and whether to loop through the movie continually or just play it once. I'll explain which parameters are required by some popular media types later in this lesson. Combining <embed> and <object> As you'll see in the next few sections, you can use <embed> and <object> simultaneously to make sure your page works for the widest possible audience. The key to this approach is to include the <embed> tag within the <object> tag. Here's an example: <object classid="value" codebase="value" height="480" width="512" name="myname"> <param name="src" value="source location" /> <embed filename" height="480" width="512" name="myname" /> </object> Browsers that support <object> will ignore the <embed> tag if it's inside the <object> tag. Browsers that don't support <object> will ignore that tag and use the <embed> tag instead. When you're embedding video or other multimedia content in your pages, you have to decide whether you care more about your pages being standards compliant or reaching the widest possible audience. The <object> tag works Microsoft Internet Explorer, Mozilla Firefox, and other current browsers, but not some old browsers. The <embed> tag fills in the gaps in browser coverage, but if you use it, your pages will not be considered valid. Embedding Flash Movies The Flash author tool can produce the HTML to embed your movies within a page for you, but I want to explain how to create it manually as well. Here's a template for embedding a Flash movie: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash. cab#version=6,0,40,0" width="550" height="400" id="myMovieName"> <param name="movie" value="myFlashMovie.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <embed src="myFlashMovie.swf" quality="high" bgcolor="#FFFFFF" width="550" height="400" name="myMovieName" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> file:///G|/1/0672328860/ch11lev1sec3.html (6 von 16) [19.12.2006 13:49:25] Embedding Sound and Video Notice that Flash uses both the <object> and <embed> elements to embed the animation in a web page. To use this template, you need to set the height and width attributes of the <object> and the <embed> tag to the appropriate size for your movie. You also have to set the value attribute of the movie parameter to the URL for your movie. Finally, you have to set the src in the <embed> tag to that URL, and optionally update the name of the movie in the <embed> tag as well. Table 11.3 contains a full list of <embed> attributes. Table 11.4 contains a list of <object> parameters. Table 11.5 contains a list of attributes that work with both <embed> and <object>. Table 11.3. <embed> Attributes Supported by Flash Attribute Description src The URL file location. Required. pluginspage The URL for the Flash download page. Required. name The name of the movie. You can use this name to access the movie via JavaScript. Table 11.4. <object> Attributes Supported by the Flash Player Attribute Description classid Identifies the ActiveX control (always the same value). Required. codebase Download location for the Flash player (always the same value). Required. movie The URL for the movie. Required. id An identifier for the element that can be used to access it via JavaScript. Table 11.5. Attributes of Both <embed> and <object> Supported by the Flash Player Attribute Description height The height of the movie (in pixels or percentage of window size). Required. width The width of the movie (in pixels or percentage of the window size). Required. align Aligns the element in relation to the web page. Allowable values are left, right, top, and bottom. file:///G|/1/0672328860/ch11lev1sec3.html (7 von 16) [19.12.2006 13:49:25] Embedding Sound and Video swliveconnect True or false value that indicates whether or not to start Java when the plug-in is loaded. (This should be set to false unless you are using FSCommand features.) play True or false value that indicates whether the movie should start playing as soon as the page is loaded. The default is true. loop True or false value that indicates whether the movie should loop (start playing again when it finishes). Defaults to true. menu True or false value that specifies whether the user can access all of the Flash player's contextual menu options when playing a movie. Defaults to false. quality Settings are low, autolow, autohigh, medium, high, and best. For more information, see the Flash documentation. scale Specifies how to handle cases where the movie is a different size than the height and width attributes. showall (the default) preserves the aspect ratio of the movie but sizes it as best it can in the space provided. noborder fills the entire space specified, preserving the movie's aspect ratio and cropping if necessary. exactfit stretches the movie to fit in the space provided, ignoring the aspect ratio. salign Specifies how the movie is aligned in a browser window, typically used with pop-up windows. For more information, see the Flash documentation. wmode Specifies how transparent portions of a Flash movie are handled. Values are window, opaque, and transparent. bgcolor Sets the background color of the Flash movie, overriding the setting in the movie. base Specifies the base URL for the Flash movie. Used by Flash movies that contain references to external files. flashvars Variables passed to the Flash player from the page. Embedding RealAudio and RealVideo Integrating RealAudio and RealVideo files into pages is a bit different than integrating Flash because RealAudio files do not necessarily require any space on the screen. That said, you can write your HTML so that RealAudio controls are integrated into your web page. <object id="RVOCX" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="320" height="240"> <param name="SRC" value="plugin.rpm" /> <param name="CONTROLS" value="ImageWindow" /> <param name="CONSOLE" value="one" /> <embed controls="ImageWindow" console="one" /> </object> As you can see, unlike Flash, RealPlayer uses the src parameter to specify the location of the file to be displayed. The code above will show the video with no controls displayed at all. If you only wanted to show the controls for an audio file (or video file), you would use the following HTML: <object id="RVOCX" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" file:///G|/1/0672328860/ch11lev1sec3.html (8 von 16) [19.12.2006 13:49:25] Embedding Sound and Video width="350" height="36"> <param name="CONTROLS" value="ControlPanel" /> <param name="CONSOLE" value="one" /> <embed src="plugin.rpm" width="350" height="36" nojava="true" controls="ControlPanel" console="one" /> </object> Table 11.6 lists the available attributes for <object> and the parameters (<param name="name" value="value" /> ) for the <object> element. Table 11.6. <embed> Attributes and <object> Parameters Attribute/Parameter Description autostart Sets automatic playback (true or false). backgroundcolor Sets background color (hexadecimal color value or name). center Centers clip in window (TRue or false). console Links multiple controls (yes, name, master, or unique). controls Adds RealPlayer controls (control name). height Sets window or control height (in pixels or percentage). loop Loops clips indefinitely (true or false). maintainaspect Preserves image aspect ratio (true or false). nojava Prevents the Java Virtual Machine from starting (true or false). nolabels Suppresses presentation information (TRue or false). nologo Suppresses Real logo (true or false). numloop Loops clip a given number of times (number). region Ties clip to SMIL region (SMIL region). shuffle Randomizes playback (true or false). src Specifies source clip (URL). width Sets window or control width (in pixels or percentage). Multimedia Techniques Microsoft Internet Explorer offers a few unique capabilities worth mentioning: background sounds and inline video. Note, however, that neither of these techniques is part of the HTML standard. You can use style sheets to hide <object> elements on your pages, so there's no need to use this technique to include background audio on a page. You can also include inline video on a page using <object>. I'm just describing these elements so that you know what they are if you see them. file:///G|/1/0672328860/ch11lev1sec3.html (9 von 16) [19.12.2006 13:49:25] Embedding Sound and Video Including Background Sounds Internet Explorer supports an element that loads and plays audio files in the background. These sound files load when the page loads, and they play automatically. Because no visual effect is created, there will be no indication that a sound is playing unless the users have speakers and they're not muted. The <bgsound> element is used as follows: <bgsound Use the loop attribute to repeat the sound multiple times. If the value of loop is a number, the sound is played that number of times. If loop is 1 or infinite, the sound will repeat continually until the visitor leaves the page. <bgsound src="ElevatorMusic.wav" loop="-1" /> Explorer supports three different formats for inline sounds: Sun's popular AU format, Windows WAV files, and MIDI files with a MID extension. Tip If you include sound on a page, be sure to provide a way for users to turn it off. If they spend any time at all on your page, the sound might start to irritate them. Even better, don't use auto play to start it without permission. Let them control the audio themselves. Inline Video with dynsrc You can integrate video clips (AVI or MPEG) into web pages displayed in Microsoft Internet Explorer 4 and above by using the dynsrc attribute in the <img> element, as in the following simple syntax: <img dynsrc="a01607av.avi" loop="2" start="fileopen" /> In the previous line of code, Internet Explorer will play the video clip, indicated by the dynsrc attribute, two times after the web page finishes loading. The loop attribute specifies the number of times to play the video clip, with one time being the default value. To play the clip indefinitely, use 1 instead. The start attribute defines when the video clip starts playing. You can choose from fileopen, which is the default, or mouseover, which plays the video when a person moves her mouse over the video. Because you're using the <img> element, you can use other <img> attributes, such as alt, align, border, height, width, and so on, to format the video clip. To make this compatible with other browsers, you should use the src attribute to designate a static GIF or JPG image that will be displayed in place of the video. The code would resemble the following: file:///G|/1/0672328860/ch11lev1sec3.html (10 von 16) [19.12.2006 13:49:25] . Embedding RealAudio and RealVideo Integrating RealAudio and RealVideo files into pages is a bit different than integrating Flash because RealAudio files do not necessarily require any space on. multimedia file indicated by the src attribute. pluginspage A URL pointing to a web page that has instructions for installing the required plug -in. pluginurl A URL to a Java Archive (JAR) file. align Aligns. files load when the page loads, and they play automatically. Because no visual effect is created, there will be no indication that a sound is playing unless the users have speakers and they're