Section 34.4. Adding Video to an HTML Document


34.4. Adding Video to an HTML Document

This section looks at the ways video files can be linked to or embedded within an HTML document.

34.4.1. A Simple Link

Like 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 Video

As 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 Media

To 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. RealMedia

In 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 Movies

In 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.

If you only require default play settings, there is a standards-compliant method for embedding QuickTime movies using nested object elements and a bit of CSS. The process is beyond the scope of this chapter, but you can read a tutorial at realdev1.realise.com/rossa/rendertest/quicktime.html.


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.

It is important to add 16 pixels to the actual height of the movie in the height attribute to accommodate the controller.


34.4.3.1. Attributes and parameters

The 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.


src=" url"

Required. This attribute points to the video file you want to play.


width=" number of pixels" height=" number of pixels"

Required. These attributes set the width and height in number of pixels for the video frame. It is important that the values of width and height be at least 2, even when the player is set to be hidden. A value of less than 2 results in crashes in some browsers. Add 16 pixels to the height of your movie if you have also set the controller tag to TRue, so that the QuickTime controller strip has room to display.


hidden="true|false"

When set to true, the plug-in player is not displayed. Be sure that the height and width are set to at least 2 even if the player is hidden to prevent crashes. This attribute is listed here for thoroughness' sake, but it is more appropriate for QuickTime audio (used as a background sound) than for video.


pluginspage="http://www.apple.com/quicktime/download/"

This provides a link to a source from which to acquire the QuickTime plug-in if the browser can't find it on the system.


loop="true|false|palindrome"

true causes the video to loop continuously. false (the default) causes the video to play through once. palindrome makes the video play through, then play in reverse, then play through, continuously.


href=" url"

This attribute makes your movie a link to another page.


type=" MIME type"

Specifies the MIME type of the file (such as video/quicktime or image/x-quicktime) if you aren't sure the web server will provide it (it usually does).

34.4.3.2. Special QuickTime attributes

There 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.


autoplay="true|false"

The video will start playing automatically if this attribute is set to TRue. The default depends on the user's settings, but it is generally false (meaning the user will have to start the video with the Play button).


controller="true|false"

A control bar for the video will be visible when this is set to true (or by default). Although it is possible to turn off the controls, it is usually advisable to leave them visible and available for use.


volume=" percent" (%0 to %300)

By default, audio is played at full volume (100%). You can set it lower to compensate for an especially loud audio track. Setting it higher than 100% is discouraged because it causes distortion and lessens audio quality.


playeveryframe="true|false"

When set to false (the default), you allow the video to skip frames in order to ensure smooth playback. Do not set this attribute to TRue if you have audio with your movie as it will be muted during playback.

34.4.4. Embedding Windows Media

Windows 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:


URL (value=" url")

Specifies the location of the movie file. This parameter replaces "Filename" used in earlier versions.


autoStart (value="true|false")

Specifies whether the movie begins playing automatically. The default is true.


UIMode (value="invisible|none|mini|full|custom")

Specifies whether (or which version) of the controls are displayed. The default is full.

For a complete list of Windows Media Player parameters, go to the MSDN Library (msdn.microsoft.com/library) and do a search for "PARAM Tags."


34.4.4.1. Browser support

The 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.

As of this writing, the existing Windows Media Player plug-in for Macintosh does not support the very latest Windows Media codecs.


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.




Web Design in a Nutshell
Web Design in a Nutshell: A Desktop Quick Reference (In a Nutshell (OReilly))
ISBN: 0596009879
EAN: 2147483647
Year: 2006
Pages: 325

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net