34.4. Adding Video to an HTML DocumentThis section looks at the ways video files can be linked to or embedded within an HTML document. 34.4.1. A Simple LinkLike audio, downloadable video files (AVI, MPEG, Windows Media, and QuickTime) can be linked to HTML documents using the standard anchor (a) element: <a href="video.mov">Check out the video (1.3MB)</a> When the user clicks on the link, the browser looks at the file type (as defined in the filename suffix) and launches an external player application or uses a plug-in to play the movie right in the browser window. Which player it uses depends on the file format and how that user has the browser configured, so it is out of the control of the web page designer. When linking to media, it is good form to provide an indication of the file size so users with slower connections can make the decision whether to click. 34.4.2. Streaming VideoAs in audio, streaming media in the RealMedia (.rm) and streaming Windows Media (.asf) formats are added to web pages via linked or embedded reference files (also called metafiles). The process, covered in detail at the end of Chapter 33, is exactly the same for video as for audio. 34.4.2.1. Windows MediaTo link to a Windows Media Video file for download and playback, create a link directly to the video file: <a href="movie.wmv">See the movie</a> To link to a streaming Windows Media file for unicasting (a single stream triggered by a user request), make a link to an active stream redirector file (.asx). <a href="streamingmovie.asx">See a streaming movie</a> The content of the .asx file is the location (URL) of the actual movie and looks like this: <ASX version="3"> <Entry> <ref href="path/streamingmovie.asf" /> </Entry> </ASX> For multicasting (a publisher-controlled broadcast of a single stream that is viewed by many users simultaneously), it is recommended that you generate code using the tools and wizards provided by the Windows Media Services program. 34.4.2.2. RealMediaIn brief, to link to a RealMedia movie, create a link to a RealMedia metafile (.ram) as shown in this example: <a href="movie.ram">Link to the streaming movie</a> The metafile is a small text-only file that contains only the URL for the RealMedia file (suffix .rm). When the user clicks the link, the browser accesses the metafile, which launches the player and passes it the URL of the actual media file: pnm://domainname.com/movie.rm 34.4.3. Embedded QuickTime MoviesIn addition to simply linking to a QuickTime movie, you can place the player right in the web page like an image. The QuickTime plug-in is required to play .mov files inline, but it is bundled with Internet Explorer, Netscape, and Safari and is supported Firefox, Opera, and most other browsers, making it a relatively safe and cross-platform method for putting a video right on a page. To place a QuickTime movie on a web page so that it will be supported by all browsers (including IE), it is necessary to use both the object and embed elements. Be aware that embed is a nonstandard element, and will cause your document not to validate. Unfortunately, at this time, to take advantage of the full functionality of the QuickTime plug-in player, the embed element is the only option, because there is no method for passing parameters to the player using object alone.
This is the markup used in common practice for placing a .movfile that is 240 x 180 pixels on a web page for cross-browser compatibility. One day, there will be a standards-compliant embedding method that works with the QuickTime plug-in player, but for the time being, the embed element is required for all but the default player settings. By default, the movie is displayed with a small controller on its bottom edge for controlling playback. The movie will start playing automatically unless autoplay is set to false, as is shown in this example. The required markup is in bold. <object class width="240 " height="196 " codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param name="SRC" value="movies/vacation.mov " /> <param name="AUTOPLAY" value="false" /> <embed src="/books/4/439/1/html/2/ movies/vacation.mov " width=" 240 " height=" 196 " autoplay="false" pluginspage= "http://www.apple.com/quicktime/download/"> </embed> </object> The classid attribute in the object element calls in an ActiveX control in Internet Explorer that plays QuickTime movies. The codebase and pluginspage attributes function similarly in pointing to the location where the QuickTime plug-in is available.
34.4.3.1. Attributes and parametersThe embed element has a number of attributes for controlling various aspects of playback and display. These attributes are recognized by every browser that supports the embed element and are supported by the QuickTime plug-in as well. These attributes and their values are provided to the object element using name/value pairs in the param elements. Notice in the example that the false value of the autoplay attribute in embed is repeated as a param element where name="autoplay" and value="false". The attributes that are part of the definition of the embed element are listed here. The attributes are described as they apply to QuickTime movies. They may have other functions for other media.
34.4.3.2. Special QuickTime attributesThere are dozens of specialized attributes that are recognized by the QuickTime plug-in. The list below includes only a few of the most common. A complete list is available online at www.apple.com/quicktime/tutorials/embed.html.
34.4.4. Embedding Windows MediaWindows Media movies may also be embedded on a web page. The minimal markup for embedding Windows Media is quite simple, but it can get complicated quickly when taking advantage of scripting features, custom buttons, and so on. This section covers just the basics. Embedded movies are played in Internet Explorer (Windows) using an ActiveX control and in other browsers using the Windows Media Player plug-in. Recently released Gecko-based browsers (Netscape Navigator 7.1 and Firefox 1.0) also now support the ActiveX control. The basic markup for embedding Windows Media is shown here. <object height="280" width="320" class> <param name="URL" value="movies/europe.wmv" /> <param name="autoStart" value="false" /> <param name="UIMode" value="full" /> </object> The classid attribute in the object element specifies the ActiveX control by its identifying number. The value beginning with clsid:6BF... is used with Windows Media Player Version 9 and 7. It is incompatible with earlier versions that use a different clsid. This example uses these three common parameters:
34.4.4.1. Browser supportThe downside to embedding Windows Media is that you have to jump through a lot of hoops to get it to work on all browsers and platforms. Some solutions involve browser-sniffing and scriptingeven Java appletsthat are beyond the scope of this chapter.
Most sites that provide embedded WM movies as of this writing use that old fallback, the embed element, to provide play parameters to the Windows Media Player plug-in. It's not standards-compliant, and it will prevent your page from validating. You are encouraged to experiment with using the standard object element (or nested object elements) alone to see if it meets your needs. The embed element is nested inside the object element as shown in this example: <object height="280" width="320" class type="application/x-oleobject" codebase="HTTP://ACTIVEX.MICROSOFT .COM/ACTIVEX/CONTROLS/MPLAYER/EN/NSMP2INF.CAB#VERSION=6,4,7,1112"> <param name="URL" value="movies/europe.wmv" /> <embed type="application/x-mplayer2" name="MediaPlayer" width="320" height="280" src="/books/4/439/1/html/2/movies/europe.wmv"> <noembed><a href="streamingmovie.asx">See a streaming movie</a></noembed> </embed> </object> Browsers that can use the ActiveX control will get their instructions from the object and param elements. Browsers that don't understand the outer object element will look inside that object for alternative content (the embed element). Browsers that don't support the embed element will display the content of the noembed element, which is a link to play the movie in the external Windows Media Player. |