Adding Video
Let's begin a
quick discussion of the various video
formats available. The first of these
formats is the QuickTime Movie Format,
developed by Apple Computer in early
1991. It is indicated by teh extension
MOV and is probably the most common
format used by the MAC community, and
has legions of devoted followers out
there on the web.
Wherever an
opportunity exists, you'll find
Microsoft, and so we have Audio/Video
interleaved (AVI), also sometimes
referred to as Video for Windows. The
AVI format is supposed to be faster and
smoother, but takes a significant hit
when it comes to file size.
Both QuickTime and
AVI are cross-platform, QuickTime will
play on a PC and vice versa, assuming
that the required player is installed.
Then we have the Motion Picture Experts
Groups (MPEG) format. Its quickly
becoming one of the most popular video
formats on the web, largely because of
its impressive compression algorithm,
which keep file sizes small while
maintaining reasonable playback quality,
for example a 3 minute MPEG clip can be
as small as 10 MB.
The three formats
above work quite well for all those
download-first-play-latter situations.
But what happens if you'd like to have
the video play as it downloads? That
brings us to the ubiquitous RealVideo
format, developed by the creators of
RealAudio. It applies the same streaming
principle.
There are numerous
alternatives available, VDO at
www.vdo.net and Vivo at www.vivo.com are
just two of the options, all of which
have their own proprietary solutions to
the streaming-video problem. However,
these formats are not as widely-used as
the four we've discussed above.
Since most video files are quite large,
the traditional method of including a
movie file on a web page is the
download-first-play-later method, which
basically consists of creating a simple
link to the file. Clicking the link will
allow the user to download and save the
file to his PC, and view it later using
an appropriate player. Take a look at
the following example:
<a href="http://www.anymovie.com/movie.avi">Click
here to download the Challenger launch
video.</a>
The second way to introduce video into
your web page is via the <embed> tag. If
you remember, the <embed> tag was
developed by Netscape as a way of
including audio, video and other media
types in your HTML document, it's now
supported by both browsers.
The <embed> tag
looks for a specific software
application (also called a plug-in)
capable of reading the media file on the
uses that to display and playback the
video file. AVI and MPEG formats are
usually handled by the built-in Media
Player or ActiveMovie application on the
Windows platform, while QuickTime and
RealVideo formats usually require you to
download and install the player.
The <embed> tag
must accompanied by the SRC attribute,
which specifies the path to the video
file. And you can also add the height
and width attributes to control the size
of the video console that appears on the
page, or align it with the align
attribute. Example:
<html>
<head>
<title>My First Movie</title>
</head>
<body>
Hungy python coming up, look your doors!
<embed src="python.mpg" height="250"
width="250" align="right"></embed>
</body>
</html>
View this code in
your browser, you should see a control
panel which allows you to start, stop or
pause the video, aligned towards the
right side of the page. Now would you
like the movie to begin playing
automatically? Add the attribute
autostart="True" tothe code above. And
now that you've got it started, how
about making sure that it never stops.
Try Loop="True" for an infinite loop.
The Controller
attribute specifies whether or not a
control panel should be displayed, set
it to False to turn the display off. And
if you'd like to set things up so that
clicking the movie takes the user to
another page, you can link things up
with href attribute, as we've done
below:
<body>
hungry python coming up, lock your
doors!<br>
Or click the movie to go the help page.
<embed src="python.mpg"
controller="false" href="help.html"></embed>
</body>
and you can add
the pluginspace attribute, which directs
users who don't have the plugin to a
location that tells them where to get
it.
<body>
Hungry python coming up, lock your
doors!
<embed src="python.mpg" pluginspace="download.html">
<embed>
</body>
However, the
pluginspace, controller, href, autostart
and loop attributes are only supported
by Internet Explorer, and will not work
as advertised in Netscape Navigator.
There's also a third method, which is
currently supported only by Microsoft's
Internet Explorer. It takes the standard
<img> tag, usually used to display
inline images, and kicks it into
Hollywood terri-tory by adding the
Dynsrc attribute. Read the example to
make things clearer:
<img
dynsrc="animals.avi" src="animals.gif"
start="mouseover">
Move your mouse over the image for the
famous Pamela-Tommy Lee Home video.
The Dynsrc attribute specifies the
location of the video clip to be
displayed. Internet Explorer will
display the video clip, while other
browsers will display the image file
specified by the src attribute, a
classid example of having your cake and
eating it too!
The Start
attribute specifies the event that
triggers playback, it may take the value
"mouseover", which begins playback when
the mouse cursor is moved over the video
clip, or the value "fileopen", which
means that the video will start playing
as soon as the file has been completely
downloaded. The Loop attribute controls
the number of times te clip repeats-use
Loop="infinite" for an infinite number
of repetitions. And the Loopdelay
attribute specifies the duration to
wait, in milliseconds, between loops.
Since this is the <img> element I'm
talking about, all its other attributes,
such as border, hspace, vspace etc can
be used.
This brings us to
the end of the tutorial. Having learnt
all that is required to design your own
website, I am sure you will excited to
put your imaginations, ideas and the
knowledge you have obtained from this
tutorial, to practice and put yourself
on the digital map. I hope it was a
unique learning experience for you as
much as it was for me to design and
create this tutorial.
