25.5. Adding Video to an HTML Document
25.5.1. A Simple Link
<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.
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:
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).
220.127.116.11. 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.
18.104.22.168. 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.
22.214.171.124. 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.
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:
Copyright © 2002 O'Reilly & Associates. All rights reserved.