Friday, December 15th, 2017

Multimedia


[banner-rotator-fx][/banner-rotator-fx]

Introduction


Multimedia is pictures, sound, 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.

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 a Web Site


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.

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> or the <object> tag.

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 <embed> Tag

 

The purpose of the <embed> tag is to embed multimedia elements in web page.

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

Example 

<embed src=”beatles.mid” />

Try it yourself »

Note: The <embed> tag is deprecated. The World Wide Web Consortium (W3C) recommend using the <object> tag instead.


Using the <object> Tag

 

The purpose of the <object> tag is to embed multimedia elements in web page.

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

Example 

<object
classid=”clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95″>
<param value=”liar.wav” />
</object>

Try it yourself »


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.

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

Example 

<a href=”beatles.mid”>Play the Beatles</a>

Try it yourself »

Playing Videos on a Web Site


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.

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> or the <object> tag.

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 <embed> Tag

 

The purpose of the <embed> tag is to embed multimedia elements in web page.

The following code fragment displays an AVI file embedded in a web page:

Example 

<embed src=”video.avi” />

Note: The <embed> tag is deprecated. The World Wide Web Consortium (W3C) recommend using the <object> tag instead.


Using the <object> Tag

 

The purpose of the <object> tag is to embed multimedia elements in web page.

The following code fragment displays an AVI file embedded in a web page:

Example 

<object data=”video.avi” />

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.

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

Example 

<a href=”video.avi”>Play a video file</a>