Media

01/08/2009 17:43

Introduction to Web Multimedia

Multimedia is pictures, sounds, music, animations and videos.

Modern web browsers have support for many multimedia formats.

What is Multimedia?

Multimedia is everything you can hear or see: texts, books, pictures, music, sounds, CDs, videos, DVDs, Records, Films, and more.

Multimedia comes in many different formats. On the Internet you will find many of these elements embedded in web pages, and today's web browsers have support for a number of multimedia formats.

In this tutorial you will learn about different multimedia formats and how to use them in your web pages.

Browser Support

The first Internet browsers had support for text only, and even the text support was limited to a single font in a single color, and little or nothing else.

Then came web browsers with support for colors, fonts and text styles, and the support for pictures was added.

The support for sounds, animations and videos is handled in different ways by different browsers. Some elements can be handled inline, some requires a plug-in and some requires an ActiveX control.

You will learn more about this in the next chapters.

Multimedia Formats

Multimedia elements (like sounds or videos) are stored in media files.

The most common way to discover the media type is to look at the file extension.

When a browser sees the file extensions .htm or .html, it will assume that the file is an HTML page. The .xml extension indicates an XML file, and the .css extension indicates a style sheet.

Picture formats are recognized by extensions like .gif and .jpg.

Multimedia elements also have their own file formats with different extensions.

You will learn more about media file extensions in the next chapters.

Multimedia Sound Formats

Sound can be stored in many different formats.

The MIDI Format

The MIDI (Musical Instrument Digital Interface) is a format for sending music information between electronic music devices like synthesizers and PC sound cards.

The MIDI format was developed in 1982 by the music industry. The MIDI format is very flexible and can be used for everything from very simple to real professional music making.

MIDI files do not contain sampled sound, but a set of digital musical instructions (musical notes) that can be interpreted by your PC's sound card.

The downside of MIDI is that it cannot record sounds (only notes). Or, to put it another way: It cannot store songs, only tunes.

Click here to play The Beatles.

The upside of the MIDI format is that since it contains only instructions (notes), MIDI files can be extremely small. The example above is only 23K in size but it plays for nearly 5 minutes.

The MIDI format is supported by many different software systems over a large range of platforms. MIDI files are supported by all the most popular Internet browsers.

Sounds stored in the MIDI format have the extension .mid or .midi.

The RealAudio Format

The RealAudio format was developed for the Internet by Real Media. The format also supports video.

The format allows streaming of audio (on-line music, Internet radio) with low bandwidths. Because of the low bandwidth priority, quality is often reduced.

Sounds stored in the RealAudio format have the extension .rm or .ram.

The AU Format

The AU format is supported by many different software systems over a large range of platforms.

Sounds stored in the AU format have the extension .au.

The AIFF Format

The AIFF (Audio Interchange File Format) was developed by Apple.

AIFF files are not cross-platform and the format is not supported by all web browsers.

Sounds stored in the AIFF format have the extension .aif or .aiff.

The SND Format

The SND (Sound) was developed by Apple.

SND files are not cross-platform and the format is not supported by all web browsers.

Sounds stored in the SND format have the extension .snd.

The WAVE Format

The WAVE (waveform) format is developed by IBM and Microsoft.

It is supported by all computers running Windows, and by all the most popular web browsers.

Sounds stored in the WAVE format have the extension .wav.

The MP3 Format (MPEG)

MP3 files are actually MPEG files. But the MPEG format was originally developed for video by the Moving Pictures Experts Group. We can say that MP3 files are the sound part of the MPEG video format.

MP3 is one of the most popular sound formats for music recording. The MP3 encoding system combines good compression (small files) with high quality. Expect all your future software systems to support it.

Sounds stored in the MP3 format have the extension .mp3, or .mpga (for MPG Audio).

What Format To Use?

The WAVE format is one of the most popular sound format on the Internet, and it is supported by all popular browsers. If you want recorded sound (music or speech) to be available to all your visitors, you should use the WAVE format.

The MP3 format is the new and upcoming format for recorded music. If your website is about recorded music, the MP3 format is the choice of the future.

Multimedia Video Formats

Video can be stored in many different formats.

The AVI Format

The AVI (Audio Video Interleave) format was developed by Microsoft.

The AVI format is supported by all computers running Windows, and by all the most popular web browsers. It is a very common format on the Internet, but not always possible to play on non-Windows computers.

Videos stored in the AVI format have the extension .avi.

The Windows Media Format

The Windows Media format is developed by Microsoft.

Windows Media is a common format on the Internet, but Windows Media movies cannot be played on non-Windows computer without an extra (free) component installed. Some later Windows Media movies cannot play at all on non-Windows computers because no player is available.

Videos stored in the Windows Media format have the extension .wmv.

The MPEG Format

The MPEG (Moving Pictures Expert Group) format is the most popular format on the Internet. It is cross-platform, and supported by all the most popular web browsers.

Videos stored in the MPEG format have the extension .mpg or .mpeg.

The QuickTime Format

The QuickTime format is developed by Apple.

QuickTime is a common format on the Internet, but QuickTime movies cannot be played on a Windows computer without an extra (free) component installed.

Videos stored in the QuickTime format have the extension .mov.

The RealVideo Format

The RealVideo format was developed for the Internet by Real Media.

The format allows streaming of video (on-line video, Internet TV) with low bandwidths. Because of the low bandwidth priority, quality is often reduced.

Videos stored in the RealVideo format have the extension .rm or .ram.

The Shockwave (Flash) Format

The Shockwave format was developed by Macromedia.

The Shockwave format requires an extra component to play. This component comes preinstalled with the latest versions of Netscape and Internet Explorer.

Videos stored in the Shockwave format have the extension .swf.

Playing Sounds On The Web

Sounds can be played "inline" or by a "helper", depending on the HTML element you use.

Inline Sound

When sound is included in a web page, or as part of a web page, it is called inline sound.

Inline sound can be added to a web page by using the <bgsound> element or the <img> element.

If you plan to use inline sounds in your web applications, be aware that many people find inline sound annoying. Also note that some users might have turned off the inline sound option in their browser.

Our best advice is to include inline sound only in web pages where the user expects to hear the sound. An example of this is a page which opens after the user has clicked on a link to hear a recording.

Using A Helper (Plug-In)

A helper application is a program that can be launched by the browser to "help" playing sound. Helper applications are also called Plug-Ins.

Helper applications can be launched using the <embed> element, the <applet> element, or the <object> element.

One great advantage of using a helper application is that you can let some (or all) of the player settings be controlled by the user.

Most helper applications allows manually (or programmed) control over the volume settings and play functions like rewind, pause, stop and play.

Using The <bgsound> Element

Internet Explorer supports an element called <bgsound>.

The purpose of this element is to provide a background sound for a web page:

The code fragment above displays a MIDI file as background music for a web page.

A list of attributes for the <bgsound> element can be found in a later chapter of this tutorial.

Note: The <bgsound> element is not a standard HTML or XHTML element. It is supported by Internet Explorer only.

Using The <img> Element

Internet Explorer supports the dynsrc attribute in the <img> element.

The purpose of this element is to embed multimedia elements in web page:

The code fragment above displays a WAVE file embedded in a web page.

Click here to try it yourself

Note: The dynsrc attribute is not a standard HTML or XHTML attribute. It is supported by Internet Explorer only.

Using The <embed> Element

Internet Explorer and Netscape both support an element called <embed>.

The purpose of this element is to embed multimedia elements in web page:

The code fragment above displays a MIDI file embedded in a web page.

Click here to try it yourself

A list of attributes for the <embed> element can be found in a later chapter of this tutorial.

Note: The <embed> element is supported by both Internet Explorer and Netscape, but it is not a standard HTML or XHTML element. The World Wide Web Consortium (W3C) recommend using the <object> element instead.

Using The <object> Element

Internet Explorer and Netscape both support an HTML element called <object>.

The purpose of this element is to embed multimedia elements in web page:


            classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">

The code fragment above displays a WAVE file embedded in a web page.

Click here to try it yourself

A list of attributes for the <object> element can be found in a later chapter of this tutorial.

Using A Hyperlink

If a web page includes a hyperlink to a media file, most browsers will use a "helper application" to play the file:

Click here to play the Beatles

The code fragment above displays a link to a MIDI file. If the user clicks on the link, the browser will launch a helper application like Windows Media Player to play the MIDI file.

Click here to try it yourself

Playing Videos On The Web

Videos can be played "inline" or by a "helper", depending on the HTML element you use.

Inline Videos

When a video is included in a web page it is called inline video.

Inline video can be added to a web page by using the <img> element.

If you plan to use inline videos in your web applications, be aware that many people find inline videos annoying. Also note that some users might have turned off the inline video option in their browser.

Our best advice is to include inline videos only in web pages where the user expects to see a video. An example of this is a page which opens after the user has clicked on a link to see the video.

Using A Helper (Plug-In)

A helper application is a program that can be launched by the browser to "help" playing a video. Helper applications are also called Plug-Ins.

Helper applications can be launched using the <embed> element, the <applet> element, or the <object> element.

One great advantage of using a helper application is that you can let some (or all) of the player settings be controlled by the user.

Most helper applications allow manual (or programmed) control over the volume settings and play functions like rewind, pause, stop and play.

Using The <img> Element

Internet Explorer supports the dynsrc attribute in the <img> element.

The purpose of this element is to embed multimedia elements in web page:

The code fraction above displays an AVI file embedded in a web page.

Note: The dynsrc attribute is not a standard HTML or XHTML attribute. It is supported by Internet Explorer only.

Using The <embed> Element

Internet Explorer and Netscape both support an element called <embed>.

The purpose of this element is to embed multimedia elements in web page:

The code fraction above displays an AVI file embedded in a web page.

A list of attributes for the <embed> element can be found in a later chapter of this tutorial.

Using The <object> Element

Internet Explorer and Netscape both support an HTML element called <object>.

The purpose of this element is to embed multimedia elements in web page:

The code fraction above displays an AVI file embedded in a web page.

A list of attributes for the <object> element can be found in a later chapter of this tutorial.

Using A Hyperlink

If a web page includes a hyperlink to a media file, most browsers will use a "helper application" to play the file:

Click here to play a video file

The code fraction above displays a link to an AVI file. If the user clicks on the link, the browser will launch a helper application like Windows Media Player to play the AVI file.

Windows Multimedia Formats

Windows media files have the extensions: .asf, .asx, .wma, and .wmv.

The ASF Format

The ASF format (Advanced Streaming Format) is specially designed to run over the Internet.

ASF files can contain audio, video, slide shows, and synchronized events.

ASF files can be highly compressed and can be delivered as a continuous flow of data (on-line TV or radio). Files can be of any size, and can be compressed to match many different bandwidths (connection speeds).

The ASX Format

ASX (Advanced Stream Redirector) files are not media files, but metafiles.

Metafiles provides information about files. ASX files are plain text files used to describe multimedia content:

Holiday 2001</Title></pre>
            <pre>
<Entry></pre>
            <pre><span style="">    </span><ref href="holiday-1.avi"/></pre>
            <pre>
</Entry></pre>
            <pre>
<Entry></pre>
            <pre><span style="">    </span><ref href="holiday-2.avi"/></pre>
            <pre>
</Entry></pre>
            <pre>
<Entry></pre>
            <pre><span style="">    </span><ref href="holiday-2.avi"/></pre>
            <pre>
</Entry></pre>
            <pre>
</ASX></pre>
            </td>
        </tr>
    </tbody>
</table>
<p>The file above describes three multimedia files. When the ASX file is read by a player, the player can play the files described.</p>
<div align="center" style="text-align: center;" class="MsoNormal"><hr width="100%" size="2" align="center" />
</div>
<h2>The WMA Format</h2>
<p>The WMA (Windows Media Audio) format is an audio format developed by Microsoft.</p>
<p>WMA is designed to handle all types of audio content. The files can be highly compressed and can be delivered as a continuous flow of data (on-line radio). WMA files can be of any size, and be compressed to match many different bandwidths (connection speeds).</p>
<p>The WMA format is similar to the ASF format (see above)</p>
<div align="center" style="text-align: center;" class="MsoNormal"><hr width="100%" size="2" align="center" />
</div>
<h2>The WMV Format</h2>
<p>The WMV (Windows Media Video) format is a video format developed by Microsoft.</p>
<p>WMV is designed to handle all types of video content. The files can be highly compressed and can be delivered as a continuous flow of data (on-line radio). WMV files can be of any size, and be compressed to match many different bandwidths (connection speeds).</p>
<p>The WMV format is similar to the ASF format (see above)</p>
<div align="center" style="text-align: center;" class="MsoNormal"><hr width="100%" size="2" align="center" />
</div>
<h2>Other Windows Media Formats</h2>
<p>WAX (Windows Media Audio Redirector) files are much the same as ASX files, but intended to describe audio files (.wma files)</p>
<p>WMP (Windows Media Player) files and WMX are reserved file types for future use by Windows.</p>
<h1>The Object Element</h1>
<p class="MsoNormal"><a href="http://www.w3schools.com/media/media_windowsformats.asp"><span style="text-decoration: none;"><span style=""><img height="20" width="100" border="0" v:shapes="_x0000_i1114" alt="Previous" src="file:///C:/DOCUME~1/ARIZON~1/LOCALS~1/Temp/msohtml1/01/clip_image001.gif" /></span></span></a><a href="http://www.w3schools.com/media/media_quicktime.asp"><span style="text-decoration: none;"><span style=""><img height="20" width="100" border="0" v:shapes="_x0000_i1115" alt="Next" src="file:///C:/DOCUME~1/ARIZON~1/LOCALS~1/Temp/msohtml1/01/clip_image002.gif" /></span></span></a></p>
<div align="center" style="text-align: center;" class="MsoNormal"><hr width="100%" size="2" align="center" />
</div>
<table cellpadding="0" border="0" style="" class="MsoNormalTable">
    <tbody>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal"><img height="203" width="179" border="0" v:shapes="_x0000_i1116" alt="Beatles" src="file:///C:/DOCUME~1/ARIZON~1/LOCALS~1/Temp/msohtml1/01/clip_image003.gif" /></p>
            </td>
            <td valign="top" style="padding: 0.75pt;">
            <p class="intro">The <object> element can support many different media   types, like:</p>
            <p style="margin-left: 0.5in; text-indent: -0.25in;" class="intro"><span style="font-size: 10pt; font-family: Symbol;"><span style="">·<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;">           </span></span></span>Pictures</p>
            <p style="margin-left: 0.5in; text-indent: -0.25in;" class="intro"><span style="font-size: 10pt; font-family: Symbol;"><span style="">·<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;">           </span></span></span>Sounds</p>
            <p style="margin-left: 0.5in; text-indent: -0.25in;" class="intro"><span style="font-size: 10pt; font-family: Symbol;"><span style="">·<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;">           </span></span></span>Videos</p>
            <p style="margin-left: 0.5in; text-indent: -0.25in;" class="intro"><span style="font-size: 10pt; font-family: Symbol;"><span style="">·<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;">           </span></span></span>Other Objects</p>
            </td>
        </tr>
    </tbody>
</table>
<div align="center" style="text-align: center;" class="MsoNormal"><hr width="100%" size="2" align="center" />
</div>
<h2>Displaying A Picture</h2>
<p>You can display a picture:</p>
<table width="100%" cellspacing="0" cellpadding="0" border="1" style="width: 100%;" class="MsoNormalTable">
    <tbody>
        <tr style="">
            <td style="padding: 0.75pt;">
            <pre>
<object height="100%" width="100%"</pre>
            <pre>
type="image/jpeg" data="audi.jpeg"></pre>
            <pre>
</object></pre>
            </td>
        </tr>
    </tbody>
</table>
<p><a target="_blank" href="http://www.w3schools.com/media/tryit.asp?filename=trymedia_pictureobject">Click here to try it yourself</a></p>
<div align="center" style="text-align: center;" class="MsoNormal"><hr width="100%" size="2" align="center" />
</div>
<h2>Displaying A Web Page</h2>
<p>You can display a web page:</p>
<table width="100%" cellspacing="0" cellpadding="0" border="1" style="width: 100%;" class="MsoNormalTable">
    <tbody>
        <tr style="">
            <td style="padding: 0.75pt;">
            <pre>
<object type="text/html" height="100%" width="100%"</pre>
            <pre>
data="https://www.w3schools.com"></pre>
            <pre>
</object></pre>
            </td>
        </tr>
    </tbody>
</table>
<p><a target="_blank" href="http://www.w3schools.com/media/tryit.asp?filename=trymedia_webpageobject">Click here to try it yourself</a></p>
<div align="center" style="text-align: center;" class="MsoNormal"><hr width="100%" size="2" align="center" />
</div>
<h2>Displaying A Sound</h2>
<p>You can display a sound:</p>
<table width="100%" cellspacing="0" cellpadding="0" border="1" style="width: 100%;" class="MsoNormalTable">
    <tbody>
        <tr style="">
            <td style="padding: 0.75pt;">
            <pre>
<object</pre>
            <pre>
classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"></pre>
            <pre>
<param name="FileName" value="liar.wav" /></pre>
            <pre>
</object></pre>
            </td>
        </tr>
    </tbody>
</table>
<p><a target="_blank" href="http://www.w3schools.com/media/tryit.asp?filename=trymedia_soundwaveobject">Click here to try it yourself</a></p>
<div align="center" style="text-align: center;" class="MsoNormal"><hr width="100%" size="2" align="center" />
</div>
<h2>Displaying A Video</h2>
<p>You can display a video:</p>
<table width="100%" cellspacing="0" cellpadding="0" border="1" style="width: 100%;" class="MsoNormalTable">
    <tbody>
        <tr style="">
            <td style="padding: 0.75pt;">
            <pre>
<object</pre>
            <pre>
classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"></pre>
            <pre>
<param name="FileName" value="3d.wmv" /></pre>
            <pre>
</object></pre>
            </td>
        </tr>
    </tbody>
</table>
<p><a target="_blank" href="http://www.w3schools.com/media/tryit.asp?filename=trymedia_videoaviobject">Click here to try it yourself</a></p>
<div align="center" style="text-align: center;" class="MsoNormal"><hr width="100%" size="2" align="center" />
</div>
<h2>Displaying A Calendar</h2>
<p>You can display a calendar:</p>
<table width="100%" cellspacing="0" cellpadding="0" border="1" style="width: 100%;" class="MsoNormalTable">
    <tbody>
        <tr style="">
            <td style="padding: 0.75pt;">
            <pre>
<object width="100%" height="80%"</pre>
            <pre>
classid="clsid:8E27C92B-1264-101C-8A2F-040224009C02"></pre>
            <pre>
<param name="BackColor" value="14544622"></pre>
            <pre>
<param name="DayLength" value="1"></pre>
            <pre>
</object></pre>
            </td>
        </tr>
    </tbody>
</table>
<p><a target="_blank" href="http://www.w3schools.com/media/tryit.asp?filename=trymedia_calendarobject">Click here to try it yourself</a></p>
<div align="center" style="text-align: center;" class="MsoNormal"><hr width="100%" size="2" align="center" />
</div>
<h2>Displaying Graphics</h2>
<p>You can display graphics:</p>
<table width="100%" cellspacing="0" cellpadding="0" border="1" style="width: 100%;" class="MsoNormalTable">
    <tbody>
        <tr style="">
            <td style="padding: 0.75pt;">
            <pre>
<object width="200" height="200"</pre>
            <pre>
classid="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6"></pre>
            <pre>
<param name="Line0001"</pre>
            <pre>
value="setFillColor(255, 0, 255)"></pre>
            <pre>
<param name="Line0002"</pre>
            <pre>
value="Oval(-100, -50, 200, 100, 30)"></pre>
            <pre>
</object></pre>
            </td>
        </tr>
    </tbody>
</table>
<p><a target="_blank" href="http://www.w3schools.com/media/tryit.asp?filename=trymedia_graphicobject">Click here to try it yourself</a></p>
<div align="center" style="text-align: center;" class="MsoNormal"><hr width="100%" size="2" align="center" />
</div>
<h2>Displaying Flash</h2>
<p>You can display a flash animation:</p>
<table width="100%" cellspacing="0" cellpadding="0" border="1" style="width: 100%;" class="MsoNormalTable">
    <tbody>
        <tr style="">
            <td style="padding: 0.75pt;">
            <pre>
<object width="400" height="40"</pre>
            <pre>
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"</pre>
            <pre>
codebase="https://download.macromedia.com</pre>
            <pre>
/pub/shockwave/cabs/flash/swflash.cab#4,0,0,0"></pre>
            <pre>
<param name="SRC" value="bookmark.swf"></pre>
            <pre>
<embed src="bookmark.swf" width="400" height="40"></embed></pre>
            <pre>
</object></pre>
            </td>
        </tr>
    </tbody>
</table>
<p class="MsoNormal"> </p>
<p class="MsoNormal"> </p>
<h1>Playing QuickTime Movies</h1>
<p class="MsoNormal"><a href="http://www.w3schools.com/media/media_object.asp"><span style="text-decoration: none;"></span></a><a href="http://www.w3schools.com/media/media_realvideo.asp"><span style="text-decoration: none;"></span></a></p>
<div align="center" style="text-align: center;" class="MsoNormal"><hr width="100%" size="2" align="center" />
</div>
<p><b>The <object> element can play QuickTime movies.</b></p>
<div align="center" style="text-align: center;" class="MsoNormal"><hr width="100%" size="2" align="center" />
</div>
<h2>The QuickTime Format</h2>
<p>The QuickTime format is developed by Apple. Videos stored in the QuickTime format have the extension .mov.</p>
<p>QuickTime is a common format on the Internet, but QuickTime movies cannot be played on a Windows computer without an extra (free) component installed.</p>
<p>With the object element, code that will play a QuickTime movie can easily be added to a web page. The object can be set to automatically install a QuickTime player if it is not already installed on the users computer.</p>
<div align="center" style="text-align: center;" class="MsoNormal"><hr width="100%" size="2" align="center" />
</div>
<h2>The Solution</h2>
<p>This is the code required to play a QuickTime movie:</p>
<table width="100%" cellspacing="0" cellpadding="0" border="1" style="width: 100%;" class="MsoNormalTable">
    <tbody>
        <tr style="">
            <td style="padding: 0.75pt;">
            <pre>
<object width="160" height="144"</pre>
            <pre>
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"</pre>
            <pre>
codebase="https://www.apple.com/qtactivex/qtplugin.cab"></pre>
            <pre>
<param name="src" value="sample.mov"></pre>
            <pre>
<param name="autoplay" value="true"></pre>
            <pre>
<param name="controller" value="false"></pre>
            <pre>
<embed src="sample.mov" width="160" height="144"</pre>
            <pre>
autoplay="true" controller="false"</pre>
            <pre>
pluginspage="https://www.apple.com/quicktime/download/"></pre>
            <pre>
</embed></pre>
            <pre>
</object></pre>
            </td>
        </tr>
    </tbody>
</table>
<p class="MsoNormal"> </p>
<div align="center" style="text-align: center;" class="MsoNormal"><hr width="100%" size="2" align="center" />
</div>
<h2>The <object> Element</h2>
<p>The <b>width</b> and <b>height</b> attributes of the object element should match the size of the movie in pixels.</p>
<p>The <b>classid</b> attribute uniquely identifies the player software to use. It must be set to "clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B". This unique code identifies an ActiveX control that must be installed on the users PC before the movie can be played. If the user does not have the ActiveX control installed, the browser can automatically download and install it.</p>
<p>The <b>codebase</b> attribute specifies the base path used to resolve relative URIs specified by the classid, data, and archive attributes. When absent, its default value is the base URI of the current document. <b>Note:</b> Internet Explorer uses this attribute to specify a location from where the player can be downloaded. It must be set to "https://www.apple.com/qtactivex/qtplugin.cab". This location will always contain the latest version of the QuickTime player.</p>
<p>The <b>src</b> parameter should point to the movie file.</p>
<p>The <b>autoplay</b> parameter should have the value "true" if you want the movie to play automatically.</p>
<p>The <b>controller</b> parameter should have the value "false" if you don't want the control buttons to show.</p>
<div align="center" style="text-align: center;" class="MsoNormal"><hr width="100%" size="2" align="center" />
</div>
<h2>The <embed> Element</h2>
<p>The <b>embed</b> element is added to support browsers that don't support the object element. A browser that understands the object element will ignore the embed element. The object element will be used by new browsers that support ActiveX controls (Internet Explorer 5 and 6). Older browsers (Netscape 4 and 5) will use the embed element.</p>
<p>The <b>width</b> and <b>height</b> attributes of the embed element should match the size of the movie in pixels.</p>
<p>The <b>autoplay</b> and <b>controller</b> attributes of the embed element should be set to the same values as for the parameters in the object element.</p>
<p>The <b>pluginspage</b> attribute defines the players download path. It must be set to "https://www.apple.com/quicktime/download/".</p>
<h1>Playing Real Video Movies</h1>
<p class="MsoNormal"><a href="http://www.w3schools.com/media/media_quicktime.asp"><span style="text-decoration: none;"><span style=""><img height="20" width="100" border="0" v:shapes="_x0000_i1119" alt="Previous" src="file:///C:/DOCUME~1/ARIZON~1/LOCALS~1/Temp/msohtml1/01/clip_image001.gif" /></span></span></a><a href="http://www.w3schools.com/media/media_tagref.asp"><span style="text-decoration: none;"><span style=""><img height="20" width="100" border="0" v:shapes="_x0000_i1120" alt="Next" src="file:///C:/DOCUME~1/ARIZON~1/LOCALS~1/Temp/msohtml1/01/clip_image002.gif" /></span></span></a></p>
<div align="center" style="text-align: center;" class="MsoNormal"><hr width="100%" size="2" align="center" />
</div>
<p><b>The <object> element can play Real Video movies.</b></p>
<div align="center" style="text-align: center;" class="MsoNormal"><hr width="100%" size="2" align="center" />
</div>
<h2>The Real Video Format</h2>
<p>The RealVideo format is developed by Real Media. Videos stored in the Real Video format have the extension .rm or .ram.</p>
<p>The format allows streaming of video (on-line video, Internet TV) with low bandwidths. Because of the low bandwidth priority, quality is often reduced.</p>
<div align="center" style="text-align: center;" class="MsoNormal"><hr width="100%" size="2" align="center" />
</div>
<h2>The Solution</h2>
<p>This is the code required to play a Real Video movie:</p>
<table width="100%" cellspacing="0" cellpadding="0" border="1" style="width: 100%;" class="MsoNormalTable">
    <tbody>
        <tr style="">
            <td style="padding: 0.75pt;">
            <pre>
<object width="320" height="240"</pre>
            <pre>
classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"></pre>
            <pre>
<param name="controls" value="ImageWindow" /></pre>
            <pre>
<param name="autostart" value="true" /></pre>
            <pre>
<param name="src" value="male.ram" /></pre>
            <pre>
</object></pre>
            </td>
        </tr>
    </tbody>
</table>
<p class="MsoNormal"> </p>
<div align="center" style="text-align: center;" class="MsoNormal"><hr width="100%" size="2" align="center" />
</div>
<h2>The <object> Element</h2>
<p>The <b>width</b> and <b>height</b> attributes of the object element should match the size of the movie in pixels.</p>
<p>The <b>classid</b> attribute uniquely identifies the player software to use. It must be set to "clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA". This unique code identifies an ActiveX control that must be installed on the users PC before the movie can be played. If the user does not have the ActiveX control installed, the browser can automatically download and install it.</p>
<p>The <b>param</b> elements supply additional information to the player.</p>
<p>The <b>src</b> parameter should point to the movie (or audio) file.</p>
<p>The <b>autostart</b> parameter should have the value "true" if you want the movie to play automatically.</p>
<p>The <b>controls</b> parameter should have the value "ImageWindow" if you don't want the control buttons to show, or "All" if you want all the controls to show.</p>
<div align="center" style="text-align: center;" class="MsoNormal"><hr width="100%" size="2" align="center" />
</div>
<h2>Object Reference</h2>
<table width="100%" cellpadding="0" border="1" style="width: 100%;" class="MsoNormalTable">
    <tbody>
        <tr style="">
            <td width="25%" style="padding: 0.75pt; width: 25%;">
            <p class="MsoNormal"><b>Attribute</b></p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal"><b>Defines</b></p>
            </td>
        </tr>
        <tr style="">
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">classid</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">A unique id for the object.</p>
            </td>
        </tr>
        <tr style="">
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">height</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">The height of the object in pixels or %.</p>
            </td>
        </tr>
        <tr style="">
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">width</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">The width of the object in pixels or in %.</p>
            </td>
        </tr>
    </tbody>
</table>
<h2>Parameter Reference</h2>
<table width="100%" cellpadding="0" border="1" style="width: 100%;" class="MsoNormalTable">
    <tbody>
        <tr style="">
            <td width="25%" valign="top" style="padding: 0.75pt; width: 25%;">
            <p class="MsoNormal"><b>Attribute</b></p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal"><b>Defines</b></p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">src</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">The source of a RealAudio or RealVideo clip.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">controls</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">The visibility of the controls. (See below)</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">console</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">A console name to link multiple controls.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">autostart</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">Automatic start. (true | false).</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">nolabels</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">Suppression of label texts in the controls window.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">reset</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">Resetting the control for playlist.  (true | false).</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">autogotoURL</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">How a URL is handled. (true | false)<br />
            True forwards URL event to the browser.<br />
            False uses VBScript event instead.</p>
            </td>
        </tr>
    </tbody>
</table>
<h2>Controls Values</h2>
<table width="100%" cellpadding="0" border="1" style="width: 100%;" class="MsoNormalTable">
    <tbody>
        <tr style="">
            <td width="25%" valign="top" style="padding: 0.75pt; width: 25%;">
            <p class="MsoNormal"><b>Value</b></p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal"><b>Displays</b></p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">All</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">Displays a full player with all controls.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">InfoVolumePanel</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">Title, author, and copyright and volume slider.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">InfoPanel</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">Title, author, and copyright.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">ControlPanel</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">Position slider, play, pause, and stop buttons.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">StatusPanel</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">Messages, current time position, and clip length.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">PlayButton</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">Play and pause buttons.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">StopButton</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">Stop button.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">VolumeSlider</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">Volume slider.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">PositionField</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">Position and clip length.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">StatusField</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">Messages.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">ImageWindow</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">The video image</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">StatusBar</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">Status, position and channels.</p>
            </td>
        </tr>
    </tbody>
</table>
<p class="MsoNormal"> </p>
<p class="MsoNormal"> </p>
<h1>Web Multimedia Element Reference</h1>
<p class="MsoNormal"><a href="http://www.w3schools.com/media/media_realvideo.asp"><span style="text-decoration: none;"><span style=""><img height="20" width="100" border="0" v:shapes="_x0000_i1121" alt="Previous" src="file:///C:/DOCUME~1/ARIZON~1/LOCALS~1/Temp/msohtml1/01/clip_image001.gif" /></span></span></a><a href="http://www.w3schools.com/media/media_playerref.asp"><span style="text-decoration: none;"><span style=""><img height="20" width="100" border="0" v:shapes="_x0000_i1122" alt="Next" src="file:///C:/DOCUME~1/ARIZON~1/LOCALS~1/Temp/msohtml1/01/clip_image002.gif" /></span></span></a></p>
<div align="center" style="text-align: center;" class="MsoNormal"><hr width="100%" size="2" align="center" />
</div>
<h2>The <bgsound> Element</h2>
<table width="100%" cellpadding="0" border="1" style="width: 100%;" class="MsoNormalTable">
    <tbody>
        <tr style="">
            <td width="20%" style="padding: 0.75pt; width: 20%;">
            <p class="MsoNormal"><b>Attribute</b></p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal"><b>Function</b></p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">id</p>
            </td>
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">A unique id for the element.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">src</p>
            </td>
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">The location (URL) of the source file.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">balance</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">The balance. (-10000=left, +10000=right).</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">loop</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">The number of loops. (-1=infinite).</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">volume</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">The volume. (0=max, -10000=min).</p>
            </td>
        </tr>
    </tbody>
</table>
<p class="MsoNormal"> </p>
<div align="center" style="text-align: center;" class="MsoNormal"><hr width="100%" size="2" align="center" />
</div>
<h2>The <embed> Element</h2>
<table width="100%" cellpadding="0" border="1" style="width: 100%;" class="MsoNormalTable">
    <tbody>
        <tr style="">
            <td width="20%" style="padding: 0.75pt; width: 20%;">
            <p class="MsoNormal"><b>Attribute</b></p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal"><b>Defines</b></p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">autostart</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">Automatic start. (true | false).</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">height</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">The height of the element in pixels or %.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">hidden</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">The visibility of the element. (true | false).</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">src</p>
            </td>
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">The location (URL) of the source file.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">width</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">The width of the element in pixels or %.</p>
            </td>
        </tr>
    </tbody>
</table>
<p>See also styling attributes, common HTML attributes and Event attributes at the bottom of this page.</p>
<div align="center" style="text-align: center;" class="MsoNormal"><hr width="100%" size="2" align="center" />
</div>
<h2>The <applet> Element</h2>
<table width="100%" cellpadding="0" border="1" style="width: 100%;" class="MsoNormalTable">
    <tbody>
        <tr style="">
            <td width="20%" style="padding: 0.75pt; width: 20%;">
            <p class="MsoNormal"><b>Attribute</b></p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal"><b>Defines</b></p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">alt</p>
            </td>
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">An alternate text.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">archive</p>
            </td>
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">The locations (URLs) of archive files.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">code</p>
            </td>
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">The location (URL) of the applet code.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">codebase</p>
            </td>
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">The base location (default URL) for all files.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">height</p>
            </td>
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">The height of the applet in pixels or %.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">name</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">The name of the applet.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">object</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">A saved representation of the applet. Do not use.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">width</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">The width of the applet in pixels or %.</p>
            </td>
        </tr>
    </tbody>
</table>
<p>See also styling attributes, common HTML attributes and Event attributes at the bottom of this page.</p>
<div align="center" style="text-align: center;" class="MsoNormal"><hr width="100%" size="2" align="center" />
</div>
<h2>The <object> Element</h2>
<table width="100%" cellpadding="0" border="1" style="width: 100%;" class="MsoNormalTable">
    <tbody>
        <tr style="">
            <td width="20%" style="padding: 0.75pt; width: 20%;">
            <p class="MsoNormal"><b>Attribute</b></p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal"><b>Defines</b></p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">archive</p>
            </td>
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">The locations (URLs) of archive files.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">classid</p>
            </td>
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">The location (URL) of the object.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">codebase</p>
            </td>
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">The base path used to resolve relative URIs specified by   the classid, data, and archive attributes.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">codetype</p>
            </td>
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">The content type of the code.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">data</p>
            </td>
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">The location (URL) of object data.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">declare</p>
            </td>
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">Do not instantiate (execute) the object.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">height</p>
            </td>
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">The height of the object in pixels or %.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">name</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">The object's name.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">standby</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">Text to display while object is loading.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">tabindex</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">The position in the tab order</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">type</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">The content type of the object.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">usemap</p>
            </td>
            <td style="padding: 0.75pt;">
            <p class="MsoNormal">The location (URL) of an image map.</p>
            </td>
        </tr>
        <tr style="">
            <td valign="top" style="padding: 0.75pt;">
            <p class="MsoNormal">width</p>
            </td>
            <td style="padding: 0.75pt;">
            <p cla
									<!-- / WSW -->
								</div><!-- / class="wsw" -->

								

								<div class="rbcBookmarks"><div id="rbcBookmarks200000092"></div></div>
		<script type="text/javascript">
			/* <![CDATA[ */
			Event.observe(window, 'load', function(){
				var bookmarks = '<div style=\"float:left;\"><div style=\"float:left;\"><iframe src=\"//www.facebook.com/plugins/like.php?href=https://programz.webnode.page/news/media/&send=false&layout=button_count&width=125&show_faces=false&action=like&colorscheme=light&font&height=21&appId=397846014145828&locale=en_US\" scrolling=\"no\" frameborder=\"0\" style=\"border:none; overflow:hidden; width:125px; height:21px; position:relative; top:1px;\" allowtransparency=\"true\"></iframe></div><div style=\"float:left;\"><a href=\"https://twitter.com/share\" class=\"twitter-share-button\" data-count=\"horizontal\" data-via=\"webnode\" data-lang=\"en\">Tweet</a></div><script type=\"text/javascript\">(function() {var po = document.createElement(\'script\'); po.type = \'text/javascript\'; po.async = true;po.src = \'//platform.twitter.com/widgets.js\';var s = document.getElementsByTagName(\'script\')[0]; s.parentNode.insertBefore(po, s);})();'+'<'+'/scr'+'ipt></div> <div class=\"addthis_toolbox addthis_default_style\" style=\"float:left;\"><a class=\"addthis_counter addthis_pill_style\"></a></div> <script type=\"text/javascript\">(function() {var po = document.createElement(\'script\'); po.type = \'text/javascript\'; po.async = true;po.src = \'https://s7.addthis.com/js/250/addthis_widget.js#pubid=webnode\';var s = document.getElementsByTagName(\'script\')[0]; s.parentNode.insertBefore(po, s);})();'+'<'+'/scr'+'ipt><div style=\"clear:both;\"></div>';
				$('rbcBookmarks200000092').innerHTML = bookmarks;
				bookmarks.evalScripts();
			});
			/* ]]> */
		</script>
		

								<p class="hidden">———</p>

								<a class="back" href="archive/news/">Back</a>

		

							</div><!-- / class="content detail" -->
						</div><!-- / class="box articles" -->
						<!-- / ARTICLE DETAIL -->


						<hr class="hidden">


		
					</div><!-- / id="mainZone" class="colA" -->
					<!-- / CENTER ZONE ~ MAIN -->

				</div><!-- / id="content" -->
				<!-- / CONTENT -->

			</div><!-- / id="main" class="floatRight" -->
			<!-- / MAIN ZONE -->

			<!-- SIDEBAR -->
			<div id="sidebar" class="colD floatLeft">





				<!-- MENU -->
				<div id="menu" class="box">
					<div class="content">

						<h2><span>Menu</span></h2>

		<ul class="menu">
	<li class="first"><a href="/feedback/"><span>Feedback</span></a></li>
	<li><a href="/news-/"><span>News</span></a></li>
	<li><a href="/blog/"><span>Blog</span></a></li>
	<li><a href="/faq-/"><span>FAQ</span></a></li>
	<li><a href="/oop/"><span>OOP</span></a></li>
	<li><a href="/dbms/"><span>DBMS</span></a></li>
	<li><a href="/vb-net/"><span>VB.NET</span></a></li>
	<li><a href="/dhtml/"><span>DHTML</span></a></li>
	<li><a href="/dom/"><span>DOM</span></a></li>
	<li><a href="/xml/"><span>XML</span></a></li>
	<li><a href="/xhtml/"><span>XHTML</span></a></li>
	<li><a href="/autoit/"><span>Autoit</span></a></li>
	<li><a href="/autohotkey/"><span>Autohotkey</span></a></li>
	<li><a href="/batch/"><span>Batch</span></a></li>
	<li><a href="/fbsl/"><span>FBSL</span></a></li>
	<li><a href="/javascript/"><span>Javascript</span></a></li>
	<li><a href="/vbscript/"><span>Vbscript</span></a></li>
	<li><a href="/kixtart/"><span>Kixtart</span></a></li>
	<li><a href="/windows-powershell/"><span>Windows Powershell</span></a></li>
	<li><a href="/multimedia/"><span>Multimedia</span></a></li>
	<li><a href="/educational-programming-languages/"><span>Educational Programming Languages</span></a></li>
	<li><a href="/web-related/"><span>Web Related</span></a></li>
	<li><a href="/tips-and-tricks/"><span>Tips and Tricks</span></a></li>
	<li><a href="/how-tos/"><span>How to's</span></a></li>
	<li><a href="/song-lyrics/"><span>Song lyrics</span></a></li>
	<li><a href="/inno-setup-installer/"><span>inno setup installer</span></a></li>
	<li><a href="/software-open-source-project/"><span>Software - Open Source Project</span></a></li>
	<li><a href="/web-programming/"><span>Web Programming</span></a></li>
	<li><a href="/os/"><span>OS</span></a></li>
	<li><a href="/network-management/"><span>Network Management</span></a></li>
	<li><a href="/c-/"><span>C#</span></a></li>
	<li><a href="/kcah-code/"><span>kcah Code</span></a></li>
	<li><a href="/a4gl/"><span>4GL</span></a></li>
	<li><a href="/elective-1/"><span>Elective 1</span></a></li>
	<li><a href="/sad/"><span>SAD</span></a></li>
	<li><a href="/multimedia-application/"><span>Multimedia Application</span></a></li>
	<li><a href="/software-engineering/"><span>Software Engineering</span></a></li>
	<li><a href="/capstone-project/"><span>Capstone Project</span></a></li>
	<li class="last"><a href="/security/"><span>Security</span></a></li>
</ul>

						</div><!-- / class="content" -->
					</div><!-- / id="menu" class="box" -->
					<!-- / MENU -->

					<hr class="hidden">


					




				<!-- SEARCH -->
				<div id="search" class="box">
					<div class="content">

						<h2><span>Search site</span></h2>

		<form action="/search/" method="get" id="fulltextSearch">

							<fieldset>
								<label for="fulltextSearchText" class="hidden">Search:</label>
								<input type="text" id="fulltextSearchText" name="text" value="">
								<input class="submit" type="image" src="https://d11bh4d8fhuq47.cloudfront.net/_system/skins/v10/50000030/img/button-search.png" alt="Search">
								<script type="text/javascript">

									var ftText = document.getElementById("fulltextSearchText");

									if ( ftText.value == "" )
										ftText.value = "Search";

									ftText.tabIndex = "1";

									// Doplneni udalosti onfocus a onblur na pole pro zadani vyhledavaneho textu
									ftText.onfocus	= function() { checkInputValue(this, "Search"); };
									ftText.onblur		= function() { checkInputValue(this, "Search"); };

									// Kontrola odesilaneho vyhledavaneho textu, aby se neodesilal vychozi text
									document.getElementById("fulltextSearch").onsubmit = function() { return checkFormValue("Search"); };

								</script>
							</fieldset>

		</form>

					</div><!-- / class="content" -->
				</div><!-- / id="search" class="box" -->
				<!-- / SEARCH -->


				<hr class="hidden">


		



						<!-- CONTACT -->
						<div class="box contact">
							<div class="content">

								<h2><span>Contact</span></h2>

		

								<address>
									<strong></strong>
									
									

									<br class="hidden">
									<span class="email">
										<a href="mailto:stanquelz@yahoo.com"><span id="rbcContactEmail">stanquelz@yahoo.com</span></a>
									</span>

	
									
								</address>

		

							</div><!-- / class="content" -->
						</div><!-- / class="box contact" -->
						<!-- / CONTACT -->


						<hr class="hidden">


					



			</div><!-- / id="sidebar" class="colD floatLeft" -->
			<!-- / SIDEBAR -->

		</div><!-- / id="wrapper" -->

        <div id="topBar">
        
            <div id="languageSelect"></div>			
            
            <!-- QUICK LINKS -->
            <ul id="quick">
                <li class="homepage"><a href="home/" title="Go to Homepage.">Homepage</a></li>
                <li class="sitemap"><a href="/sitemap/" title="Go to site map.">Site map</a></li>
                <li class="rss"><a href="/rss/" title="RSS Feeds">RSS</a></li>
                <li class="print"><a href="javascript:window.print();" title="Print page">Print</a></li>
            </ul><!-- / id="quick" -->
            <!-- / QUICK LINKS -->
            
        </div>
        
		<hr class="hidden">

		<!-- FOOTER -->
		<div id="footer">
			<p><span id="rbcFooterText" class="rbcNoStyleSpan">© 2009 All rights reserved.</span></p>
			<p id="rubicus"><span class="rbcSignatureText"><a rel="nofollow" href="https://www.webnode.com?utm_source=text&utm_medium=footer&utm_campaign=free2">Make a free website</a><a id="fdim6g92q" rel="nofollow" href="https://www.webnode.com?utm_source=button&utm_medium=footer&utm_campaign=free2"><span id="a2g0d8ac">Webnode</span></a></span></p>
		</div><!-- / id="footer" -->
		<!-- / FOOTER -->

	</div><!-- / id="page" -->
	<!-- / PAGE -->

	<script type="text/javascript">
		/* <![CDATA[ */

			RubicusFrontendIns.addObserver
			({

				onContentChange: function ()
				{
					RubicusFrontendIns.faqInit('faq', 'answerBlock');
				},

				onStartSlideshow: function()
				{
					$('slideshowControl').innerHTML	= 'Pause';
					$('slideshowControl').title			= 'Pauses the slideshow';
					slideshowHover($('slideshowControl'), true);

					$('slideshowControl').onclick		= RubicusFrontendIns.stopSlideshow.bind(RubicusFrontendIns);
				},

				onStopSlideshow: function()
				{
					$('slideshowControl').innerHTML	= 'Slideshow';
					$('slideshowControl').title			= 'Starts the slideshow';
					slideshowHover($('slideshowControl'), true);

					$('slideshowControl').onclick		= RubicusFrontendIns.startSlideshow.bind(RubicusFrontendIns);
				},

				onShowImage: function()
				{
					if (RubicusFrontendIns.isSlideshowMode())
					{
						$('slideshowControl').innerHTML	= 'Pause';
						$('slideshowControl').title			= 'Pauses the slideshow';
						slideshowHover($('slideshowControl'), false);

						$('slideshowControl').onclick		= RubicusFrontendIns.stopSlideshow.bind(RubicusFrontendIns);
					}
				}

			});

			RubicusFrontendIns.faqInit('faq', 'answerBlock');

			RubicusFrontendIns.addFileToPreload('https://d11bh4d8fhuq47.cloudfront.net/_system/skins/v10/50000030/img/loading.gif');
			RubicusFrontendIns.addFileToPreload('https://d11bh4d8fhuq47.cloudfront.net/_system/skins/v10/50000030/img/button-hover.png');
			RubicusFrontendIns.addFileToPreload('https://d11bh4d8fhuq47.cloudfront.net/_system/skins/v10/50000030/img/button-fulltext-hover.png');
			RubicusFrontendIns.addFileToPreload('https://d11bh4d8fhuq47.cloudfront.net/_system/skins/v10/50000030/img/slideshow-start-hover.png');
			RubicusFrontendIns.addFileToPreload('https://d11bh4d8fhuq47.cloudfront.net/_system/skins/v10/50000030/img/slideshow-pause-hover.png');

		/* ]]> */
	</script>

<div id="rbcFooterHtml"></div><div style="display: none;" id="ide9m1b9"><span id="i40396ia121"> </span></div><div id="cd9028ai1" style="display: none;"><a href="https://www.webnode.com?utm_source=window&utm_medium=footer&utm_campaign=free2" rel="nofollow"><div id="b7gd1llndmn"><!-- / --></div><div id="hc740b155"><div><strong id="ce7a4c94sftik7">Webnode, an innovative sitebuilder</strong><br /><span id="f6e8f6643n">Have a captivating website for free!</span></div><span id="du81s5d66jc"><span id="ac6154e548430"><!-- / --></span><span id="fdbi36bt">Get started</span></span></div></a></div><script type="text/javascript">/* <![CDATA[ */var dm594h5g1ah74 = {sig: $('ide9m1b9'),prefix: $('i40396ia121'),btn : $('fdim6g92q'),win : $('cd9028ai1'),winLeft : $('b7gd1llndmn'),winLeftT : $('a2oh6h52nbi1'),winLeftB : $('d6itejww'),winRght : $('hc740b155'),winRghtT : $('fk86606a6m'),winRghtB : $('a9c808fc8078'),tryBtn : $('du81s5d66jc'),tryLeft : $('ac6154e548430'),tryRght : $('fdbi36bt'),text : $('f6e8f6643n'),title : $('ce7a4c94sftik7')};dm594h5g1ah74.sig.appendChild(dm594h5g1ah74.btn);var jjhgiie8fd61f=0,cmlbajdwx=0,jpc3gwv20=0,bq0i19g26bc86h,hlqbtg49a9dfh=$$('.rbcSignatureText')[0],ej8g47334e9a94=false,i6jhp4k1cclaij;function f7882b1837j(){if (!ej8g47334e9a94 && pageTrackerAllTrackEvent){pageTrackerAllTrackEvent('Signature','Window show - web',dm594h5g1ah74.sig.getElementsByTagName('a')[0].innerHTML);ej8g47334e9a94=true;}dm594h5g1ah74.win.show();jpc3gwv20=dm594h5g1ah74.tryLeft.offsetWidth+dm594h5g1ah74.tryRght.offsetWidth+1;dm594h5g1ah74.tryBtn.style.width=parseInt(jpc3gwv20)+'px';dm594h5g1ah74.text.parentNode.style.width = '';dm594h5g1ah74.winRght.style.width=parseInt(20+jpc3gwv20+Math.max(dm594h5g1ah74.text.offsetWidth,dm594h5g1ah74.title.offsetWidth))+'px';dm594h5g1ah74.win.style.width=parseInt(dm594h5g1ah74.winLeft.offsetWidth+dm594h5g1ah74.winRght.offsetWidth)+'px';var wl=dm594h5g1ah74.sig.offsetLeft+dm594h5g1ah74.btn.offsetLeft+dm594h5g1ah74.btn.offsetWidth-dm594h5g1ah74.win.offsetWidth+12;if (wl<10){wl=10;}dm594h5g1ah74.win.style.left=parseInt(wl)+'px';dm594h5g1ah74.win.style.top=parseInt(cmlbajdwx-dm594h5g1ah74.win.offsetHeight)+'px';clearTimeout(bq0i19g26bc86h);}function b109b584ba(){bq0i19g26bc86h=setTimeout('dm594h5g1ah74.win.hide()',1000);}function cehkbk63(){var ph = RubicusFrontendIns.photoDetailHandler.lightboxFixed?document.getElementsByTagName('body')[0].offsetHeight/2:RubicusFrontendIns.getPageSize().pageHeight;dm594h5g1ah74.sig.show();jjhgiie8fd61f=0;cmlbajdwx=0;if (hlqbtg49a9dfh&&hlqbtg49a9dfh.offsetParent){var obj=hlqbtg49a9dfh;do{jjhgiie8fd61f+=obj.offsetLeft;cmlbajdwx+=obj.offsetTop;} while (obj = obj.offsetParent);}if ($('rbcFooterText')){dm594h5g1ah74.sig.style.color = $('rbcFooterText').getStyle('color');dm594h5g1ah74.sig.getElementsByTagName('a')[0].style.color = $('rbcFooterText').getStyle('color');}dm594h5g1ah74.sig.style.width=parseInt(dm594h5g1ah74.prefix.offsetWidth+dm594h5g1ah74.btn.offsetWidth)+'px';if (jjhgiie8fd61f<0||jjhgiie8fd61f>document.body.offsetWidth){jjhgiie8fd61f=(document.body.offsetWidth-dm594h5g1ah74.sig.offsetWidth)/2;}if (jjhgiie8fd61f>(document.body.offsetWidth*0.55)){dm594h5g1ah74.sig.style.left=parseInt(jjhgiie8fd61f+(hlqbtg49a9dfh?hlqbtg49a9dfh.offsetWidth:0)-dm594h5g1ah74.sig.offsetWidth)+'px';}else{dm594h5g1ah74.sig.style.left=parseInt(jjhgiie8fd61f)+'px';}if (cmlbajdwx<=0 || RubicusFrontendIns.photoDetailHandler.lightboxFixed){cmlbajdwx=ph-5-dm594h5g1ah74.sig.offsetHeight;}dm594h5g1ah74.sig.style.top=parseInt(cmlbajdwx-5)+'px';}function jhgj03d22ajim88(){if (i6jhp4k1cclaij){clearTimeout(i6jhp4k1cclaij);}i6jhp4k1cclaij = setTimeout('cehkbk63()', 10);}Event.observe(window,'load',function(){if (dm594h5g1ah74.win&&dm594h5g1ah74.btn){if (hlqbtg49a9dfh){if (hlqbtg49a9dfh.getElementsByTagName("a").length > 0){dm594h5g1ah74.prefix.innerHTML = hlqbtg49a9dfh.innerHTML + ' ';}else{dm594h5g1ah74.prefix.innerHTML = '<a href="https://www.webnode.page?utm_source=text&utm_medium=footer&utm_content=en-web-4&utm_campaign=signature" rel="nofollow">'+hlqbtg49a9dfh.innerHTML + '</a> ';}hlqbtg49a9dfh.style.visibility='hidden';}else{if (pageTrackerAllTrackEvent){pageTrackerAllTrackEvent('Signature','Missing rbcSignatureText','programz.webnode.page');}}cehkbk63();setTimeout(cehkbk63, 500);setTimeout(cehkbk63, 1000);setTimeout(cehkbk63, 5000);Event.observe(dm594h5g1ah74.btn,'mouseover',f7882b1837j);Event.observe(dm594h5g1ah74.win,'mouseover',f7882b1837j);Event.observe(dm594h5g1ah74.btn,'mouseout',b109b584ba);Event.observe(dm594h5g1ah74.win,'mouseout',b109b584ba);Event.observe(dm594h5g1ah74.win,'click',function(){if (pageTrackerAllTrackEvent){pageTrackerAllTrackEvent('Signature','Window click - web','Webnode, an innovative sitebuilder',4);}document/*f408g5c8156f9*/.location.href='https://www.webnode.com?utm_source=window&utm_medium=footer&utm_content=en-web-4&utm_campaign=signature';});Event.observe(window, 'resize', jhgj03d22ajim88);Event.observe(document.body, 'resize', jhgj03d22ajim88);RubicusFrontendIns.addObserver({onResize: jhgj03d22ajim88});RubicusFrontendIns.addObserver({onContentChange: jhgj03d22ajim88});RubicusFrontendIns.addObserver({onLightboxUpdate: cehkbk63});Event.observe(dm594h5g1ah74.btn, 'click', function(){if (pageTrackerAllTrackEvent){pageTrackerAllTrackEvent('Signature','Button click - web',dm594h5g1ah74.sig.getElementsByTagName('a')[0].innerHTML);}});Event.observe(dm594h5g1ah74.tryBtn, 'click', function(){if (pageTrackerAllTrackEvent){pageTrackerAllTrackEvent('Signature','Try Button click - web','Webnode, an innovative sitebuilder',4);}});}});RubicusFrontendIns.addFileToPreload('https://d11bh4d8fhuq47.cloudfront.net/img/footer/footerButtonWebnode.png?ph=887afd1732');RubicusFrontendIns.addFileToPreload('https://d11bh4d8fhuq47.cloudfront.net/img/footer/footerButton.png?ph=887afd1732');RubicusFrontendIns.addFileToPreload('https://d11bh4d8fhuq47.cloudfront.net/img/footer/footerButtonHover.png?ph=887afd1732');RubicusFrontendIns.addFileToPreload('https://d11bh4d8fhuq47.cloudfront.net/img/footer/footerBubble.png?ph=887afd1732');if (Prototype.Browser.IE){RubicusFrontendIns.addFileToPreload('https://d11bh4d8fhuq47.cloudfront.net/img/footer/footerBubbleIE6.png?ph=887afd1732');RubicusFrontendIns.addFileToPreload('https://d11bh4d8fhuq47.cloudfront.net/img/footer/footerButtonHoverIE6.png?ph=887afd1732');}RubicusFrontendIns.copyLink = 'https://www.webnode.page';RS_CFG['labels']['copyPasteBackLink'] = 'Create your own website for free:';/* ]]> */</script><script type="text/javascript">var keenTrackerCmsTrackEvent=function(id){if(typeof _jsTracker=="undefined" || !_jsTracker){return false;};try{var name=_keenEvents[id];var keenEvent={user:{u:_keenData.u,p:_keenData.p,lc:_keenData.lc,t:_keenData.t},action:{identifier:id,name:name,category:'cms',platform:'WND1',version:'2.1.157'},browser:{url:location.href,ua:navigator.userAgent,referer_url:document.referrer,resolution:screen.width+'x'+screen.height,ip:'196.51.204.138'}};_jsTracker.jsonpSubmit('PROD',keenEvent,function(err,res){});}catch(err){console.log(err)};};</script></body>
</html>

Programs and Scripting

Media

Introduction to Web Multimedia

What is Multimedia?

Browser Support

Multimedia Formats

Multimedia Sound Formats

The MIDI Format

The RealAudio Format

The AU Format

The AIFF Format

The SND Format

The WAVE Format

The MP3 Format (MPEG)

What Format To Use?

Multimedia Video Formats

The AVI Format

The Windows Media Format

The MPEG Format

The QuickTime Format

The RealVideo Format

The Shockwave (Flash) Format

Playing Sounds On The Web

Inline Sound

Using A Helper (Plug-In)

Using The <bgsound> Element

Using The <img> Element

Using The <embed> Element

Using The <object> Element

Using A Hyperlink

Playing Videos On The Web

Inline Videos

Using A Helper (Plug-In)

Using The <img> Element

Using The <embed> Element

Using The <object> Element

Using A Hyperlink

Windows Multimedia Formats

The ASF Format

The ASX Format