Introduction To Computational Media on the Web (ICM-W) : Week 6
Using Audio/Video on the Web
The World Wide Web has come a long way since people first started putting moving images and audio on it in the mid 1990's. Early online video experiments were often in the form of Animated GIFs. With QuickTime and RealPlayer things got a bit more interesting..
You will notice that there are really two things going on here. The first is
the "Object" tag and associated "Param" tags. These are
included to support Internet Explorer and other browsers that support ActiveX
controls. The second is the "Embed" tag. This is included to support
browsers that utilize the standard Netscape plugin architecture. In order for
your embedded player support the range of browsers available you need to include
both. Also, both tags should include the same set of information. For instance,
if you are going to change the height of the plugin you should change it in
both the "Object" tag and in the "Embed" tag.
There are quite a few tags that you may utilize when you use a QuickTime embedded player.
A full list is available from Apple by following the For more information: QuickTime Embed Tag Attributes.
Some of the more interesting ones are: AUTOPLAY, CONTROLLER and HIDDEN.
If I wanted to make sure the movie plays as soon as it is able, I would set
the AUTOPLAY to true.
If I didn't want a controller to be available
on the page I would set CONTROLLER to false (better make sure that AUTOPLAY
is true in this case). When you have a controller you should increase
the size of the movie by 17 pixels in height.
Things get more interesting when you think about making an audio or video file interactive:
Setting the "ID" (IE) and "name" along with EnableJavaScript="true" (NS/other) attribute(s) allows us get access to the video through JavaScript. You should set the "name" in the embed tag and the id in the object tag to the same value.
Eolas is a company that has a patent on technology related to embedding objects in web pages. Microsoft, after losing a patent fight has put in place a work around which requires the user to click to activate the object/plugin. The other option is to utilize a script to dynamically include the plugin code instead of it being in the original HTML.
It is a bit of a pain to dynamically write the HTML for QuickTime (and other plugins) but there exist several JavaScript libraries that exist to make it easier as well as offer other benefits along the way.
Geoff Stearns' QTObject embed is one of the most elegant and easiest to use.
Here is an example:
<html>
<head>
<!-- QTObject embed by Geoff Stearns geoff@deconcept.com http://blog.deconcept.com/ -->
<script type="text/javascript" src="http://itp.nyu.edu/~sve204/ppm_summer08/qtobject.js"></script>
</head>
<body>
<div id="video">
<script type="text/javascript">
// create the qtobject and write it to the page, this includes plugin detection
// be sure to add 15px to the height to allow for the controls
var myQTObject = new QTObject("http://itp.nyu.edu/~sve204/ppm_summer08/embedded.jpg", "mymovie", "320", "255");
myQTObject.addParam("href", "http://itp.nyu.edu/~sve204/ppm_summer08/embedded.mov");
myQTObject.addParam("target", "myself");
myQTObject.addParam("controller", "false");
myQTObject.write();
</script>
</div>
</body>
</html>
Here is what the above yields:
One of the really nice things about using this script is that the video doesn't automatically load if you use a "placeholder" image. This way many video files can be included on the page without affecting the load time.
The "mymovie" parameter is both the ID and Name attribute that can be used in JavaScript as explained above.
Currently the W3C is working on the specification for HTML 5. Included is a new tag called "video" (there is also one called "audio"). This tag would make video playback universal on browsers but doesn't include support for a specific format due to the fact that there doesn't exist a non-patent encumbered video codec that can be used (though it can be argued that Ogg Theora is such).
Fortunately, in the case of the "audio" tag, they have specified that browsers must support the WAVE format with PCM encoded audio (basically uncompressed audio).