Multimedia

CSE 190 M (Web Programming) Spring 2007

University of Washington

Except where otherwise noted, the contents of this presentation are © Copyright 2007 Marty Stepp and are licensed under the Creative Commons Attribution 2.5 License.

Valid XHTML 1.0 Strict 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" />

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="application/vnd.rn-realmedia"
data="examples/multimedia/flintstones.rm">
    <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";
...
document.getElementById("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";

document.getElementById("videoarea").appendChild(object);

Practice Problem: Affront to web design