If we had to catalog Microsoft’s proprietary video formats we could talk about the following three: AVI, ASF and WMA.
- AVI «Audio Video Interleave» the first of the formats. Widely expanded on all Microsoft platforms. It is being surpassed by new technologies.
- ASF «Advanced Streaming Format» used for web streaming.
- WMV “Windows Media Video” which is the format associated with Microsoft’s Windows Media Player. This software is available on several platforms, including SUN Solaris and Macintosh.
The idea of this example is to see how to put one of these videos within a web page.
The main problem when manipulating videos within web pages is the disparity in formats, the software necessary to view them, and the lack of standardization in HTML tags.
This is why it is possibly best to put a link on the video so that each user can download it and view it with their client platform software. If we use this option, it is recommended that the file name, size and type be indicated.
For example:
Eiffel Tower (69kb WMV file)
The code to do this is very simple since we will have to use the a element.
<a href="Eiffel Tower.wmv">Eiffel Tower (69kb WMV file)</a>
If we focus on viewing a video in the AVI, ASF and WMV formats, what we will have to learn is how to load Windows Media Player and how it can be parameterized.
According to W3C the correct display method would be with the <OBJECT> tag, although browsers still support the <EMBED> tag.
The most important attributes of the object tag are data, where the name of the video file to be loaded will be indicated and type where the mime-type of the file will be indicated. Optionally we can indicate the height and width of the video using the width and height attributes.
If we talk about the mime-type of Microsoft video files we can take the following table as a reference:
| MIME type | Extension |
|---|---|
| video/x-ms-asf | asf,asx |
| video/x-ms-wm | wm |
| video/x-ms-wmv | wmv |
| video/x-ms-wvx | wvx |
The code will look like this:
<object data="Eiffel Tower.wmv" type="video/x-ms-wmv" width="320" height="240"></object>
But we can go a little further. And it is with Window Media Player. Currently represented as an object, it can receive parameters for its configuration, which we can pass to the object tag using tag param.
Some of these parameters are:
- src, name of the file with the video.
- autostart, the value 1 will make it start playing as soon as it is loaded. A value of 0 will have the opposite effect.
- volume, integer with the volume value.
- showControls, with the value 0 the video controls will not be shown (play, stop, pause,…). A value of 1 will show these controls
- showDisplay, shows file information (value 1). By default disabled (value 0)
- showStatusBar, shows the video progress bar. By default enabled (value 1).
- playcount, number of times the video will be repeated.
The code would finally look like this:
<object data="Eiffel Tower.wmv" type="video/x-ms-wmv" width="320" height="240"> <param name="src" value="Eiffel Tower.wmv" /> <param name="autostart" value="1" /> <param name="volume" value="0" /> <param name="showcontrols" value="0" /> <param name="showdisplay" value="0" /> <param name="showstatusbar" value="0" /> <param name="playcount" value="9999" /> </object>
Support for this object is available in Internet Explorer, FireFox, Opera,… If you encounter problems with FireFox (or any other Mozilla family) I would recommend that you read this article (unfortunately only in English) http://forums.mozillazine.org/viewtopic.php?t=206213 on how to validate if your FireFox plug-in is correctly installed.