Installing AVI Video on a Webpage

(WARNING: Because this page contains a 515kb AVI file it can take as long as 2 - 4 minutes to load depending on the speed of your modem!)

There are a number of ways in which you can install "video" in your webpages. Because all browsers "are NOT equal" the installation in certain instances will be different, and/or, will require you to install it in more than one manner. There are at least THREE ways to install, or add, video to your pages:

Video the Old-Fashioned Way

The simplest and most reliable option for incorporating a video file into your Web site is to simply link it in with <A HREF>, exactly as you would link to another HTML file. For example, the following line could be used to offer an AVI video of a Flower: <A HREF="flower1.avi">Play the Flower video.</A> When someone clicks on the words "Play the Flower video," the flower1.avi video file will be transferred to their computer. Whichever helper application or plug-in the user has installed will automatically start as soon as the file has finished downloading.

(Note:) In case you're not familiar with helper applications (or helper apps for short), they are the external programs that a Web browser calls upon to display any type of file that it can't handle on its own. You can see what helper apps your browser is set up to use by selecting "Options | General Preferences | Helpers" in Netscape 3.0 or selecting "View | Options | Programs | File Types" in Microsoft Internet Explorer 3.0.

Plug-ins are a special sort of helper application that is specifically designed for tight integration with Netscape Navigator.

Embedding Video the Microsoft Way

Most people are familiar with the use of the <IMG SRC> tag. Microsoft Internet Explorer 3.0 also allows you to include AVI videos in a Web page with <IMG>. The HTML code to include the video can be as simple as: <IMG DYNSRC="flower1.avi" WIDTH=250 HEIGHT=200> The DYNSRC stands for dynamic source, and tells Explorer that this is a motion video file instead of just a still SRC image. If you include both SRC and DYNSRC in an IMG tag, then older browsers that don't support DYNSRC will simply display the SRC image instead.

Two more new attributes can be used along with DYNSRC in an IMG tag, too. CONTROLS displays a set of controls beneath the video clip. LOOP=INFINITE makes the video automatically repeat forever, while LOOP=n plays the video n times and then stops (for example, LOOP=3 would play three times.) Naturally, you can also use the standard IMG attributes such as ALIGN, BORDER, and so on.

Embedding Video the Netscape Way

The following line of HTML would embed a video clip named "flower1.avi" at the position it is placed on the page, as long as visiting the page have an AVI-compatible plugin or helper application. <EMBED SRC="flower1.avi"> Notice that like the <IMG> tag, <EMBED> requires the SRC attribute to indicate the address of the embedded media file. Also, like <IMG>, the <EMBED> tag can take ALIGN, WIDTH, and HEIGHT. Those attributes are interpreted just as they would be for a "still image."However, the actual display of the video is handled by whichever plugin or helper application each user may have installed. The <EMBED> tag also enables you to set any number of optional parameters, which are specific to the plugin or player program. For instance, if you include AUTOPLAY="true" LOOP="true" or ONCURSOR="play" though these are NOT standard attributes of the <EMBED> tag, they will be "handed off" to the plugin program to interpret. If the viewer has the "Cold Fusion" plugin the ONCURSOR="play" will be activated when the "mouse" moves over the AVI image.

If the viewer has the QuickTime 3.0 plugin installed and configured for playing AVIs it will take over and the controls will be included for control of the video.




<a href="flower1.avi">click to view</a> <IMG DYNSRC="flower1.avi" START=mouseover ALIGN="left" CONTROLS WIDTH=250 HEIGHT=200 HSPACE=25> </a>

This is a TEST AVI just to give an example of it's placement."







The actual HTML used to place the AVI above in the document is given below. Depending upon which type of plugin, or lack of plugin, you have with your browser is what causes the AVI image to appear as it does. Some browsers have the QuickTime ver. 3.0 plugin installed and it will play the AVI if configured properly. Others will use the "npavi32.dll" plugin which comes with Netscape and yet others will use MSIE's Media Player or the Windows Media Player.

Good luck with installing AVIs in your pages!

<EMBED SRC="flower1.avi" AUTOSTART="false" WIDTH=250 HEIGHT=200 ALIGN="left" ONCURSOR="play" HSPACE=20> <NOEMBED> <a href="flower1.avi">click to view</a> <IMG DYNSRC="flower1.avi" START=mouseover ALIGN="left" CONTROLS WIDTH=250 HEIGHT=200 HSPACE=25> </a> </NOEMBED>

Main HTML Help



Site© 1999-2003 Copyright by dcrum@infionline.net