Webmaster handbook

1. DivX® Web Player Plug-In: Webmaster’s Handbook
Who should read this document?
Webmasters or Web enthusiasts that are familiar with writing simple HTML
pages and maintaining a website.
Brief:
This document presents a summary of all the information that you need in
order to setup your website or web pages for online, embedded DivX video
playback using the DivX® Web Player plug-in.
For quick and easy embedding of DivX video material into an HTML page using
the default options, it is possible to read only the shorter, first three sections
of this document. The later sections are required only for advanced
customization, scripting or skinning of the plug-in control.
Please check for updates of this document & SDK at:
Plug-In & Webmaster SDK Download Page:
http://go.divx.com/plugin/download/
Document version 1.1.0
Last updated on: lundi 2 octobre 2006

2. Table of Contents:
INTRODUCTION:
__________________________________________________ 3
SUPPORTED BROWSERS
__________________________________________ 3
SIMPLE EXAMPLE:
________________________________________________ 3
ADVANCED CONFIGURATION:
____________________________________ 5
EMBEDDING PARAMETERS:
__________________________________________ 5
JAVASCRIPT INTERACTION:
_________________________________________11
Scripting considerations:
______________________________________________________11
Event Callbacks:
_____________________________________________________________12
JavaScript API:
_____________________________________________________________ 14
PREVENTING DOWNLOADS:
________________________________________ 16
SUPPORT:
________________________________________________________ 16

3. I. Introduction:
The DivX® Web Player Plug-In gives any webmaster a simple and hassle-free
mechanism for oering DivX videos for immediate download and playback on their
website by simply hosting the video file and editing some HTML tags.
The DivX Web Player Plug-In works by being downloaded and installed on each of your
visitor’s computer when they browse a page that contains an embedded a DivX video,
and is distributed for free by DivX, Inc - saving you the trouble of hosting the plugin
yourself or having to pay for the bandwidth of its download.
All you need to have to get started on your end is a .divx file and some HTML code.
II. Supported Browsers
The DivX Web Player Plug-In supports the following Internet browsers:
For Windows 98/ME/2000/XP:
Internet Explorer (5.0 or above)
•
Firefox (1.0 and above)
•
Mozilla (1.7.0 and above)
•
Netscape (8.0 and above)
•
Opera (8.5 and above)
•
SeaMonkey (1.0 and above)
•
Flock (0.7 and above)
•
For Mac OS X (10.3 and above):
Safari (1.3 and above)
•
Firefox (1.0 and above)
•
Mozilla (1.7.0 and above)
•
Netscape (7.2 and above)
•
Opera (8.51 and above)
•
SeaMonkey (1.0 and above)
•
Flock (0.7 and above)
•
The following section gives a simple example on how to setup your HTML page so that
downloading and playing back DivX videos with the DivX Web Player Plug-In works
seamlessly with all these browsers at once.
III.Simple Example:
For this simple example, we’ll assume that you have a DivX video file named
movie.divx and that you are creating an HTML page named movie.html to host it. We
will also assume that those two files will be uploaded to your web server in the same
destination folder. Finally we will assume that the video resolution of the movie.divx
file is 320x240 pixels.

4. All you need to add inside the body tag of your movie.html file is the following
block of code:
object classid=quot;clsid:67DABFBF-D0AB-41fa-9C46-CC0F21721616quot;
width=quot;320quot; height=quot;260quot;
codebase=quot;http://go.divx.com/plugin/DivXBrowserPlugin.cabquot;
param name=quot;srcquot; value=quot;movie.divxquot;/
embed type=quot;video/divxquot; src=quot;movie.divxquot;
width=quot;320quot; height=quot;260quot;
pluginspage=quot;http://go.divx.com/plugin/download/quot;
/embed
/object
Figure 1: Simple HTML embedding code
The explanation of the dierent tags and parameters of this block of code is as
follows:
The first, outer object/object tag is used by Internet Explorer to display the
plug-in. It has a set of required direct parameters and also uses inner param tags
to specify optional parameters.
The second, inner embed/embed tag is used by all other supported browsers
(such as Mozilla Firefox) and does not need any sub tags. The embed tag needs to
be inside the object tag for this code to work in all browsers at once.
Both of these tags must be present, even though this way some parameters are
repeated, in order for the plug-in to appear and function in all supported browsers.
Here is a detailed list and explanation of the required parameters of each tag:
Object tag parameters:
classid: The classid parameter is required to identify the plug-in that is
•
needed when using Internet Explorer and its value must be set to exactly
quot;clsid:67DABFBF-D0AB-41fa-9C46-CC0F21721616quot;.
width and height: The width and height parameters are required. They
•
determine how much space is allocated on the HTML page for the plug-in
control. By default, the DivX Browser Plug-In displays a bar of playback
controls that is 20 pixels high at the bottom of the video area. Therefore, in
our example, we must allocate an area of 320x260 pixels to host our
320x240 pixels video.
As a summary: With the default skin mode settings, the width parameter
should always equal the width of the video file while the height parameter
should equal the height of the video plus an additional 20 pixels so that the
original aspect ratio of your video is maintained.
codebase: The codebase parameter is required and must be set to exactly
•
quot;http://go.divx.com/plugin/DivXBrowserPlugin.cabquot;. This tag is used by
Internet Explorer to do an automatic download and install of the plug-in on
the client computer when it is missing.

5. Object sub-tag parameter: param name=quot;srcquot; …
The param tag with a name of src is used by Internet Explorer to locate
•
the video that the plug-in control needs to download and play. Here its
value is set to movie.divx.
Embed tag parameters:
type: The type parameter is used to identify the plug-in that is required
•
when using mozilla-based browsers and should be set to exactly quot;video/
divxquot;.
src: The src parameter is used to locate the video file that the plugin should
•
download and play. In our case it is set to movie.divx again.
width and height: The width and height parameters are used the same way
•
here as in the object tag and therefore set to the same values.
pluginspage: The pluginspage parameter is used by mozilla-based
•
browsers to locate a web page where the plug-in can be downloaded when
it is not currently installed on the client machine. It is required for proper
functioning and must be set to exactly quot;http://go.divx.com/plugin/
download/quot;.
This is all you need to add to your HTML to obtain a web page that downloads and
plays DivX video.
IV.Advanced Configuration:
1. Embedding Parameters:
Each of the following embedding parameters allow to customize the appearance and
behavior of the DivX Web Player Plug-In. Each of them must be specified twice for
them to take eect in all supported browsers, once in the object tag as a param
sub-tag, and once in the embed tag directly.

6. The src parameter:
The src parameter is used to specify which video file the plug-in should attempt to
download and play. This file must have the “.avi”, “.divx” or “.div” extension.
If this parameter is omitted, the plugin will not attempt to download and play a file on
startup but will be ready for JavaScript calls to instruct it to do so at a later time (see
the JavaScript API Reference for details).
Usage:
•
In the object tag:
param name=quot;srcquot; value=quot;[value]quot;
o
In the embed tag:
o src=quot;[value]quot;
Possible values:
•
A relative path, i.e. quot;movie.divxquot; or quot;../../videos/
o
myvideo.divxquot;.
An absolute path, i.e. quot;http://mywebsite.com/myvideo.divxquot;.
o
The mode parameter:
The mode parameter is used to specify which skin mode the plugin should use to
display playback controls. Several modes are provided from showing no controls at all
to showing a full-featured playback panel.
Usage:
•
In the object tag:
param name=quot;modequot; value=quot;[value]quot;
o
In the embed tag:
o mode=quot;[value]quot;
Possible values:
•
o null: In this mode, the plug-in shows absolutely no controls. The
usual width and height parameters should then be set to the exact
width and height of the video file.
o zero: In this mode, the plug-in only shows a small floating controls
bar in the bottom left corner of the allocated video area. The usual
width and height parameters should then be set to the exact width
and height of the video file.
o mini: This is the default. In this mode, the plugin shows a more
elaborate controls bar that is 20 pixel high at the bottom of the
video area. The usual width and height parameters should then be
set to the exact width of the video and the height of the video plus
20 pixels.
o large: In this mode, the player will show a complete controls bar at
the bottom of the video area that is 65 pixels high. The usual width
and height parameters should then be set to the exact width of the
video and the height of the video plus 65 pixels.

7. o full: In this mode, the plugin will display a 65 pixels high complete
controls bar at the bottom of the video area and an additional 25
pixel high controls bar at the top of the video area. The usual width
and height parameters should then be set to the exact width of the
video and the height of the video plus 90 pixels.
The minVersion parameter:
The minVersion parameter is used to specify a minimum version number of the DivX
Browser Plug-In that is required to play the embedded video.
This parameter can be used to force an upgrade of the client computer when your web
page explicitly relies on a specific version of the DivX Browser Plug-In to playback the
video. If the end user refuses to upgrade, the video will not download or play.
Usage:
•
In the object tag: param name=quot;minVersionquot; value=quot;[value]quot;
o
In the embed tag:
o minVersion=quot;[value]quot;
Possible values:
•
o A 3-digit, dot-separated, text string specifying the minimum
version number required, such as quot;1.0.3quot; or quot;2.0.0quot;.
The allowContextMenu parameter:
The allowContextMenu parameter is used to specify whether the plugin should display
a contextual (right-click) menu when the user presses the right mouse button or the
menu buttons on the skin.
You may wish to disable the contextual menu to provide your own controls on the
page.
Usage:
•
In the object tag: param name=quot;allowContextMenuquot; value=quot;[value]quot;
o
In the embed tag: allowContextMenu=quot;[value]quot;
o
Possible values:
•
quot;truequot; or quot;falsequot;, true being the default.
o

8. The autoPlay parameter:
The autoPlay parameter is used to specify whether the plugin should start
downloading and buering immediately or if it should wait for a JavaScript call or for
the user to click on the Play button so start doing so.
Usage:
•
In the object tag:
param name=quot;autoPlayquot; value=quot;[value]quot;
o
In the embed tag:
o autoPlay=quot;[value]quot;
Possible values:
•
quot;truequot; or quot;falsequot;, true being the default.
o
The loop parameter:
The loop parameter is used to specify whether the plugin should play the video in a
loop or stop video playback when the end of the file is reached.
Usage:
•
In the object tag:
param name=quot;loopquot; value=quot;[value]quot;
o
In the embed tag:
o loop=quot;[value]quot;
Possible values:
•
quot;truequot; or quot;falsequot;, false being the default.
o
The bannerEnabled parameter:
The bannerEnabled parameter is used to specify whether the plugin should display the
DivX advertisement banner at the end of playback.
Usage:
•
In the object tag: param name=quot;bannerEnabledquot; value=quot;[value]quot;
o
In the embed tag: bannerEnabled=quot;[value]quot;
o
Possible values:
•
quot;truequot; or quot;falsequot;, true being the default.
o

9. The bueringMode parameter:
The bueringMode parameter is used to specify how the plug-in should buer
downloaded data before attempting to start playback.
Usage:
•
In the object tag: param name=quot;bufferingModequot; value=quot;[value]quot;
o
In the embed tag: bufferingMode=quot;[value]quot;
o
Possible values:
•
o null: In this mode, the plug-in does only very minimal buering and
starts playing as soon as data is available. It will not guarantee a
very good user experience unless you know that their connection is
very fast.
o auto: This is the default value. In this mode, the plug-in analyses
the download speed and tries to buer just enough so that
uninterrupted progressive playback can happen at the end of the
buer period.
o full: In this mode, the plugin will always buer the full video file
before starting playback.
The previewImage parameter:
The previewImage parameter is used to specify the location of an image file in PNG,
JPEG or GIF format to use as a preview image. The preview image is displayed in place
of the DivX “X” logo when autoPlay is set to false. This allows to setup a piece of video
so that it does not auto start but shows a preview image of what the video is about.
Users can then start the download and playback of the video by clicking anywhere on
the preview image. See the previewMessage and previewMessageSize parameters for
more options.
Note that you need to set the autoPlay parameter to false for this parameter to be
taken into account.
Usage:
•
In the object tag: param name=quot;previewImagequot; value=quot;[value]quot;
o
In the embed tag: previewImage=quot;[value]quot;
o
Possible values:
•
A relative path, such as quot;myPreviewImage.gifquot; or quot;../../images/
o
myImage.jpgquot;.
An absolute path, i.e. quot;http://mywebsite.com/myImage.pngquot;.
o

10. The previewMessage parameter:
The previewMessage parameter allows to display a text message on top of the preview
image to let users know how to start the video. The message can be any text such as
“Click to play video”.
Note that you need to also set the previewImage parameter for this parameter to be
taken into account.
Usage:
•
In the object tag: param name=quot;previewMessagequot; value=quot;[value]quot;
o
In the embed tag: previewMessage=quot;[value]quot;
o
Possible values:
•
Any text message such as quot;Click here to play this videoquot;.
o
The previewMessageFontSize parameter:
The previewMessageFontSize parameter allows to customize the size of the font used
to display the preview message over the preview image.
Note that you need to also set the previewImage and previewMessage parameters for
this parameter to be taken into account.
Usage:
•
In the object tag: param
o name=quot;previewMessageFontSizequot;
value=quot;[value]quot;
In the embed tag: previewMessageFontSize=quot;[value]quot;
o
Possible values:
•
Any integer value meaningful as a font size message such as quot;8quot; or “32”.
o
The movieTitle parameter:
The movieTitle parameter is useful if your videos don’t have user friendly file names
such as “112356.divx” or “gr8t_vidz_1324.avi” as it allows to give a title to your video
that is used by the DivX Web Player when showing UI elements and when users wants
to save the video file to their Hard Disk.
If you set movieTitle to “My Great Video” then your video file will be saved on each
user’s computers as “My Great Video.divx”.
Usage:
•
In the object tag: param name=quot;movieTitlequot; value=quot;[value]quot;
o
In the embed tag: movieTitle=quot;[value]quot;
o
Possible values:
•
Any text that is a valid cross-platform filename such as quot;My Videoquot; or
o
“My Great Movie”.

11. 2. JavaScript Interaction:
The plug-in can be scripted and controlled via JavaScript in all the supported
browsers. JavaScript allows you to register callbacks to receive events occurring inside
the plug-in as well as to call functions on the plug-in object to perform operations. In
order to be able to do so, a couple of parameters must be added to the simple tags
shown in the previous section.
Scripting considerations:
In order to access and script the plug-in object from JavaScript code in your HTML
page the object and embed tags must have an additional id parameter giving
them unique names for JavaScript to access the objects.
As per the w3c standard, the values of those id parameters need to be dierent for
each tag, for example:
object id=quot;ie_pluginquot; …
embed id=quot;np_pluginquot; … /embed
/object
In this case we have named the object tag ie_plugin and the embed tag np_plugin.
The final step required to be able to script the plug-in is to add some code that will
determine which plugin object name to use, depending on the browser that is
currently using the plug-in. This is done by parsing the “user agent” string that
identifies the browser.
In our case, the following code snippet needs to be added at the top of the JavaScript
block before trying to call any function on the plugin object:
script language=quot;Javascriptquot;
var plugin;
if(navigator.userAgent.indexOf('MSIE') != -1 ||
navigator.userAgent.indexOf('Safari') != -1)
{
plugin = document.getElementById('ie_plugin');
}
else
{
plugin = document.getElementById('np_plugin');
}
/script

12. This block of code assigns the correct document object into the variable plugin by
detecting whether the current browser is Internet Explorer or Safari, or something else.
After this block of code, the plugin variable can be safely used to call any function of
the DivX Browser Plug-In JavaScript API (see below).
Event Callbacks:
It is possible to define local JavaScript functions to be used by the plug-in as callbacks
when something of importance occurs.
The name of these functions must be passed as embedding parameters using both the
param sub-tags and the embed tag so that the plug-in knows to call them when
an event occurs in all supported browsers.
The following callback parameters are defined:
-statusCallback
This parameter can be used to pass the name of a local JavaScript function
that will be called when an event occurs: The function must have the
following signature:
function myStatusCallback (event)
In this case “myStatusCallback” is a placeholder for your function name.
The event parameter will be a number. The following values are possible:
INIT_DONE = 0 STATUS_PAUSED = 11
OPEN_DONE = 1 STATUS_FF = 12
VIDEO_END = 2 STATUS_RW = 13
SHUT_DONE = 3 STATUS_STOPPED = 14
EMBEDDED_START = 4 BUFFERING_START = 15
EMBEDDED_END = 5 BUFFERING_STOP = 16
WINDOWED_START = 6 DOWNLOAD_START = 17
WINDOWED_END = 7 DOWNLOAD_FAILED = 18
FULLSCREEN_START = 8 DOWNLOAD_DONE = 19
FULLSCREEN_END = 9
STATUS_PLAYING = 10

13. - timeCallback
This parameter can be used to pass the name of a local JavaScript function
that will be called during playback to inform of the current playback
time: The function must have the following signature:
function myTimeCallback (time)
In this case “myTimeCallback” is a placeholder for your function name.
The time parameter will be a long integer value giving the current playback
time in seconds. This function will be called every second.
- buerCallback
This parameter can be used to pass the name of a local JavaScript function
that will be called during buering to inform of the current buer
status: The function must have the following signature:
function myBufferCallback (current, total)
In this case “myBufferCallback” is a placeholder for your function name.
The current and total parameters will be long integers containing the
current and total amount of data (in bytes) of this buering stage.
- downloadCallback
This parameter can be used to pass the name of a local JavaScript function
that will be called during download to inform of the current status: The
function must have the following signature:
function myDownloadCallback (current, total)
In this case “myDownloadCallback” is a placeholder for your function
name.
The current and total parameters will be long integers containing the
current and total amount of data (in bytes) of the downloaded video.
To see an example of the downloadCallback parameter being used, have a
look at the scripting.html file in the Samples folder of the SDK.

14. JavaScript API:
The DivX Browser Plug-In supports the following direct JavaScript calls:
Version:
The following function allows querying the plugin version on the end user
machine. The return value will be in the form “X.X.X” where X are single
digit numbers.
- string GetVersion();
Setup:
Those functions can be used to alternatively set all the embedding
parameters and take the same parameter values as the corresponding
embedding parameters (see section III):
They take eect immediately (if applicable) or during the next call to the
Open() function (see next section).
- void SetMinVersion(string version);
- void SetMode(string mode);
- void SetAllowContextMenu(boolean allow);
- void SetAutoPlay(boolean play);
- void SetLoop(boolean loop);
- void SetBueringMode(string mode);
- void SetBannerEnabled(boolean enabled);
- void SetVolume(unsigned long volume);
- void SetMovieTitle(string movieTitle);
- void SetPreviewImage(string imageURL);
- void SetPreviewMessage(string message);
- void SetPreviewMessageFontSize(unsigned long size);
Media Management:
This function allows opening a new local video file or relative/full URL.
- void Open(string URL);
Playback:
- void Play();
- void Pause();
- void StepForward(); // goes one frame forward
- void StepBackward(); // goes one frame backward

15. - void FF(); // starts to fast forward
- void RW(); // starts to rewind
- void Stop();
- void Mute();
- void UnMute();
- void Seek(string method, unsigned long percent); // seeks into the
video, method can be “DOWN”, “UP”, or “DRAG” to simulate mouse
interaction. Call “DOWN” and “UP” in sequence to perform a full
seek.
Windowing:
- void About(); // shows the about box
- void ShowPreferences(); // shows the preferences panel
- void ShowContextMenu(); // shows the contextual menu
- void GoEmbedded(); // go back into browser-embedded mode
- void GoWindowed(); // go into windowed playback mode
- void GoFullscreen(); // go into fullscreen playback mode
- void Resize(unsigned long width,
unsigned long height); // resizes the plug-in in the HTML page.
Media Information:
These calls can only return valid data once the “OPEN_DONE” callback event
has been sent by the plug-in. Otherwise the return values are undefined.
- unsigned long GetTotalTime(); // in seconds
- unsigned long GetVideoWidth(); // in pixels
- unsigned long GetVideoHeight(); // in pixels
- double GetTotalVideoFrames();
- double GetVideoFramerate();
- unsigned long GetNumberOfAudioTracks();
- unsigned long GetNumberOfSubtitleTracks();
- string GetAudioTrackLanguage(unsigned long trackIndex); //
returns the twochar ISO 859 language code of audio track
“trackIndex” (which must be between 0 and trackCount-1)
- string GetSubtitleTrackLanguage(unsigned long trackIndex); //
returns the twochar ISO 859 language code of subtitle track
“trackIndex” (which must be between 0 and trackCount-1)
- string GetAudioTrackName(unsigned long trackIndex); // returns a
readable track name for audio track “trackIndex” (which must be
between 0 and trackCount-1)
- string GetSubtitleTrackName(unsigned long trackIndex); // returns a
readable track name for subtitle track “trackIndex” (which must be
between 0 and trackCount-1)

16. - long GetCurrentAudioTrack(); // returns the index of the currently
playing audio track (or -1 if no audio track is selected)
- long GetCurrentSubtitleTrack(); // returns the index of the currently
playing subtitle track (or -1 if no subtitle track is selected)
Media Management:
These calls can be successful once the “OPEN_DONE” callback event has
been sent by the plug-in for the current video.
- void SetCurrentAudioTrack(long index); // sets the currently playing
audio track to the audio track at index “index” (pass -1 if you want
no audio track to be selected)
- void SetCurrentSubtitleTrack(long index); // sets the currently
playing subtitle track to the subtitle track at index “index” (pass -1
if you want no subtitle track to be selected)
3. Preventing Downloads:
If you want to prevent the DivX Browser Plug-In from saving the downloaded video file
onto the end user’s hard drive, you can simply name your video file so that its
filename on your web server ends with “_ns” (for “no save”) just before the .divx
extension and update your HTML code to reference this filename.
Examples: myvideo_ns.divx or trailer_ns.divx.
In this case the DivX Web Player Plug-In will still download the file contents for
playback but will not allow the end user to save the full file on disk.
V. Support:
You can further look at the available HTML pages in the samples folder of the SDK for
more examples of how to use the DivX Web Player Plug-In.
If you have any questions, wish to discuss this document or simply need some help
with putting together HTML pages for your DivX videos, please leave a message on the
forums on DivX.com:
http://go.divx.com/forums/
The DivX Web Player team.