Web Programming Step by Step

Lecture XX
Multimedia

Except where otherwise noted, the contents of this presentation are Copyright 2010 Marty Stepp and Jessica Miller.

Valid XHTML 1.1 Valid CSS!

Multimedia is fun

File formats

Image file formats

Raster and vector graphics

bitmap vs. vector

Audio file formats

Video file formats

  • comparisons of formats: 1, 2

Flash

Linking to multimedia files

<a href="video.avi">My video</a>

File types and browser plugins

browser plugins

Embedded objects: <object>

<object data="video.avi" type="video/avi"></object>

Parameters: <param>

<object id="slider1" width="100" height="50">
	<param name="BorderStyle" value="thick" />
	<param name="MousePointer" value="hourglass" />
	<param name="Enabled" value="true" />
	<param name="Min" value="0" />
	<param name="Max" value="10" />
</object>

Embedding Audio Files

<object type="MIME type" data="fileURL"></object>
<object type="audio/wav" data="yoda.wav"></object>
<object type="audio/mpeg" data="particle_man.mp3"></object>

Embedding YouTube video

<object width="width" height="height"
 type="application/x-shockwave-flash"
 data="videoURL">
	<param name="wmode" value="transparent" />
	parameters
</object>
<object width="425" height="350"
 type="application/x-shockwave-flash"
 data="http://www.youtube.com/v/eKgPY1adc0A">
	<param name="wmode" value="transparent" />
</object>

Embedding QuickTime Video

<object width="width" height="height"
 type="video/quicktime"
 data="fileURL">
	parameters
</object>
<object width="320" height="240"
 type="video/quicktime"
 data="examples/multimedia/win98.mov">
	<param name="autoplay" value="true">
	<param name="controller" value="true">
</object>

Embedding Real Video

			<object width="width" height="height"
			 type="application/vnd.rn-realmedia"
			 data="fileURL">

				parameters
			</object>
			
			<object width="320" height="240"
			type="application/vnd.rn-realmedia"

			data="examples/multimedia/flintstones.rm">
				<param name="autostart" value="true" />
			</object>
			

Embedding Windows Media

<object width="width" height="height" type="video/x-ms-wmv"
 data="fileURL">
	parameters
</object>
<object width="320" height="240"
type="video/x-ms-wmv"
data="examples/multimedia/billgsux.wmv">
	<param name="autostart" value="true" />
</object>

DOM and multimedia

// plays the multimedia file of the given type
var object = $(document.createElement("object"));
object.type = "MIME type";
object.data = "url";
...
$("id").appendChild(object);

DOM and multimedia example

// plays the multimedia file of the given type
var object = $(document.createElement("object"));
object.type = "application/x-shockwave-flash";
object.data = "http://www.youtube.com/v/PZUTleBwiiw";
object.style.width = "425px";
object.style.height = "350px";
$("videoarea").appendChild(object);