Multimedia

References

Introduction

Sound and video are important options for many Web sites.

Here are some guidelines and cautions regarding putting sound and video on your Web site:

Give your users the option of either listening to your sound and video files, or bypassing them.
Don't force your musical or video tastes on your users.
Many users already have their own music or video playing.
Some users will not have a sound card or speakers, although this is not a very common situation any longer. Most computers and laptops have at least a sound card now.
Auto-play sounds and videos are generally considered unprofessional.

HTML5 <audio> Tag

The <audio> tag is used to connect your web page to audio files.

Here is a sample of the <audio> tag:

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
  Please upgrade your browser.
</audio>

The controls attribute in the <audio> tag adds audio controls such as play, pause, and volume.

You should also insert text content between the <audio> and </audio> tags for browsers that do not support the <audio> element.

The <audio> tag requires at least one contained/nested <source> tag.

The <audio> tag allows multiple <source> tags. The <source> tags connect to audio files.

The browser will use the first recognized format.

The type attribute's value in each <source> tag is a MIME type. Here is a page which lists some MIME type descriptions.

The audio formats that are currently supported by the various browsers are listed on the W3Schools.com site, on their HTML5 Audio page.

An interesting aspect of the information in the W3Schools chart is that if you convert your audio files into the mp3 and ogg formats, you will support all of the browsers.

Here is a sample page that shows how to put an <audio> tag into an HTML page. This is page audioTagSample.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Audio Tag Sample</title>
  <link rel="stylesheet" href="myStyles.css">
</head>

<body>
	<h3>You can click the "Play" button to listen to this audio sample:</h3>
	<audio controls>
	  <source src="sounds/sound2.ogg" type="audio/ogg">
	  <source src="sounds/sound2.mp3" type="audio/mpeg">
	  Your browser does not support the audio tag.
	  Please upgrade your browser.
	</audio>
</body>
</html>

HTML5 <video> Tag

The <video> tag is used to connect your web page to video files.

(Please note: The <video> tag is NOT used for connecting your page to YouTube videos.)

Here is a sample of the <video> tag:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
  Please upgrade your browser.
</video>

The controls attribute in the <video> tag adds video controls such as play, pause, and volume.

It is also a good idea to always include width and height attributes. If height and width are set, the space required for the video is reserved when the page is loaded. [However, without these attributes, the browser does not know the size of the video, and cannot reserve the appropriate space for it. In this situation, the page layout will change during loading (while the video loads), after the browser figures out what dimensions the video has.]

You should also insert text content between the <video> and </video> tags for browsers that do not support the <video> element.

The <video> tag requires at least one contained/nested <source> tag.

The <video> tag allows multiple <source> tags. The <source> tags connect to video files.

The browser will use the first recognized format.

The type attribute's value in each <source> tag is a MIME type. Here is a page which lists some MIME type descriptions.

The video formats that are currently supported by the various browsers are listed on the W3Schools.com site, on their HTML5 Video page.

An interesting aspect of the information in the W3Schools chart is that if you convert your video files into the mp4 and ogg formats, you will support all of the browsers.

Here is a sample page that shows how to put a <video> tag into an HTML page. This is page videoTagSample.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Video Tag Sample</title>
  <link rel="stylesheet" href="myStyles.css">
</head>

<body>
	<h3>You can click the "Play" button to view this video sample:</h3>
	<video width="320" height="240" controls>
	  <source src="video/clock.mp4" type="video/mp4">
	  <source src="video/clock.ogv" type="video/ogg">
	  Your browser does not support the video tag.
	  Please upgrade your browser.
	</video>
</body>
</html>

Converters

You will probably need to convert some multimedia files from one audio format to another, or from one video format to another, at some time in the future.

There are gobs of options available for converting your multimedia files. Listed here are several online converters that appear to be fairly good:

Compressors

If you have found a video file that is too large, you can use a "compressor" to reduce its size.

Some online compressors that I have found are these:

Adding PDF documents with the <object> Tag

You can display a PDF document in your Web page with an object tag.

Such an <object> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
  <title>Class Syllabus</title>
</head>

<body>
  <object data="2015SU-IMED-1316-83701-Link.pdf" type="application/pdf" width="900" height="460">
    <param name="src" value="2015FA-IMED-1316-83701-Link.pdf">
    <p>It appears you don't have a PDF plugin for this browser.
    No biggie... you can <a href="2015FA-IMED-1316-83701-Link.pdf">click here to
    download the PDF file.</a>
    </p>
  </object>
</body>
</html>

The above code works like this.

Please note these points about the above code:

There is only one <object>...</object> tag in this code. All of the major browsers can handle this object tag and its attributes.
The object tag has explicit width and height attributes. Most browsers will not display the pdf document without these attributes.
The <param> tag is used by some browsers just in case they don't understand the data attribute of the object tag.
The <p>...<p> tag that is contained by the object tag will display in the user's browser only if the browser does not understand the object tag. Most browsers will display the pdf document, so the user will not see the paragraph's contents, which is a good thing.

Legal Issues

You should be aware that if you get your sound or video files from somewhere on the Web, chances are great that the files are not legally yours to use. In all likelihood, they were copied in violation of copyright laws.

In an educational setting like your class site, you can use copyrighted material as long as you give proper credit to the copyright owner and/or author.

To be safe, you should create your own files, or do a Web search for free (royalty-free) files.

Adding Sound with the <a> Tag

[OPTIONAL (historical) section]

(This is NOT the currently recommended way of adding sound to your Web page.)

You can link to a sound file by using a standard <a> tag, like this:

  <a href="sounds/cowboy.mp3" target="soundStuff">Listen to my sound file</a>.

When a user clicks on a link like this one, the browser may open a plug-in program that plays the sound file, or it may allow the user to download the file and save it to their hard drive. Usually, if a plug-in is started, this plug-in program will be the Windows Media Player, QuickTime, or RealPlayer.

The above link would look like this in the page:

Listen to my sound file.

Adding Sound with the <embed> Tag

[OPTIONAL (historical) section]

(This is also NOT the currently recommended way of adding sound to your Web page.)

You can also use an <embed> tag to include sound. You can tell the browser to either include the "control panel" for the player, or not. An <embed> tag looks something like this:

  <embed src="sounds/buzz.mp3" height="40" width="144"
    align="bottom">
  </embed>

The above code works like this.

In Internet Explorer, you can include a playcount attribute to tell the browser to play the sound more than once, like this:

  <embed src="sounds/confrontations.mp3" height="40" width="144"
    align="bottom" playcount="3">
  </embed>

The above code works like this.

You can even tell the browser to hide the control panel and still play the sound, like this:

  <embed src="sounds/mocking.mp3" height="40" width="144"
    align="bottom" hidden="true">
  </embed>

If you do use this hidden attribute, you should put this code toward the end of the HTML page. The user can be looking at some of your page while the sound file is downloading.

The above code works like this.

As I mentioned in the Introduction, it is best to not make the sound automatically start playing. You accomplish this requirement with the autostart attribute, like this:

  <embed src="sounds/farewell.mp3" height="40" width="144"
    align="bottom" autostart="false">
  </embed>

The above code works like this.

You should note that the embed tag does have a cancel tag (</embed>).

<noembed>

[OPTIONAL (historical) section]

For browsers that don't understand the <embed> tag, you can instruct the browser to display a link to the sound or video, with a <noembed> tag, like this:

  <embed src="sounds/sample.wav" height="40" width="144"
    align="bottom">
  </embed>
  <noembed>
    <a href="sounds/sample.wav">Listen to the sample sound</a>.
  </noembed>

Actually, the way this works is that browsers that do understand the <embed> tag, also understand the <noembed> tag but are smart enough to ignore the contents of the <noembed> tag. Browsers that do not understand the <embed> tag probably also will not understand the <noembed> tag and will simply display the code inside the <noembed> tag just as if the tag were not there. In the above code, such a browser would simply display the hypertext link.

Adding Sound (mp3) with the <object> Tag

[OPTIONAL (historical) section]

(This is NOT the currently recommended way of adding sound (mp3) to your Web page.)

There are problems with using the <embed> tag:

The <embed> tag is a proprietary extension of HTML which the W3C has never supported. Netscape originally invented the <embed> tag.
Because the W3C has never supported the <embed> tag, the XHTML Validator at the W3C site throws several errors on any <embed> tags that it finds in your page.

Fortunately, there is an alternative to the <embed> tag. The alternative is the <object> tag. There are potential problems with the <object> tag, though, so you have to be really careful how you use it.

This handout will not cover the potential problems, but we will see the currently accepted way (as of April 2007) to get around most of the issues.

The <object> tag scheme that is presented in this section of the handout is largely courtesy of some very helpful information that we found at the A List Apart Web site.

Here is some code that could be used to put a sound file in your HTML page with the <object> tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
  <title>Object Sound</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
Weird Space Sound:
<br />
  <object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
    id="player" width="300" height="60">
    <param name="url"
      value="sounds/sound2.mp3" />
    <param name="src"
      value="sounds/sound2.mp3" />
    <param name="showcontrols" value="true" />
    <param name="autostart" value="false" />
  <!--[if !IE]>-->
    <object type="audio/mpeg"  width="300" height="80"
      data="sounds/sound2.mp3">
      <param name="src"
        value="sounds/sound2.mp3" />
      <param name="autostart" value="false" />
      <param name="controller" value="true" />
    </object>
  <!--<![endif]-->
  </object>
</body>
</html>

You can see and hear how this code works, here.

Please note these points about the above code:

The classid attribute that is in the <object> tag above is specific to the Windows Media Player.
The sound file's URL is in several different <param> tags and even in a data attribute in the second <object> tag. This situation is made necessary by how the various browsers look for this URL.
The two <object> tags are necessary, again, because of how the various browsers handle the attributes and parameter (<param>) tags.
The second <object> tag is used by non-IE browsers.
The second <object> tag has a type attribute. The value of this attribute is a special value called a MIME type. This particular type is for the Windows Media Player. Here is a list of some common MIME types.
This code:
is an IE-specific "conditional comment". It is used to hide the second <object> tag from IE. Gads. Its closing counterpart is
```

```

Adding Sound (wav) with the <object> Tag

[OPTIONAL (historical) section]

(This is NOT the currently recommended way of adding sound (wav) to your Web page.)

Here is some code that could be used to put a *.wav sound file in your HTML page with the <object> tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
  <title>Object Sound</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
Weird Space Sound:
<br />
  <object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
    id="player" width="300" height="60">
    <param name="url"
      value="sounds/tilt.wav" />
    <param name="src"
      value="sounds/tilt.wav" />
    <param name="showcontrols" value="true" />
    <param name="autostart" value="false" />
  <!--[if !IE]>-->
    <object type="application/x-mplayer2"  width="300" height="80"
      data="sounds/tilt.wav">
      <param name="src"
        value="sounds/tilt.wav" />
      <param name="autostart" value="false" />
      <param name="controller" value="true" />
    </object>
  <!--<![endif]-->
  </object>
</body>
</html>

You can see and hear how this code works, here.

Please note these points about the above code:

The classid attribute that is in the <object> tag above is specific to the Windows Media Player.
The MIME type is for Windows Media Player, and is a generic MIME type that works with Firefox.

Adding a Quicktime Movie with the <object> Tag

[OPTIONAL (historical) section]

For a Quicktime movie, you will need code like this (note the different classid attribute, and also the codebase attribute):

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
  codebase="http://www.apple.com/qtactivex/qtplugin.cab"
  width="320" height="260">
  <param name="src"
    value="http://www.sarahsnotecards.com/catalunyalive/diables.mov" />
  <param name="controller" value="true" />
  <param name="autoplay" value="false" />
  <!--[if !IE]>-->
  <object type="video/quicktime"
    data="http://www.sarahsnotecards.com/catalunyalive/diables.mov"
    width="320" height="260">
    <param name="autoplay" value="false" />
    <param name="controller" value="true" />
  </object>
  <!--<![endif]-->
</object>

This Quicktime movie can be played here.

Please note these points about the above code:

The second <object> tag has a type attribute. The value of this attribute is a special value called a MIME type. This particular type is for the Quicktime player. Here is a list of some common MIME types.

Adding a Flash swf Movie with the <object> Tag

[OPTIONAL (historical) section]

For a Flash swf movie, you will need code like this (note the different classid attribute, and also the codebase attribute):

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
   width="760"
   height="440"
   id="Universe">
   <param name="movie" value="flash/scale_of_universe_ng.swf" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="#FFFFFF" />
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash"
  data="flash/scale_of_universe_ng.swf"
  width="760" height="440" id="Universe">
  <param name="movie"
    value="flash/scale_of_universe_ng.swf" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#FFFFFF" />
  </object>
  <!--<![endif]-->
</object>

This Flash movie can be played here.

Please note these points about the above code:

The codebase attribute in the first <object> tag tells the IE browser where it can find a more recent Flash player if the user's player is older than the version given in this attribute. You should code this attribute to the version of Flash that you used to create the Flash movie.
The second <object> tag has a type attribute. The value of this attribute is a special value called a MIME type. This particular type is for a Flash movie. Here is a list of some common MIME types.

Adding a Flash flv movie with the jwplayer script

[OPTIONAL (historical) section]

As of May 2012, the "plugin" flv players are badly inconsistent in their behavior in the various browsers. Fortunately, the folks at http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12/install-the-jw-player-for-flash-v5 have created a JavaScript and Flash swf solution to playing flv files in a browser.

Here is an example of using the jwplayer script:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
  <title>Object Flash FLV</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<h3>FLV Test Pattern:</h3>
<br />
<h3>jwplayer:</h3>
<!-- The jwplayer code was obtained at:
	http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12/install-the-jw-player-for-flash-v5
-->
<script type='text/javascript' src='jwplayer.js'></script>

<div id='mediaplayer'></div>

<script type="text/javascript">
  jwplayer('mediaplayer').setup({
    'flashplayer': 'player.swf',
    'id': 'playerID',
    'width': '480',
    'height': '270',
    'file': 'barsandtone.flv'
  });
</script>
</body>
</html>

This Flash flv movie can be played here in the jwplayer script and swf player.

Please note these points about the above code:

The flv format is not directly playable by most browsers.
The jwplayer script and player.swf Flash movie together provide for browsers to "play" flv movies.
The school server has some kind of restriction on it, which does not allow these scripts to play. I have successfully played them on my local computer and on my other web sites.
You can go to the http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12/install-the-jw-player-for-flash-v5 site to get the zipped files for the jwplayer, or you can try downloading and saving the two "player" files from these two links. (In Google Chrome, you can right-click and choose "Save link as...".)
- jwplayer.js
- player.swf
You will need to upload (FTP) the two "player" files to the same directory as your HTML page and your FLV movie, unless you want to change the variables in the <script>...</script> tag as shown in the sample code, to point to another directory/folder.

Adding Video (avi) with the <object> Tag

[OPTIONAL (historical) section]

Adding an avi video file is pretty much the same as adding a sound file. Of course, you reference a video clip instead of a sound file. Also, you can adjust the size for optimum quality. And, also as with a sound file, you can use a standard anchor tag if you wish.

But you should almost always use an <object> tag, instead. Such an <object> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>A Clock Movie</title>
</head>

<body>
  Here is a clock:
  <br />
  <br />
  <object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
    id="player" width="321" height="321">
    <param name="url"
      value="video/clock.avi" />
    <param name="src"
      value="video/clock.avi" />
    <param name="showcontrols" value="true" />
    <param name="autostart" value="false" />
  <!--[if !IE]>-->
    <object type="video/avi"  width="321" height="321"
      data="video/clock.avi">
      <param name="src"
        value="video/clock.avi" />
      <param name="autostart" value="false" />
      <param name="controller" value="true" />
    </object>
  <!--<![endif]-->
  </object>
</body>
</html>

The above code works like this.

Please note these points about the above code:

The second <object> tag has a type attribute. The value of this attribute is a special value called a MIME type This particular MIME type is for the Windows Media Player. Here is a list of some common MIME types.

Adding Video (wmv) with the <object> Tag

[OPTIONAL (historical) section]

Adding a wmv video file is pretty much the same as adding a sound file. Of course, you reference a video clip instead of a sound file. Also, you can adjust the size for optimum quality.

Use an <object> tag like this one:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>One Lap on the Oasis of the Seas</title>
</head>

<body>
  Take a lap on the Oasis of the Seas:
  <br />
  <br />
  <object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
    id="player" width="430" height="300">
    <param name="url"
      value="video/One Lap at Night on Oasis.wmv" />
    <param name="src"
      value="video/One Lap at Night on Oasis.wmv" />
    <param name="showcontrols" value="true" />
    <param name="autostart" value="false" />
  <!--[if !IE]>-->
    <object type="video/x-ms-wmv"  width="430" height="300"
      data="video/One Lap at Night on Oasis.wmv">
      <param name="src"
        value="video/One Lap at Night on Oasis.wmv" />
      <param name="autostart" value="false" />
      <param name="controller" value="true" />
    </object>
  <!--<![endif]-->
  </object>
</body>
</html>

The above code works like this.

Please note these points about the above code:

The second <object> tag has a type attribute. The value of this attribute is a special value called a MIME type This particular MIME type is for the Windows Media Player. Here is a list of some common MIME types.

Dallas College, Richland Campus Multimedia Learning Center

Multimedia

References

Introduction

HTML5 <audio> Tag

HTML5 <video> Tag

Converters

Compressors

Adding PDF documents with the <object> Tag

Legal Issues

Adding Sound with the <a> Tag

Adding Sound with the <embed> Tag

<noembed>

Adding Sound (mp3) with the <object> Tag

Adding Sound (wav) with the <object> Tag

Adding a Quicktime Movie with the <object> Tag

Adding a Flash swf Movie with the <object> Tag

Adding a Flash flv movie with the jwplayer script

Adding Video (avi) with the <object> Tag

Adding Video (wmv) with the <object> Tag