Lecture 6b Multimedi a on Web

1. Lecture 6bMultimedia 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 multiplemodalities, 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-bitImages • Each pixel is stored as a single bit (0 or 1), so also referredto as binary image. • Such an image is also called a 1-bit monochrome imagesince it contains no color.

21. 8-bit Gray-level Images • Each pixel has a gray-value between 0 and 255. Each pixelis represented by a single byte; e.g., a dark pixel might havea 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 storecolor information. • Basically, the image stores not color, but instead just aset of bytes, each of which is actually an index into a tablewith 3-byte values that specify the color for a pixel withthat 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 sosimple! • Limited to 8-bit (256) color images only, which, while producing acceptable color images, is best suited for images withfew distinctive colors (e.g., graphics or drawing). • GIF standard supports interlacing - successive display ofpixels 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 animationvia 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 andJPEG takes advantage of these to achieve high rates of compression. • JPEG allows the user to set a desired level of quality, orcompression ratio (input divided by output). • Image, witha quality factor Q=10%, yields 1.5% of the original size. In comparison, aJPEG 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% ofuncompressed 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 is:Always 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. Howto 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.