1. Web Programming– UFCFB3-30-1 Lecture 8
Instructor : Mazhar H Malik
Global College of Engineering and Technology

2. Introduction to Multimedia for web design LO 5,6
Lecture 8
Introduction to Multimedia for web design
LO 5,6
7/21/2018
Lecture 8

3. In this lecture… General overview - multimedia Web audio formats
Web video formats
Downloading & Streaming audio and video
Adding audio/video to a web page
7/21/2018
Lecture 8

4. Multimedia Integrating many elements into one production
Text, graphics, video, music, voice etc
These media can be linked (often using buttons) so that the user can navigate, interact, create and communicate
A key feature of multimedia is interactivity
Web is an ideal interactive medium for delivery
Problems with bandwidth and browser support
7/21/2018
Lecture 8

5. Uses for multimedia Education Information Entertainment
In a class, for individuals, at home, for students to learn from or to learn by doing
Information
Training, marketing, demonstrations
Entertainment
Computer games, home movies and presentations
7/21/2018
Lecture 8

6. Examples of multimedia sites
Australian History Mysteries
Physics multimedia from Encarta
Check these links and substitute others if desired
7/21/2018
Lecture 8

7. Linear Multimedia Fixed order of frames define single sequence.
Arrangement of text and pages implies a linear reading order.
7/21/2018
Lecture 8

8. Non-Linear Multimedia
Flash: Jumps between frames controlled by interactive.
Hypermedia: use hyperlinks between pages permit multiple reading order.
7/21/2018
Lecture 8

9. Web audio(sound) formats
There are many different sound file formats
MIDI
Small files
Only notes, not sounds (music not voice)
Good browser support
.mid or .midi
7/21/2018
Lecture 8

10. audio Real Audio AIFF Developed by Real Media Also supports video
Allows streaming
.rm or .ram
AIFF
Audio Interchange File format
Developed by Apple
Not cross platform; not full browser support
7/21/2018
Lecture 8

11. audio WAVE MP3 Developed by IBM and Microsoft
Supported by all computers running Windows and most browsers
.wav
MP3
Actually the sound part of MPEG files (video)
Good compression and support
Generally recommended format for most sound files
.mp3
7/21/2018
Lecture 8

12. Moving Pictures Flip book Animation – GIF Persistence of vision
Wagon wheel illusion
7/21/2018
Lecture 8

13. Video Compression Video files include bitmap images + sound
Video files are huge
12 fps (frame per second)flash movie standards for web sites.
24 fps, 30 fps TV standards.
Each frame is a bitmap image
compression is important
7/21/2018
Lecture 8

14. Video Compression Spatial compression: Temporal compression:
Compress each frame separately.
Done by MJPEG codec in digital video cameras.
Temporal compression:
Encode changes from frame to frame.
Uses keyframes to synchronise.
MPEG Sorenson use both.
7/21/2018
Lecture 8

15. Web video formats AVI Windows Media Format Audio Video Interleave
Developed by Microsoft
Supported on all Windows machines and by most browsers
.avi
Windows Media Format
Non-Windows machines need a free plug-in
.wmv
7/21/2018
Lecture 8

16. video Moving Pictures Experts Group QuickTime Most popular on Web
Cross-platform and supported by all browsers
.mpg or .mpeg
QuickTime
Developed by Apple
Windows computers need a free plug-in
.mov
7/21/2018
Lecture 8

17. video RealVideo Shockwave (Flash) Developed by Real Media
Allows streaming
.rm or .ram
Shockwave (Flash)
Developed by Macromedia
Need a plug-in to play - included on all browsers
.swf
7/21/2018
Lecture 8

18. Flash Adobe flash plug-in Includes video content.
Allows full interaction with movie.
Open standard
Streaming format
Vector based movies very small compressed size.
Presentation completely under control..
7/21/2018
Lecture 8

19. Multimedia on web page can be…
Inline
included in the page; play automatically
Can annoy users who don't expect it
Users may have sound off
Can use a lot of bandwidth (slower to load)
Or use a helper
A helper (plug-in) application
In a separate window
Allows user control e.g. volume, replay
7/21/2018
Lecture 8

20. Download
have to download the whole file before playing the audio or video like any other file type.
A link to download
Using a plug-in to play
7/21/2018
Lecture 8

21. Download Advantages Disadvantages
No special plug-in for a normal link <a> tag.
Download in the users own time.
Disadvantages
File copied to the users computer.
No fast forwarding.
No control over redistribution.
Whole file download.
7/21/2018
Lecture 8

22. Streaming
Streaming downloads approximately 10% to 15% of the file (a buffer), and then starts playing while the rest of the file is still downloading
7/21/2018
Lecture 8

23. Streaming Advantages Disadvantages Control of data.
Allows fast-forward and real-time web-casts.
Constant communication allows flexible download.
Disadvantages
Must have special server and client software.
Users do not have a cached version and so have to access the site to view again.
Higher server load.
7/21/2018
Lecture 8

24. Streaming examples
7/21/2018
Lecture 8

25. Multimedia considerations
Do you really need it?
Does it add to your message?
Will it make the site too messy?
Will your users have the bandwidth needed?
Will it slow the site so much that users become impatient and click on through?
Can the objective be achieved using a simpler, cleaner, faster method?
7/21/2018
Lecture 8