For this simple example, we’ll assume that you have a DivX video ﬁle named movie.divx and that you are creating an HTML page named movie.html to host it. We will also assume that those two ﬁles will be uploaded to your web server in the same destination folder. Finally we will assume that the video resolution of the movie.divx ﬁle is 320x240 pixels.
All you need to add inside the <body> tag of your movie.html ﬁle is the following block of code:
<object classid="clsid:67DABFBF-D0AB-41fa-9C46-CC0F21721616" width="320" height="260" codebase="http://go.divx.com/plugin/DivXBrowserPlugin.cab"> <param name="src" value="movie.divx"/> <embed type="video/divx" src="movie.divx" width="320" height="260" pluginspage="http://go.divx.com/plugin/download/"> </embed> </object>
The explanation of the different tags and parameters of this block of code is as follows:
- The ﬁrst, outer <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/> 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 "clsid:67DABFBF-D0AB-41fa-9C46-CC0F21721616".
- 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 ﬁle 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 "http://go.divx.com/plugin/DivXBrowserPlugin.cab". This tag is used by Internet Explorer to do an automatic dowthe client computer when it is missing.
Object sub-tag parameter: <param name="src" … >
- 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 "video/divx".
- src: The src parameter is used to locate the video ﬁle 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 "http://go.divx.com/plugin/download/".
This is all you need to add to your HTML to obtain a web page that downloads and plays DivX video.