Video | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

The "holy grail" of Internet multimedia is high-quality , 30- frames -per-second real-time video. The use of video on Web pages has expanded considerably in the past few years , with online movie trailers becoming commonplace along with streaming clips on major news sites. However, providing video clips on the Internet is no small feat when you consider the amount of data being transferred.

Digital video is measured by the number of frames per second of video and by the size and resolution of these frames. The total size requirement for video is huge, particularly if you want NTSC (TV quality) video. A 640x480 image with 24 bits of data representation for color and a frame rate of 30 frames per second takes up a staggering 27 megabits per second ”and that's without sound. Add CD-quality audio ”1,411,200 bits of data for each second of data ”and the file size increases proportionately. In theory, the bits of data necessary to deliver TV-quality video could be transmitted over the Internet, creating the long-sought-after interactive TV. Today, transmitting this amount of data generally isn't feasible , even after compression.

Like audio files, video files can be compressed to reduce the amount of data being sent. Because of the degree of compression required by video, most video codecs use a lossy approach that involves a trade-off between picture/sound quality and file size, with larger file sizes obviously resulting in longer download times.

As with audio, simple online video delivery follows the download-and-play model, whereby users must download video clips completely before they can play them. Table 9-2 lists the most common downloadable video formats likely to be encountered on the Web.

The file format usually determines which compression technique is used. However, some file formats, such as QuickTime, allow different codecs to be selected. In some ways, this makes QuickTime the most flexible video format. As with audio, to choose a particular video format, you must consider the needs of the audience as well as the need for streaming or downloading the content.

Video Inclusion Basics

Including download and play video samples such as an AVI file in a Web page is simply a matter of using the anchor tag, <a> , to link to it. For example,

  <a href="movie.avi">  Demo Company History  </a><br />

Table 9-2: Common Internet Video Formats
Video Format	Description
AVI	Audio Video Interleave; the Windows file format for digital video and audio is very common and easy to specify. The file size of AVI is significant.
QuickTime	The file extension MOV indicates the use of Apple's QuickTime format. Probably the most common digital video format, it continues its popularity on the Internet. QuickTime has a strong following in the multimedia development community. Various codecs and technology enhancements make QuickTime a strong digital video solution that may work in conjunction with MPEG.
MPEG	Motion Picture Experts Group video format is generally considered the standard format for digital video.

As with audio, if the user has the appropriate playback hardware and software when they click the link, the video should be downloaded and then played . Of course, if they don't have the appropriate software nothing will happen.

As with audio, it is a very good idea to indicate that the file to be viewed is a video.

  <a href="movie.avi"><img src="tv.gif" alt="" height="10" width="10"  />Robots in Action  </a> [AVI format / 1200k]

The next section shows a simple way to include an AVI file under Internet Explorer.

Using the <img> Tag with the dynsrc Attribute Under Internet Explorer

The dynsrc attribute for the <img> tag originated in Internet Explorer 2 and allowed AVI files to be played within a Web page. Although the syntax is currently maintained for backward compatibility, using the object or embed elements is preferable. Originally, the dynsrc attribute supported only AVI files, but testing shows that any ActiveMovie-supported data can be included with this syntax. The basic attributes for <img> are all valid; however, the following additions are also available:

The dynsrc attribute should be set to the URL, either relative or absolute, of the content to play.
```
 dynsrc="URL of active content" 
```
If the controls attribute is present, controls are presented below the content, if possible. The attribute does not need a value.
```
 controls 
```
The loop attribute is used to set the number of times to loop the included content. When set to a positive integer, the content loops the specified number of times. When set to -1 or the keyword infinite , the content loops continuously.
```
 loop="value" 
```
This attribute is used with dynsrc to specify how the content should be played. Setting the value to fileopen plays the content as soon as the data file has finished opening. Setting the value equal to mouseover delays playing the content until the mouse is positioned over it. The default action for active content is fileopen .
```
 start="fileopen  mouseover" 
```

The following is an example of using the dynsrc attribute with the image element for an AVI movie:

  <img src="samplemovie.gif" dynsrc="samplemovie.avi" alt=""   controls="controls" align="left" vspace="20" />

In terms of browser support, it is difficult to come up with a best bet for simple Web video. AVI might appear to be easy to use, but the size and quality of AVI video files makes the format far from ideal. Furthermore, the format isn't necessarily supported natively by all browsers on all operating systems. As an alternative, you might consider QuickTime, though it too has issues and is presented primarily to show readers the flavor of how download-and-play video can be included in a page.

QuickTime

The QuickTime format was designed by Apple to provide the framework for the synchronization of time-based data in a variety of formats, including video, sound, MIDI, and even text. Although it was developed by Apple, it is now supported on PC platforms as well. An interesting aspect of QuickTime is that it can work with different video compression codecs, such as Cinepack, Indeo, MPEG, and even exotic fractal compression codecs. By itself, QuickTime with standard Cinepack encoding lacks the small file size of MPEG or proprietary video files, but the quality of QuickTime files is high. Creating or editing QuickTime files is relatively easy using tools such as the popular Adobe Premiere package.

Note	Windows users are required to install QuickTime services for their operating system.

The basic syntax for the nonstandard <embed> tag using the QuickTime plug-in is as follows:

 <embed src="URL of QuickTime object"        align="top  bottom  center  baseline  left                right  texttop  middle  absmiddle  absbottom"        autoplay="true  false"        cache="true  false"        controller="true  false"        height="pixels or percentage"        hidden        href="URL of page to load"        hspace="pixels"        loop="true  false  palindrome"        playeveryframe="true  false"        pluginspage="URL of page with plug-in information"        scale="tofit  aspect  number"        target="valid frame name"        volume="0 - 100"        vspace="pixels"        width="pixels or percentage">

The following lists and describes the key attributes in the preceding syntax:

src Required, and should be set to the URL of a valid QuickTime file.
align Acts like the same attribute for the img element and accepts the same values.
autoplay May be set to true or false (default); indicates whether the movie should be played as soon as possible.
cache May be set to true or false . A cache value of true causes the browser to treat the information just like other information and keep it in a local disk cache so that it does not need to be downloaded again. When set to false , the movie must be downloaded again.
controller May be set to true or false; determines whether the movie controller is visible. The controller provides standard stop, play, pause, rewind, frame selection, and volume controls. The controller is 24-pixels high, so the height value should be set to account for this. By default, the value of controller is set to true .
height Set like the width attribute, with a pixel value or percentage. The value specifies the height of the object and is cropped or expanded in the same method as width . For example, if a supplied height is greater than the movie's height, the movie is centered within this height. If the value is smaller, the object is cropped. Avoid values of or 1 for the height attribute because they may cause unpredictable results. Be aware that controls for the movie are 24 pixels high, which must be added to the height value for the object to display properly.
hidden Takes no parameters and its presence determines whether the movie should be visible. By default, the hidden value is off . In most cases, this is not an appropriate attribute to use. However, if a sound-only movie is being inserted, this can provide a background sound-like function, assuming that autoplay has been set to true .
href Indicates the URL of a page to load when the movie is clicked. The meaning of this attribute is somewhat troublesome if the controller attribute is set to false . The problem revolves around the click having two meanings: one to start the movie and the other to go to the page. Page authors should either use the Autoplay feature or provide controls when using this attribute.
hspace Sets the horizontal pixel buffer for the plug-in and acts the same way as the hspace attribute for the img element.
loop Indicates whether the movie should play in a looped fashion. Setting the attribute to true loops the movie until the user stops it. The default value is false . When the loop value is set to palindrome , the movie loops back and forth. Setting this value produces interesting effects with movies, and even reverses the soundtrack.
playeveryframe May be set to either true or false . When set to true , instructs the plug-in to play every frame, even if it requires the movie to play at a slower rate. This is appropriate in case the processor drops frames that may be valuable . Setting this value to true is not advisable for movies with audio tracks; it has the side effect of turning off the sound.
pluginspage Sets the URL of the page that contains information about the required plug-in and how it can be downloaded and installed, if it is not currently installed. This feature is supported by Netscape; it is also documented to work under Internet Explorer. Be careful when using this attribute. It generally should be set to www.apple.com/quicktime, unless special instructions are included in addition to standard QuickTime information.
scale Takes a value of tofit , aspect , or a number corresponding to the desired scaling factor, such as 1.5 . The default scale value is 1 , which is a normally scaled movie. Setting the attribute to aspect scales the movie to fit the bounding box set by the height and width attributes. A value of tofit scales the movie to fit the height and width attribute, with no regard to aspect ratio. Be careful when scaling movies because it may degrade the playback performance and image quality.
target Used in conjunction with the href attribute to set the name of a frame into which to load the page indicated by the href attribute. The normal reserved frame names , such as _blank, as well as explicitly named frames are available as valid targets. More information on frames can be found in Chapter 8.
volume May be set to a value from “ 100 . The higher the value, the louder the audio track on the QuickTime movie. A value of effectively mutes the soundtrack, whereas 100 sets the volume at the maximum level. If the attribute is not set, the default is 100 . This is a newer attribute and will not be supported under older versions of the QuickTime plug-in.
vspace Set to the number of vertical pixels to buffer between the embedded object and surrounding content. Used in the same way as the corresponding attribute for the img element.
width Set to a pixel value or percentage. Be aware that the plug-in may not necessarily stretch the video image to take up the space. As mentioned previously, setting the scale attribute to aspect scales the movie to fit the bounding box set by the height and width attributes. If the value supplied for the object width is smaller than the object's true width, it is cropped to fit the dimensions provided. The width value must be set, unless the hidden attribute is used. Be careful when using small widths, such as 0 or 1 pixels, because this can cause problems.

The following example illustrates only the most basic use of the QuickTime plug-in:

  <embed src="quicktime.mov" width="180" height="178"   autoplay="true" align="left" hspace="12" vspace="20">   </embed>

In this case, you can see the use of the Netscape <embed> style syntax. You can also use the <object> style syntax like so:

  <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"   width="240" height="152" codebase="http://www.apple.com/   qtactivex/qtplugin.cab#version=6,0,2,0">   <param name="type" value="video/quicktime" />   <param name="autoplay" value="true" />   <param name="src" value="quicktime.mov" />   </object>

Combining the two is also possible so that you provide something for everybody. You can even add a <noembed> in and provide a fallback position for browsers without video support. Of course, this is somewhat simplistic and does not work properly. The reality is that browser detection and the use of JavaScript are generally required for careful browser and plug-in sensing.

  <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"   width="240" height="152" codebase="http://www.apple.com/   qtactivex/qtplugin.cab#version=6,0,2,0">   <param name="type" value="video/quicktime" />   <param name="autoplay" value="true" />   <param name="src" value="quicktime.mov" />   <embed src="quicktime.mov" width="180" height="178"   autoplay="true" align="left" hspace="12" vspace="20">   </embed>   <noembed>   <a href="http://www.apple.com/quicktime">  Download Quicktime  </a>   </noembed>   </object>

Interested readers are directed to Apple's QuickTime site (www.apple.com/quicktime) for more information about using QuickTime video on the Web.

Streaming Video Choices

In addition to QuickTime, two other video choices are very commonly used online: RealVideo and WindowsMedia. Both are primarily streaming technologies. Generally, videos in either format are viewed in secondary windows rather than directly within a Web page. The general approach to their use is almost identical to audio files with either links to launch a file in an external player or a special launch file to display the content within a page. However, rather than cover the syntax, which changes extremely rapidly , readers should check the specific details of each technology at www.realnetworks.com/resources and www.microsoft.com/windows/windowsmedia.

< Day Day Up >