We will begin this section with a timely reminder of how to embed videos into web pages using the classic <embed> and <object> tags.
For this task, you will need to avail yourself of two videos—one in SWF format and the other in WMV format. If you don't have any available at hand, there might be examples available on the Internet. One such example is the trailer for "Big Buck Bunny", available from the Peach Open Movie Project at http://www.bigbuckbunny.org/index.php/trailer-page/. You might have to convert it to the proper formats required for this demo—a good program to use for this is XMedia Recode, which is available at http://www.xmedia-recode.de (German language).
Open up your favourite text editor and add the following code snippet—save this as
videotemplate.html; we will be reusing this in later tasks:<!doctype html> <html> <head> <title>Embedding a video using <embed> and <object> tags</title> </head> <body> </body> </html>
Add the following code snippet in between the
<body></body>tags, replacingexample.swfandvideofilename.wmvwith the filenames of your chosen videos:<!-- code for embedding windows media player --> <object id="mediaplayer" width="192" height="190" classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95"standby="Loading Windows Media Player components..." type="application/x-oleobject"><param name="filename" value="videofilename.wmv"><param name="autostart" value="false"><param name="showcontrols" value="true"><param name="showstatusbar" value="false"><param name="showdisplay" value="false"><embed type="application/x-mplayer2" src="videofilename.wmv" name="mediaplayer"width="192" height="190" showcontrols="1" showstatusbar="0" showdisplay="0" autostart="0"></embed></object> <!-- code for embedding adobe quicktime --> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/ cabs/flash/swflash.cab#version=6,0,40,0" width="468" height="60" id="mymoviename"> <param name="movie" value="example.swf" /><param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <embed src="example.swf" quality="high" bgcolor="#ffffff" width="468" height="60" name="mymoviename" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </embed> </object>
This is an example of what you will see when using the Windows Media player code—I'm using a copy of the "One Big Rabbit" video, available from the Peach Open Movie Project, as shown in the following screenshot:
The code embeds an instance of each of the Windows Media Player and Adobe QuickTime plugins within the webpage; it uses the codebase attribute to reference the relevant plugin. If a hash value is included in the URL provided for this attribute, then the browser will compare this version with the one currently installed and either use it or download a more recent version.
The preceding code snippet highlights a couple of major drawbacks: the embed code doesn't work in all browsers despite using the <embed> and <object> tags within the code block; it also requires the use of external plugins in order to operate correctly.
In the next task, we will be looking at how the preceding code snippet can be simplified using HTML5's <video> tag.