Placing Videos the Standards Compliant Way
You can skip to a specific format’s section by clicking a link from the following list:
mov Format
I learned how to do this from a page called ‘XHTML Quicktime Object‘, which explains how to place the .mov files with some simple CSS hacks.
The hacks are, unfortunately, not standards-compliant. Fortunately, they are only needed for standards-incompliant browsers (Internet Explorer 5 and 6)… thus the hacks can be placed in a CSS file, and can be hidden from other browsers without any problem.
Here’s the CSS code:
/* hides the second object from all versions of IE */
* html object.mov {
display: none;
}
/* displays the second object in all versions of IE apart from 5 on PC */
* html object.mov/**/ {
display: inline;
}
/* hides the second object from all versions of IE >= 5.5 */
* html object.mov {
display/**/: none;
}
Copy it, and place it in a CSS file. You might even call the file something like css_lte_ie_6 (You can also see that in my file I also placed some other IE related CSS hacks).
Here’s how a sample XHTML 1.1 document would look like if I placed the stylesheet hidden from other browsers unless it’s Internet Explorer less than or equal to version number six:
<?xml version='1.0' encoding='iso-8859-1' ?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<meta http-equiv='Content-Type' content='application/xhtml+xml; iso-8859-1' />
<title>Webpage Title</title>
<link rel="stylesheet" href="http://example.com/path/to/stylesheet.css" type="text/css" media="screen" />
<!–[if lte IE 6]><link rel=”stylesheet” href=”http://example.com/path/to/css_lte_ie_6.css” media =”screen” /><![endif]–>
</head>
<body>
<div>
<p>Hello world.</p>
</div>
</body>
</html>
Ok, so here’s the example .mov video…
Greens Keepers - Lotion … greatest homage to Silence of the Lambs IMO.
The video can be placed using double-nested object elements… like this:
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="260"><param name="src" value="http://www.archive.org/download/GreensKeepersLotion/lotionhigh.mov" />
<param name="autoplay" value="false" />
<param name="scale" value="aspect" />
<param name="controller" value="true" />
<param name="loop" value="false" />
<param name="enablejavascript" value="true" />
<object type="video/quicktime" data="http://www.archive.org/download/GreensKeepersLotion/lotionhigh.mov" width="320" height="260" class=”mov”>
<param name=”src” value=”http://www.archive.org/download/GreensKeepersLotion/lotionhigh.mov” />
<param name=”autoplay” value=”false” />
<param name=”scale” value=”aspect” />
<param name=”controller” value=”true” />
<param name=”loop” value=”false” />
<param name=”enablejavascript” value=”true” />
Visit the Ourmedia page for <a href=”http://www.ourmedia.org/node/28937″>Lotion</a>
</object>
</object>
Just remember to set the inner object element’s class to ‘mov’.
Miguel wrote:
Convertí tu chicklet en 80×15 espero que no te moleste
Posted on 14-Jul-06 at 8:13 pm | Permalink
rolandog wrote:
Gracias, Miguel… aunque ya tenia yo botones de 80×15 en la seccion de Plug… pero esta chido el boton animado. Gracias!
Posted on 15-Jul-06 at 12:50 am | Permalink
Stan Bogdanov wrote:
… autoplay does not, but have you tried “autostart”
Posted on 18-Aug-06 at 6:40 am | Permalink
Stan Bogdanov wrote:
….doesn’t work that way…
The DivX web player plugin has a bug when you place any params in the object tag.
This http://flt.nbu.bg/taxonomy/divx_no_embed.html validates but you don’t have the full controls in non-IE browsers as you can get them in IE6 and 7.
Posted on 18-Aug-06 at 6:53 am | Permalink