GRC: Multimedia

Integrating Multimedia into Your Website

Now that you’ve learned how to work with static images, the natural next step is to work with multimedia. The term multimedia encompasses everything we see and hear on a web page: audio, video, and animation, as well as static images and text. In this section, you won’t learn how to create any particular audio, video, or animation, but you will learn how to include such files in your site, through either linking or embedding the content.

Remember, though, that not every user has devices that will play your media type, nor do all users have broadband Internet connections which allow these large files to transfer quickly. Always warn your visitors that the links they click will take them to multimedia files and offer them the choice to view or listen to the content—don’t force the files upon them.

Creating multimedia of any kind can be a challenging and complicated task. If you’re planning to create your own content from scratch, you’ll need far more than this book to become the next crackerjack multimedia developer. After you have some content, however, this section will show you how to place your new creations into your web pages.

For those of us who are artistically challenged, several alternative ways to obtain useful multimedia assets are available. Aside from the obvious (such as hiring an artist), here are a few suggestions:

• Much of the material on the Internet is free. Of course, it’s still a good idea to double-check with the author or current owner of the content; you don’t want to be sued for copyright infringement. In addition, various offices of the U.S. government generate content which, by law, belongs to all Americans. (For example, any NASA footage found online is free for your use.)

• Many search engines (google.com, yahoo.com, bing.com, and so on) have specific search capabilities for finding multimedia files. As long as you are careful about copyright issues, this can be an easy way to find multimedia related to a specific topic. A simple search for sample Flash animations, sample QuickTime movie, or sample audio files will produce more results than you can handle.

• If you are creatively inclined, determine the medium you like most—for some of you it might be video production, others may enjoy audio production, and still others might want to dabble in animation. After you have determined a starting point, look into the various types of software which will enable you to create such artistic masterpieces. Many companies provide multimedia software, such as Adobe (http://www.adobe.com/) and Apple (http://www.apple.com/).

Linking to Multimedia Files

The simplest and most reliable option for incorporating a video or audio file into your website is to simply link it in with <a href>, exactly as you would link to another HTML file.

Note

Regardless of the specific media types shown in this chapter, the procedures shown for incorporating multimedia into your web pages will be similar no matter which media format you choose.

For example, the following line could be used to offer a MOV video of a hockey game:

<a href="hockey.mov">View the hockey video clip.</a>

When the user clicks the words View the hockey video clip., the hockey.mov QuickTime video file is transferred to her computer from your web server. Whichever helper application or plug-in she has installed automatically starts as soon as the file has finished downloading. If no compatible helper or plug-in can be found, the web browser will offer her a chance to download the appropriate plug-in or save the video on her hard drive for later viewing.

Note

In case you’re unfamiliar with helper applications (helper apps for short), they are the external programs that a web browser calls on to display any type of file it can’t handle on its own. Generally, the helper application associated with a file type is called on whenever a web browser can’t display that type of file on its own.

Plug-ins are a special sort of helper application installed directly into a web browser and they enable you to view multimedia content directly within the browser window.

The click action results in the browser either playing the video with the help of a plug-in (if one is found that can play the clip) or deferring to a suitable helper application.

If you change the link from pond.wmv (Windows Media) to pond.mov (QuickTime), your browser handles the link differently. Instead of launching another program, the QuickTime plug-in enables you to view the movie clip directly in the browser window.

As you might have guessed, this approach of using a simple link to play multimedia files offers the best backward compatibility because the browser bears all the responsibility of figuring out how to play a multimedia clip. The downside to this is that you don’t have much control over how a clip is played, and you definitely can’t play a clip directly in the context of a page.

Note

If your browser has no support for QuickTime, you can download the QuickTime player free from Apple at http://www.apple.com/quicktime/. Even if you do have QuickTime installed, some browsers might still play QuickTime movies differently based on whether a plug-in is installed. For example, on my Windows computer, Internet Explorer and Firefox both play QuickTime movies directly in the browser window via a plug-in, whereas Opera launches QuickTime as a helper application.

Embedding Multimedia Files

XHTML contains a standard <object> tag that is the preferred way to embed multimedia of any kind in a web page. This tag is used instead of the old <embed /> tag that you might still see in some HTML source code.

Embedding a multimedia file into a page produces a set of software controls that allow the file to be played directly—no secondary window is necessary, and there’s no need to navigate away from the page you are on. Following is code to embed the pond video using the <object> tag by itself:

This code isn’t too terribly complicated when you consider that it literally embeds a video directly into your web page (see Figure 8.22). The messiest part of the code is the classid attribute of the <object> tag, which is set to a long alphanumeric code. This code is the global ID for Windows Media Player, which means that you’re telling the <object> tag to embed Windows Media Player on the page to play the video clip. You can just copy and paste this code into your own web pages.

Figure 8.22 The <object> tag enables you to embed a video clip on a web page while specifying which media player is to play it.

Note

It’s important to note that Windows Media Player is a sophisticated enough media player that it automatically streams multimedia files, which means that it begins playing them after loading only the first few seconds of content. The idea is that the rest of the content is loaded in the background while you’re watching or listening to earlier portions. The result is that visitors don’t have to wait through long download times when viewing or listening to your multimedia clips.

The width and height attributes of the <object> tag determine the size of the embedded Windows Media Player window. Some browsers will automatically size the embedded player to fit the content if you leave these attributes off, whereas others won’t show anything at all. Play it safe by setting them to a size that suits the multimedia content being played.

There are four <param> tags within the <object> tag that are responsible for additional details about how the clip is to be played. Each tag has two attributes, name and value, which are responsible for associating data (value) with a particular setting (name). In this example, the URL for the media clip is set to pond.wmv. The third parameter, uiMode, determines which buttons and user interface options are made available by Windows Media Player—full indicates that all user interface features are enabled, such as the control buttons and volume slider. Finally, the autoStart parameter is set to false so that the video clip does not automatically start playing when the page is opened in a browser.

The type parameter is perhaps the trickiest. It identifies the type of media being displayed, which in this case is a Windows Media Video (WMV) file. This media type must be specified as one of the standard Internet MIME types.

A MIME type is an identifier for uniquely identifying different types of media objects on the Internet. MIME stands for Multipurpose Internet Mail Extensions, and this name comes from the fact that MIME types were originally used to identify email attachments. These MIME types should be used in the type attribute of the <object> tag to identify what kind of multimedia object is being referenced in the data attribute.

Following are the MIME types for several popular sound and video formats you might want to use in your web pages:

• WAV Audio—audio/x-wav

• AU Audio—audio/basic

• MP3 Audio—audio/mpeg

• MIDI Audio—audio/midi

• WMA Audio—audio/x-ms-wma

• RealAudio—audio/x-pn-realaudio-plugin

• AVI—video/x-msvideo

• WMV—video/x-ms-wmv

• MPEG Video—video/mpeg

• QuickTime—video/quicktime

Listing 8.7 shows the relevant code for the pond web page, where you can see the <object> tag as it appears in context.

Listing 8.7 Using an <object> Tag to Directly Embed a WMV Video Clip

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Fun in the Pond</title>
</head>

<body>
  <h1>Fun in the Pond</h1>
  <div style="float:left; padding:3px">
    <object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
     width="320" height="305">
     <param name="type" value="video/x-ms-wmv" />
     <param name="URL" value="pond.wmv" />
     <param name="uiMode" value="full" />
     <param name="autoStart" value="false" />
     <embed width="320" height="305" type="video/x-ms-wmv"
     src="pond.wmv" controls="All" loop="false" autostart="false"
     pluginspage="http://www.microsoft.com/windows/windowsmedia/" />
    </object>
    </div>
    <p>Michael's backyard pond is not only a fun hobby but also
    an ongoing home improvement project that is both creative and
    relaxing.</p>
    <p>He has numerous fish in the pond, all Koi from various places
    as far as Japan, Israel, and Australia. Although they don't bark,
    purr, or fetch anything other than food, these fish are his pets,
    and good ones at that.</p>
  </body>
</html>

Note

Because the <embed /> tag is not supported in XHTML, it will prevent your pages from validating. Unfortunately, there really is no workaround for this problem—we’ll just have to wait for browsers to fully support the <object> tag by itself or move to the <embed /> element of HTML5.

You might notice that there’s some extra code that didn’t appear in the earlier <object> tag example. Unfortunately, as discussed earlier in the section, not all web browsers are entirely consistent in their support of the <object> tag. For this reason, it is necessary to include an <embed /> tag within the <object> tag to account for browser inconsistencies. This isn’t an ideal solution, but it’s all we have while browser vendors continue to lag behind prevailing standards. If you pay close attention, you’ll notice that the <embed /> tag contains all the same information as the <object> tag.

Note

Video files aren’t the only media files you can include within your website using the <object> and <embed /> tags. Adding any multimedia file will follow the same process. To determine exactly which classid and codebase attributes to use, as well as additional parameters (in the <param /> tags), use your search engine to look up something like object embed mediatype, where mediatype is Real Audio, QuickTime, Flash, or whatever you want.

The <object> tag is a bit more complex than what is revealed here. However, you don’t need to know how to use the more advanced facets of the <object> tag just to play multimedia content. In other words, it isn’t important for you to become a multimedia guru to share some multimedia clips on your web pages.

Additional Tips for Using Multimedia

Before you add video, audio, or animations to your website, first ask yourself if you really should. When you use these types of multimedia, be sure to do so for a reason. Gratuitous sound and video, just like gratuitous images, can detract from your overall message. Then again, if your message is “Look at the videos I have made” or “Listen to my music and download some songs,” then multimedia absolutely must play a role in your website.

Here are a few additional tips to keep in mind:

• Don’t include multimedia in a page and set it to automatically play when the page loads. Always give users the option to start (and stop) your sound or video.

• When possible, give users a choice of multimedia players. Don’t limit yourself to multimedia content playable by only one type of player on only one operating system.

• Multimedia files are larger than the typical graphics and text files, which means you need to have the space on your web server to store them, as well as the bandwidth allotment to transfer them to whomever requests them via your website.

• If your site is entirely audio or video and offers very little by way of text or graphics, understand that a certain segment of your audience won’t see or hear what you want to present because of the limitations of their system or bandwidth. Provide these users with additional options to get your information.

• Leverage free online video hosting services, such as YouTube (http://www.youtube.com/). Not only does YouTube provide storage for your video clips, it will provide you with the code necessary to embed the video in your own web page. For example, Figure 8.23 shows the YouTube page for the cutest puppy in the world. If you copy and paste the text from the Embed area shown in the figure, you would get the following:

Figure 8.23 YouTube provides storage of your video files as well as links and <object> code for use in your own pages.

You could then insert the code into your web page.

GRC

Monday, March 30, 2015

Multimedia

No comments:

Post a Comment