As with audio, the best way to get video on to a web page is through the use of the <object> tag. And we employ it pretty much the same way we did in the audio exercise; we just need to change the MIME types and other relevant file data (file name, location, etc).
That being said, we do need to pay close attention to the video display size (height & width). With audio, the physical size determined the size of the controller, which was pretty flexible. But with video, we need to make sure we set the height & width to the size of the actual video plus the height of the controller (typically 16-30 pixels). Thus a 320 x 240 Quicktime video should be set to 320 x 256 pixels.
Once again, the full code for embedding a file (in this case a Quicktime movie) will look something like this:
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="256">
<param name="src" value="yourMovie.mov" />
<param name="controller" value="true" />
<param name="autoplay" value="true" />
<param name="autostart" value="1" />
<param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
<!--[if !IE]> <-->
<object type="video/quicktime" data="yourMovie.mov" width="320" height="256">
<param name="pluginurl" value="http://www.apple.com/quicktime/download/" />
<param name="controller" value="true" />
<param name="autoplay" value="true" />
<param name="autostart" value="1" />
<embed src="yourMovie.mov" type="video/quicktime" width="320" height="256" autostart="true" controller="true" ></embed>
</object>
<!--> <![endif]-->
</object>
As for the other video formats, you will need to change the "type" to the appropriate MIME type (see a partial list below):
As for "class id's," and "codebase's," see the list below:
The control bar on the standar Quicktime viewer skin adds 16 pixels to the height of the movie (so a 320 x 240 movie should be specified as 320 x 256).
Windows Media controls add up to 26 pixels from what I can determine.
Real Media controllers are actually embedded as separate elements (see below) but they seem to like being at least 25px tall.
Flash controllers are usually included within the movie itself, so no additional height should be needed.
The Real Media Player has some unique parameters you have to use in the <object> tag. In order to see the video display you must include:
<param name="controls" value="ImageWindow">
<param name="console" value="video">
And the "controller" parameter does not do anything so you can dump it. To see a controller, you actually have to embed the controller separately. Basically copy and paste the entire <object> tag block that you used to embed the .rm file and change <param name="controls" value="ImageWindow"> to <param name="controls" value="ControlPanel">. Also change the height (try 30px).
Finally remove all references to Quicktime (or other player) plug-ins. Everything else stays the same, including the "src." To get it to appear below the video window you will have to use a <br> or a table or CSS.
Here's how your code should look for Real Media; Real Media changes are in red (note that I eliminated the annoying <embed> tags too):
<object id=RVOCX classid="clsid:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA"width="320" height="240">
<param name="src" value="yourMovie.rm" />
<param name="controller" value="true" />
<param name="autoplay" value="true" />
<param name="autostart" value="1" />
<param name="controls" value="ImageWindow">
<param name="console" value="video">
<!--[if !IE]> <-->
<object type="application/vnd.rn-realmedia" data="yourMovie.rm"width="320" height="240">
<param name="controller" value="true" />
<param name="autoplay" value="true" />
<param name="autostart" value="1" />
<param name="controls" value="ImageWindow">
<param name="console" value="video">
</object>
<!--> <![endif]-->
</object>
<object id=RVOCX classid="clsid:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA"width="320" height="30">
<param name="src" value="yourMovie.rm" />
<param name="controller" value="true" />
<param name="autoplay" value="true" />
<param name="autostart" value="1" />
<param name="controls" value="ControlPanel">
<param name="console" value="video">
<!--[if !IE]> <-->
<object type="application/vnd.rn-realmedia" data="yourMovie.rm"width="320" height="30">
<param name="controller" value="true" />
<param name="autoplay" value="true" />
<param name="autostart" value="1" />
<param name="controls" value="ControlPanel">
<param name="console" value="video">
</object>
<!--> <![endif]-->
</object>
Create a set of web pages that conatin embedded video files (which I provide below). You should have an idex page with links to pages containing the various video formats. Here's an example.
Recommendation: put a copy of the entire navigation menu on each video page to make it easier to jump from one format to another.
Option: Put an iFrame on the main (index) page and load the video pages into it.
Option: Turn the menu into a library item to make it easier to place & update of the video pages.
10 pts |
Went well above and beyond and created something special. |
9 pts |
Went above and beyond requirements (customized the pages; added styles, etc.). |
8 pts |
Did what was required. |
7 pts |
Missing one or more required elements or contains one or more errors. |
0–6 pts |
Poor showing; mostly incomplete or full of errors. |