Web Programming Step by Step, 2nd Edition

Lecture XX: Embedding Multimedia Content

Reading: none

Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

Valid HTML5 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);