Embedding Multimedia in Web Pages

1. Embedding Multimedia in Web Pages

2. Linking to Multimedia Files • The simplest and most reliable option for incorporating a video or audio file into your web site is to simply link it in with <a href>, exactly as you would link to another HTML file. • For example, the following line could be used to offer an AVI video of a hockey game: • <a href="hockey.mov">View the hockey video clip.</a>

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

4. Linking to Multimedia Files • 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 allow you to view multimedia content directly within the browser window.

5. Embedding Video with Windows Media Player • Over the past few years, browser vendors have offered various conflicting solutions to the problem of how to put multimedia on a web page. Some of these, such as Microsoft's proprietary extensions to the <img> tag, are now completely obsolete. • Another nonstandard tag is Netscape's <embed /> tag, which became quite popular but was eventually replaced by the standard <object>, which is now the preferred way to embed multimedia of any kind in a web page. The <object> tag is also part of the XHTML standard, so you should use it instead of the <embed /> tag if you plan on creating valid HTML web pages. However, not all browsers fully support the <object> tag, so it's not a bad idea to use a combination of the <object> and <embed /> tags for the time being for maximum browser compatibility.

6. Embedding Video with Windows Media Player • Part of the problem with the <object> tag historically is that it was slow to be adopted in web browsers. supported consistently across different browsers. This mainly had to do with the fact that Internet Explorer supported the <object> tag for quite some time before it was standardized, and included several proprietary attributes that weren't supported in Netscape Navigator or other browsers at the time. Although some of these inconsistencies have been ironed out, it's still not possible to use the <object> tag alone and achieve consistency across different browsers more on how to solve this problem in a moment.

7. Embedding Video with Windows Media Player • Following is code to embed the pond video, which you saw earlier, using the <object> tag by itself: • <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="true" /> </object>

8. Embedding Video with Windows Media Player • This code isn't too terribly complicated when you consider that it is literally embedding a video directly into your web page. The messiest part of the code is the classid attribute of the <object> tag, which is set to a big long alphanumeric code. This code is the "global ID" for Microsoft 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.

9. Embedding Video with Windows Media Player • 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 and set them to a size that suits the multimedia content being played.

10. Embedding Video with Windows Media Player • There are four <param> tags within the <object> tag that are responsible for additional details about how the clip is to be played. Each of these tags 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 Playerfull indicates that all user interfaces features are enabled, such as the control buttons and volume slider. And finally, the autoStart parameter is set to true so that the video clip automatically starts playing when the page is opened in a browser.

11. Embedding Video with Windows Media Player • 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 • 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.