Multimedia on Web

1
Multimedia on Web
2
Multimedia
3
Multimedia
HyperText
HyperMedia
is a
MultiMedia
4
What is Multimedia?

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

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 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 Q10, yields 1.5
  of the original size. In comparison, a JPEG image
  with Q75 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
Choosing Which Format to Use

• 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
Choosing Which Format to Use

• 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
Choosing Which Format to Use
Logos  Use GIF
Photos  Use JPG

• 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
Optimising an Image File

• 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
Optimising an Image File
34
Optimising an Image File
35
Optimising an Image File
JPG Options
Quality  12File Size  23K
Quality  3File Size  13K
Quality  0File Size  12K
36
Optimising an Image File
GIF Options
37
Optimising an Image File
256 color
Colour Table
64-Colour GIF
38
Optimising an Image File
GIF Options
The rule of thumb isAlways use the lowest
number of colours you can get away with.
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
The Flash (Shockwave) Format

• 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
The Flash (Shockwave) Format

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