What You’ll Learn in This Hour:
How to link to multimedia files
How to embed multimedia files
How to use HTML5 audio and video elements
Additional tips for using 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 previous hours, you learned how to use images and text; in this hour, you learn about including the other types of multimedia in your websites. You don’t learn how to create any particular audio or video, but you do learn how to include such files in your site, through either linking or embedding the content.
Before even thinking about including multimedia in your site, remember that not every user has devices that will play your media type, nor do all users have broadband Internet connections that 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.
The simplest and most reliable option for incorporating a video or audio file into your website is to simply link it in with an <a>
tag, exactly as you would link to another HTML file.
For example, you could use the following line to offer an MOV video of an adorable kitten:
<a href="cute_kitten.mov">View an adorable kitten!</a>
When the user clicks the words View an adorable kitten!
, the cute_kitten.mov
QuickTime video file is transferred to his or her computer from your web server. Whichever helper application or plug-in the user 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 offers the user a chance to download the appropriate plug-in or save the video on the 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. They enable you to view multimedia content directly in the browser window.
Listing 12.1 contains the code for a web page that uses a simple image link to play a video in Windows Media file format. In addition to the image link, a link is placed within the text to provide context for the user.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fun in the Pond</title>
</head>
<body>
<h1>This Kitten Loves to Play!</h1>
<div style="border-style:none; float:left; padding:12px"><a
href="kitten.wmv"><img src="projector.gif" alt="Kitten Video" /></a>
</div>
<p>All kittens love to play, but this one is particularly fond of her
yellow stuffed banana toy!</p>
<p>Click <a href="kitten.wmv">here</a> or on the projector graphic to
see a movie clip of this kitten in action.</p>
</body>
</html>
This code simply uses the projector.gif
GIF image as a link to the kitten.wmv
video clip. Figure 12.1 shows the pond sample page with the projector image in view. When the image is clicked, the Windows Media Player is invoked and begins to play the movie.
To view the video, you need only click the animated projector (or the text link in the paragraph). This 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 kitten.wmv
(Windows Media) to kitten.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 (see Figure 12.2).
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 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.
HTML has long contained a standard <object>
element for embedding multimedia files in a web page. This element is widely supported in both desktop and mobile browsers and is used to represent a type of resource to be viewed or played in the browser but using an external plug-in.
Embedding a multimedia file into a web 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 kitten video, which you saw earlier, using the <object>
tag:
<object
width="320"
height="240"
type="video/x-ms-wmv"
data="pond.wmv"
</object>
You can see the result of this code in Figure 12.3. This code isn’t much more complicated than adding an image to your web page; the only real difference is that here you specify the file type (in this case, video/x-ms-wmv
).
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. Visitors thus 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>
element determine the size of the embedded player (Windows Media Player, in this example). Some browsers automatically size the embedded player to fit the content if you leave these attributes off, whereas others don’t show anything. Play it safe by setting them to a size that suits the multimedia content being played.
Only two other attributes are necessary to display the appropriate video file: the data
attribute, which has a value of the filename (or URL to the file) you want to play, and the type
attribute, which identifies the type of media being displayed. In this case, the file is a Windows Media Video (WMV) file, specified by the 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>
element to identify what kind of multimedia object the data
attribute is referencing.
Following are the MIME types for several popular sound and video formats you might want to use in your web pages:
WAV Audio—audio/vnd.wave
MP3 Audio—audio/mpeg
MP4 Audio—audio/mp4
WMV—video/x-ms-wmv
MPEG Video—video/mpeg
MPEG4 Video—video/mp4
QuickTime—video/quicktime
Listing 12.2 shows the relevant code for the pond web page, where you can see the <object>
element as it appears in context.
<!DOCTYPE html>
<html lang="en">
<head>
<title>This Kitten Loves to Play!</title>
</head>
<body>
<h1>This Kitten Loves to Play!</h1>
<div style="float:left; padding:12px">
<object
width="320"
height="240"
data="kitten.wmv"
type="video/x-ms-wmv">
</object>
</div>
<p>All kittens love to play, but this one is particularly fond
of her yellow stuffed banana toy!</p>
<p>She is also fond of paper that crinkles, cardboard boxes, tunnels,
and blanket forts.</p>
</body>
</html>
Although this section has discussed “embedding” a multimedia object using the <object>
element, you can use another element to achieve the same goal: the appropriately named <embed />
element. There’s a good reason I didn’t talk about the <embed />
element first—it has a negative and confusing history. In the days before HTML5, multimedia objects could be embedded in web pages in two ways: using <object>
(part of the official specification) or using <embed />
(not part of the official specification, but implemented by the old Netscape browser). During this time, if you wanted to ensure that your embedded multimedia object was visible in all browsers, you used a little trickery and wrapped your <embed />
element inside an <object>
element, like so:
<object
width="320"
height="240"
data="kitten.wmv"
type="video/x-ms-wmv">
<embed
width="320"
height="240"
type="video/x-ms-wmv"
src="kitten.wmv" />
</object>
Browsers that knew what to do with <object>
elements did so and ignored the <embed />
element. But browsers that ignored the <object>
element and knew what to do with the <embed />
element did just that. This was as annoying to web developers then as it is confusing to explain now.
Now, in the era of HTML5, both the <object>
and <embed />
elements are valid, and you can use either one without having to use both. The only difference between the general usage of the two is that the <object>
element uses the data
attribute to refer to the multimedia resource, whereas the <embed />
element uses the src
attribute (much like the <img />
tag).
In the previous section, you learned more about the confusing history of the <object>
and <embed />
elements than you probably imagined existed. The end result of this confusing history is that although you most certainly can continue to use <object>
or <embed />
elements to embed audio or video in your web pages, and rely on external plug-ins to play those files, HTML5 contains native elements for playing audio and video. In this instance, native refers to the browser’s capability to play multimedia files without external plug-ins, and all major browsers on all platforms (including mobile) support these elements. This will be the preferred method of playing back audio and video moving forward.
Listing 12.3 shows how to use the <audio>
element to embed an audio file that will be played natively by the browser. The <audio>
element is quite simple and requires only one attribute—src
, or the location of the resource you want to play. However, as you see in Listing 12.3, you’ll probably want to use a few other handy attributes.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Let's Hear Some Music</title>
</head>
<body>
<h1>Let's Hear Some Music</h1>
<p>Better yet, let's use the HTML5 <audio> element to do so!</p>
<audio
src="manhattan_beach.mp3"
preload="auto"
controls
autoplay
loop>
<!-- Message to display in case the audio element isn't
supported. -->
<p>Your browser does not support the audio element.</p>
</audio>
</body>
</html>
In addition to the src
attribute, which, in this case, has a value of manhattan_beach.mp3
because that is the name of the audio file I want to play, I’m using four other attributes in this <audio>
element:
• preload
—Has three possible values: none
, auto
, and metadata
. Use none
if you do not want to buffer the file, use auto
to buffer the file, and use metadata
if you want to buffer only the metadata for the file.
• controls
—If present, shows the controls for the audio player.
• autoplay
—If present, plays the file as soon as it loads.
• loop
—If present, continues to play the file repeatedly until it is manually stopped.
Figure 12.4 shows the page in Listing 12.3 as rendered by the Chrome web browser.
Tip
Notice the inclusion of a message to users inside the <audio>
element. Although current versions of all major browsers support the <audio>
element, if a user’s browser does not, that user will instead see the message within the <p></p>
tags.
In practice, you probably wouldn’t want to automatically play and loop a sound file in your website—doing so is typically considered a particularly negative user experience. However, if you do automatically play a sound file (please don’t!), be sure to include the player controls so that users can immediately turn off the sound.
Using the HTML5 <video>
element is quite similar to using the <audio>
element. Listing 12.4 shows an example of this, in which the only real changes besides some text changes are the use of height
and width
attributes to define the space taken up by the video player and the video clip.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Let's Watch a Video</title>
</head>
<body>
<h1>Let's Watch a Video</h1>
<p>Better yet, let's use the HTML5 <video> element to do so!</p>
<video
src="kitten.mov"
preload="auto"
width="320"
height="240"
controls
autoplay
loop>
<!-- Message to display in case the video element isn't
supported. -->
<p>Your browser does not support the video element.</p>
</video>
</body>
</html>
The preload
, controls
, autoplay
, and loop
attributes do exactly the same for the <video>
element as they do for the <audio>
element. Figure 12.5 shows the page in Listing 12.4 as rendered by the Chrome web browser.
Before you add video, audio, or animations to your website, ask yourself whether you really should do so. 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’ve made” or “Listen to my music and download some songs,” then multimedia absolutely must play a role in your website.
Keep a few additional tips 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 providing files for direct download, give users a choice of file type. Don’t limit yourself to providing 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 (www.youtube.com). Not only does YouTube provide storage for your video clips, but it also gives you the code necessary to embed the video in your own web page.
In this hour, you learned how to embed video and sound in a web page. You learned how to use a simple link to a multimedia file, which is the most broadly supported but least flexible option for playing media content. You then learned how to use the <object>
or <embed />
elements to embed a media player directly in a web page, which can be used to include a vast array of media types, including WAV, MP3, AVI, WMV, and QuickTime videos, to name just a few. Finally, you learned about the <audio>
and <video>
elements in HTML5, which enable the browser to render audio or video files natively, or without external plug-in support.
Table 12.1 summarizes the tags discussed in this hour.
Q. I hear a lot about streaming video and audio. What does that mean?
A. In the past, video and audio files took minutes and sometimes hours to retrieve through most modems, which severely limited the inclusion of video and audio on web pages. The goal everyone is moving toward is streaming video or audio, which plays while the data is being received. In other words, you don’t have to completely download the clip before you can start to watch it or listen to it.
Streaming playback is now widely supported through most media players, in both standalone versions and plug-ins. When you embed a media object using the <object>
or <embed />
elements, the underlying media player automatically streams the media clip if the player supports streaming. When using the <video>
element, you have more fine-grained control over the buffering and playback of your multimedia resource.
Q. How do I choose an audiovisual file format among QuickTime, Windows AVI/WAV, MPEG, and others? Is there any significant difference among them?
A. QuickTime is the most popular video format among Macintosh users, although QuickTime players are available for Windows as well. Similarly, AVI/WMV and WAV/WMA are the video and audio formats for Windows users, but you can get players for the Macintosh that support these formats. MPEG is another popular audio and video standard. MPEG-3 (MP3) is already extremely popular as the high-fidelity audio standard of choice. One other audio format that is based on MPEG is Apple’s AAC format, which might be more familiar to you because this is the native iTunes music format.
If most of your audience uses Windows, use AVI/WMV for video and WAV/WMA or MP3 for audio. If your audience includes a significant number of Macintosh users, use QuickTime or at least offer some alternative. MP3 is also an option for Mac audio.
The Workshop contains quiz questions and activities to help you solidify your understanding of the material covered. Try to answer all questions before looking at the “Answers” section that follows.
1. What’s the simplest method to provide access to a video on your website for the widest possible audience?
2. What basic HTML5 code would you use to embed a video file named myvideo.mov
into a web page? The video requires an area on the page that is 320×305 pixels in size, and you want to show the video controls but do not want to automatically play or loop the file.
3. How would you code the <audio>
element so that a media clip plays repeatedly? Assume that the audio file is called myaudio.mp3
.
1. Just link to it:
<a href="myvideo.mov">my video</a>
2. The code follows:
<video width="320" height="305" src="myvideo.mov" controls></video>
3. Use the following:
<audio src="myaudio.mp3" autoplay></audio>
Find some freely available audio and video clips on the web, and practice placement within your text using the HTML5 <audio>
and <video>
elements.
The techniques and tags covered in this hour for embedding media with the <object>
and <embed/>
elements also work with Flash files. To find out how you can use Flash to add interactive animations to your web pages, check out the Flash home page at http://www.adobe.com/products/flash.html.
18.118.12.232