lecture 6b multimedi a on web

1

Lecture 6b

Multimedia on Web

2

Multimedia

3

Multimedia

HyperText HyperMedia

MultiMedia

is a

4

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

• Multimedia is applications that use multiple modalities, including text, images, drawings (graphics), animation, video, sound including speech, and interactivity.

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.

What is Multimedia?

5

Examples of typical present multimedia applications include

- Digital video editing and production systems.

- Electronic newspapers/magazines.

- World Wide Web.

- On-line reference works: e.g. encyclopedias, games, etc.

- Home shopping.

- Interactive TV.

- Multimedia courseware.

- Video conferencing.

- Video-on-demand.

- Interactive movies.

6

Browser Support

The first Internet browsers had support for text only.

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.

7

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.

8

Multimedia Sound Formats

9

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. 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).

10

The MIDI Format

Click here to play Motzart.

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 30K in size but it plays for nearly 3.5 minutes.

MIDI files are supported by all the most popular Internet browsers.

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

11

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.

12

The AU Format

The Au file format is a simple audio file format that consists of a header of six 32-bit words, an optional information chunk and then the data.

The format was introduced by Sun Microsystems.

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.

13

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.

14

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.

15

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.

16

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.

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

17

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.

18

Multimedia Graphic/Image Formats

19

Image RepresentationImage Representation

Bit map techniques (raster)• Pixel: short for “picture element”• RGB• Luminance and chrominance

Vector techniques• Scalable• PDF and PostScript

20

1-bit Images

• Each pixel is stored as a single bit (0 or 1), so also referred to as binary image.

• Such an image is also called a 1-bit

monochrome image since it contains no color.

21

8-bit Gray-level Images

• Each pixel has a gray-value between 0 and 255. Each pixel is represented by a single byte; e.g., a dark pixel might have a value of 10, and a bright one might be 230.

22

24-bit Color Images

• In a color 24-bit image, each pixel is represented by three bytes, usually representing RGB.

• This format supports 256x256x256 possible combined colors, or a total of 16,777,216 possible colors.

• However such flexibility does result in a storage penalty: 24-bit color image would require 921.6 kB of storage without any compression (640x480).

• An important point: many 24-bit color images are actually stored as 32-bit images, with the extra byte of data for each pixel used to store an alpha value representing special effect information (e.g., transparency).

23

8-bit Color Images

Many systems can make use of 8 bits of color information (the so-called “256 colors") in producing a screen image.

Such image files use the concept of a lookup table to store color information.

Basically, the image stores not color, but instead just a set of bytes, each of which is actually an index into a table with 3-byte values that specify the color for a pixel with that lookup table index.

24

File Formats

For internet work there are two types of files you need to be familiar with: JPG and GIF.

There are many other file types but the vast majority of all images on the internet are based on one of these two formats.

25

GIF

It is so simple!

Limited to 8-bit (256) color images only, which, while producing acceptable color images, is best suited for images with few distinctive colors (e.g., graphics or drawing).

GIF standard supports interlacing - successive display of pixels in widely-spaced rows by a 4-pass display process.

GIF actually comes in two flavors:1. GIF87a: The original specification.2. GIF89a: The later version. Supports simple animation via a

Graphics Control Extension block in the data, provides simple control over delay time, a transparency index, etc.

26

JPEG

JPEG: The most important current standard for image compression.

The human vision system has some specific limitations and JPEG takes advantage of these to achieve high rates of compression.

JPEG allows the user to set a desired level of quality, or compression ratio (input divided by output).

Image, with a quality factor Q=10%, yields 1.5% of the original size. In comparison, a JPEG image with Q=75% yields an image size 5.6% of the original, whereas a GIF version of this image compresses down to 23.0% of uncompressed image size.

27

Choosing Which Format to Use

Unless you have a very good reason to use a different format, you should always use either JPG or GIF for your internet files.

Indeed, many browsers and email programs will only recognize these formats.

28


JPG: This format is best for images with a large number of colours, such as photographs.

This format was specifically developed for use with photos.

Most photo-image software applications which come with cameras and scanners tend to use JPG by default.

29


GIF: Use this format for images with a lower number of colours and with strong, clearly defined lines.

Images which contain simple shapes and/or text usually use gif, e.g. logos, buttons, icons, etc.

You may also find that small thumbnail-sized photo images can work better as gif.

30


Photos: Use JPG Logos: Use GIF

• If you're not sure which format to use, save your image in two versions - one of each. You can then compare image quality and file size to see which is best.

31

Optimising an Image File

With internet images, the goal is generally to have maximum image quality with minimum file size.

Optimising an image refers to the process of balancing various compromises in order to achieve this goal.

32


File size is determined by two main factors:

Image Size (Resolution)This is determined by the number of pixels in the image. The bigger the image, the more pixels it has and the larger the file size.

To optimise the image size we will crop and/or resize the image.

Image Quality (Compression)JPG and GIF are both "compressed" formats, which means you can lower the file size by reducing image quality. Note that GIF and JPG files are handled differently when it comes to compression.

To optimise jpg files we will compress them. To optimise GIF files we will reduce the number of colours.

33


34


35


Quality: 12File Size: 23K



JPG Options

36


GIF Options

37


256 color

64-Colour GIFColour Table

38


The rule of thumb is:Always use the lowest number of colours you can get away with.

GIF Options

39

Multimedia Video Formats

40

Standard video file types

avi

wmv (windows media video - new format)

mpeg

mov (better known as quicktime)

RealVideo

Flash

41

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.

42

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.

43

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.

44

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.

45

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.

46

How to reduce size of videos

Shorten length Reduce resolution More compression Drop frame rate

Use video streaming

47

Video Streaming

You see video on-demand (i.e.. it plays as it downloads).

Essentially you download part of the file to act as a buffer.

Once you start playing from the buffer, the file continues to download topping up the buffer.

However you may need a special server to stream your media from.

Common streaming formats are• mov, mpeg-4, wmv, ra (real video), flash

48

What is Flash?

Flash is a multimedia graphics program specially for use on the Web.

Flash enables you to create interactive "movies" on the Web.

Flash uses vector graphics, which means that the graphics can be scaled to any size without losing clarity/quality.

Flash does not require programming skills and is easy to learn.

49

The Flash (Shockwave) Format

The Flash format was developed by Macromedia.

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

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

50


Macromedia Flash is an excellent choice for delivering video on the Internet.

It has better browser penetration and provides more creative opportunities than any other video format.

Flash files can include graphics, animation, video, audio and interactive material.

51

Flash vs. Animated Images and Java Applets

Animated images and Java applets are often used to create dynamic effects on Web pages.

The advantages of Flash are:• Flash loads much faster than animated images. • Flash allows interactivity, animated images do

not .• Flash does not require programming skills, java

applets do.

52


Flash uses the following file types and extensions:

FLA: Flash file. This is the "master" document file for a flash project, i.e. the source file you work with in the Flash authoring program. These files can only be opened with Flash — not the Flash Player.

FLV: Flash Video. Supported from version 7, FLV files are the preferred format for delivering video clips via Flash.

SWF: Flash delivery file — the file that end users see. This is a compressed version of the FLA file which is optimized for viewing in a web browser, the standalone Flash Player, or any other program which supports Flash. This file type cannot be edited in Flash.

53

End of Lecture 6b

lecture 6b multimedi a on web

Documents