Audio_and_Video

One of the biggest challenges to putting audio and video on the web is the vast proliferation of file formats that are "out there." Although, not every computer can read any particular one of these formats, I am going to present how to use two of the most common, the mp3 audio format and the mov (quicktime) video format. Many of the techniques on this page will also work for other formats, with some minor tweaks. (As we will see, the .mp3 and .mov have "types" associated with them. For a pretty comprehensive list of other possible types, try [|this].)

The second issue with the inclusion of multimedia on web pages is that there is some argument between which tag to use or. The majority of browsers support ... for now. The W3C has officially endorsed, but not all of the browsers are up to speed on it. As a consequence, we will use both for maximum compatibility. The trick to this is that the tag has a few attributes of its own, but it also contains several optional unary tags between its and tags. The tags are viewed as part of how the is laid out, but anything else there will not show up if the works correctly. This lets you put in a message in plain text between ... that the user will see if the tag has a problem. code format="html4strict"        The selected graphic will not load. </object. code If the object loaded correctly, then that is what you will see, but if you have a problem, the user will see the message, "The selected graphic will not load." That message will not appear if the object loads.

This feature allows us to put the tag inside the ... pair, just the way we did with the message. It will only be used if the browser can't load the, in which case it will try to load the object. But if the works, the will be ignored.

Both the object and the embed have various attributes for audio or video inclusion. They include things like the location of the multimedia file, what type of fle it is, how large it should appear on the screen, whether it should start playing when the page loads, whether the user should see controls, and more.

Here is a typical script for a sound inclusion. code format="html4strict"      code media type="custom" key="2750015" As you can see, the and its s have the same essential information as the tag - almost word for word. Just remember that the tag is a backup plan to show the same content if the tag doesn't work on the user's browser. So it is supposed to be redundant.

The param tag is very much like adding parameters to the tag, itself. Honestly, I don't understand the reasoning myself, except that perhaps it allows the more generic multimedia (e.g., height and width) to be in the tag's syntax and allows the more format-specific information to be added in separately. This would make the tag more flexible in the future. (Holograms, anyone?) The tag has two attributes of its own, "name" and "value." So the  tag is essentially equivalent to placing "src='moo.mp3'" into the tag, itself.

For sounds, you don't need a lot of space on the page- just room for the controller, if you want one. This is a 16px tall bar that can be as wide as you want.

There is a way to make the audio stop or play with javascript commands, which we will discuss in a later section.

Video
Embedding a video is very similar to embedding audio. Instead of using the "audio/mpeg" type, you use the "video/quicktime" type. You can decide whether to show the controller - the "controller" attribute should be "true" or "false." (I think - please test this and update the page, y'all!) The other thing that is different is that you really need to match the size of the video itself. (On the Mac, you can select the video file in the Finder in "Column View" mode - it will show a tiny preview of the movie, with the dimensions listed below it.) If you wish to show the controller, you should add 16px to the height to provide space for it. code      

code media type="custom" key="2750053" (Note: the source video I used for this demo is silent. Video clips with sound work fine.)

The important thing to remember with both the audio and video pages you see here is that the information (such as the file URL) is put in two different places.

Letting other things control the sound or movie.
Here is a way to have a button start a sound. Create a with "hidden" visibility. Then when the user presses a button, a javascript function will update that div's innerHTML:

code format="html4strict" function playSound {  theLayer = document.getElementById("hiddenSoundLayer"); theLayer.innerHTML = "<param name='src' value='moo.mp3' /><param name='autoplay' value='true' /><param name='type' value='audio/mpeg' /><embed id='soundplay' name='soundObject' src = 'moo.mp3' autoplay='true' type='audio/mpeg'> "; } code Notice that the autoplay in this case is set to "true." This way, the sound will load as soon as the playSound method causes the to reload. To stop a sound, fill the innerHTML with an empty string.