Book HomeWeb Design in a NutshellSearch this book

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

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

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



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.