Adding Video to Your Web Pages

This tutorial explains how to add video and sound files to your Web pages. C Point has released 2 authoring applications that allow you to create popular video formats:

Platypus Animator
Digital video in AVI format
Antechinus Media Editor
Digital video in AVI and MPEG formats, and high-quality high-compression MP3 sound files

Both applications are available for download.

If you don't have a text-based HTML editor we recommend Platypus JavaScript Editor: it supports both HTML and JavaScript color-coding, and has many other features to make your Web authoring easy.

The simplest way to launch an AVI is to use the <IMG DYNSRC="AviName.avi"> tag.
Example (example1.htm):

<HTML>
<HEAD> </HEAD>
<BODY>
<IMG DYNSRC="antechinus.avi">
</BODY>
</HTML>

The browser playes the .avi once as soon as the page is loaded. Alas, DYNSRC is not supported by Netscape and works only in Internet Explorer. Both browsers do support the <EMBED> tag, so the following example is cross-browser.
Example (example2.htm):

<HTML>
<HEAD> </HEAD>
<BODY>
<EMBED SRC="antechinus.avi"
    AUTOSTART="true"
    LOOP="false"
    VOLUME="65"
    ALIGN="left"
    HIDDEN="false">
</EMBED>
</BODY>
</HTML>

Setting LOOP to true will make the video loop continuously. WIDTH and HEIGHT can also be added to assist faster rendering of the page. In addition, early versions of Netscape may cause problems if WIDTH and HEIGHT are missing.
HIDDEN can be set to true if you wish to embed an MP3 or some other sound file.

The most flexible approach is using the Media Player ActiveX. The following code fragment taken from Example3.htm shows the most useful parameters. For the list of all the parameters use Platypus JavaScript Editor (or some other editor) to open the Example3.htm and examine the code.
Code fragment (Example3.htm):

<OBJECT id=MPlyr classid=CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95 align=left >
    <PARAM NAME="Filename" VALUE="antechinus.avi">
    <PARAM NAME="AutoSize" VALUE="1">
    <PARAM NAME="AutoStart" VALUE="1">
    <PARAM NAME="ClickToPlay" VALUE="1">
    <PARAM NAME="PlayCount" VALUE="2">
    <PARAM NAME="ShowControls" VALUE="0">
    <PARAM NAME="ShowAudioControls" VALUE="0">
    <PARAM NAME="ShowDisplay" VALUE="0">
    <PARAM NAME="ShowPositionControls" VALUE="0">
    <PARAM NAME="ShowStatusBar" VALUE="0">
    <PARAM NAME="ShowTracker" VALUE="0">
</OBJECT>

Internet Explorer supports ActiveX but Netscape does not, so the following code fragment from Example4.htm shows the combined approach.
Code fragment (Example4.htm):

<OBJECT ID="MPlyr" width=124 height=148 type="application/x-oleobject"
    CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
    CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"     STANDBY="Downloading Media Player...">
        <PARAM NAME="FileName" VALUE="antechinus.avi">
        <PARAM NAME="AutoStart" VALUE="true">
        <PARAM NAME="ShowControls" VALUE="false">


    <EMBED TYPE="video/x-ms-asf-plugin" WIDTH="124" HEIGHT="148"
        PLUGINSPAGE="http://www.microsoft.com/windows/mediaplayer/download/default.asp"         SRC="antechinus.avi" CONTROLTYPE=0>
    </EMBED>
</OBJECT>

Sometimes you may wish to reference the video or a sound file and let the user open it in a separate window.
Example (Example5.htm):

<HTML>
<HEAD> </HEAD>
<BODY>
<A HREF="antechinus.avi">Antechinus video - click to launch!</A>
</BODY>
</HTML>

[Home] [Products] [Support] [Download] [Orders] [Links]

Address: C Point Pty Ltd, 71 Williamson Road, Para Hills 5096, Australia
Phone: +618 8263 3623	Fax: +618 8396 1477
Web: http://www.c-point.com	Email: c-point@c-point.com