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:

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):

<!-- IE -->
<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">

<!-- Netscape -->
    <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