Adding Video to an HTML Document (Web Design in a Nutshell, 2nd Edition)

25.5. Adding Video to an HTML Document

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

25.5.1. A Simple Link

Like audio, downloadable video files (AVI, MPEG, and QuickTime) can be linked to HTML documents using the standard <a> tag:

<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 how that user has the browser configured, so it is out of the control of the web page designer.

25.5.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 24, "Audio on the Web", is exactly the same for video as for audio. See the audio chapter for more thorough coverage.

25.5.2.1. 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/song.rm

To embed a RealMedia movie on a web page, use the following code:

<OBJECT ID="spacestress" 
   CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" 
   HEIGHT="160" WIDTH="320" BORDER="0">
<PARAM NAME="SRC" VALUE="realmedia/spacestress.rpm">
<PARAM NAME="CONTROLS" VALUE="all">

   <EMBED SRC="realmedia/oakshoes.rpm" HEIGHT="150" WIDTH="250" 
    AUTOSTART="false" CONTROLS="all" BORDER="0">

</OBJECT>

The value of the classid should be copied exactly as it is shown here as this points to the RealMedia player. Note that when embedding, the metafile suffix is .rpm (rather than .ram).

25.5.2.2. 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), that works like a RealMedia metafile:

<A HREF="streamingmovie.asx">See a streaming movie</A>

The content of the .asx file 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 Administrator program. For more information, see the Windows Media Technologies page located at http://www.microsoft.com/Windows/windowsmedia/serve/basics_WM4.asp.

25.5.3. Embedded QuickTime Movies

In addition to simply linking to a QuickTime movie, you can also place the player right in the web page like an image using the <embed> tag. The QuickTime plug-in is required to play .mov files inline, but it is bundled with the two major browsers, making it a relatively safe way to put a video right on a page. The method listed here is supported by Internet Explorer 3+ and Navigator 3+.

A simple <embed> tag looks like this:

<EMBED SRC="cool.mov" AUTOPLAY=false WIDTH=160 HEIGHT=136
       CONTROLLER="true">

In this example, the actual height of the movie is 120 pixels, but I've added 16 pixels (for a total of 136) so the QuickTime control strip can display below the movie.

25.5.3.1. Browser <embed> attributes

The <embed> tag has a number of standard attributes that control various aspects of playback and display. These attributes are recognized by every browser that supports the <embed> tag and are supported by the QuickTime plug-in as well.

src=url

width=number
height=number: 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 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.

align=left|right|top|bottom: Sets the alignment of the movie on the page (similar to an image).

border=number: Sets the width of the border around the plug-in.

hspace=number
vspace=number: Holds space to the left and right (hspace) and above and below (vspace) the plug-in when positioned with the align attribute.

name=text: Assigns a name to the embedded object for use with a scripting language.

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

25.5.3.2. Special QuickTime <embed> 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 http://www.apple.com/quicktime/authoring/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-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.

25.5.4. The dynsrc Attribute

Internet Explorer allows you to embed a video on a page using the nonstandard dynsrc attribute in the <img> tag. Note: This tag does not work with any version of Netscape Navigator, so using it may alienate a portion of your audience.

An <img> tag with a dynsrc attribute is placed in the document like an ordinary <img> tag. The dynsrc attribute replaces the traditional src attribute, but otherwise you can use all the same <img> attributes such as alignment, horizontal and vertical gutter space, etc., as follows:

<IMG DYNSRC="waycool.mov" ALIGN=right HSPACE=12>

The <img dynsrc> tag can also take a number of specialized attributes for controlling video display:

controls: Adds playback controls for the video.

dynsrc=url: Provides the URL for the video file to be displayed on the page.

loop=value<>: Sets the number of times to play the video. It can be a number value or set to infinite.

start=fileopen, mouseover: Specifies when to play the video. By default, it begins playing as soon as it's downloaded (fileopen). You can set it to start when the mouse pointer is over the movie area (mouseover). If you combine them (separated by a comma), the movie plays once when it's downloaded, then again every time the user mouses over it.