Advanced HTML Multimedia

1
Advanced HTMLMultimedia

• John Allwork
• Multimedia1.ppt

2
Summary of Lecture

• Overview of types of multimedia
• Simple animation, videos and 3D
• Understand limitations of browsers and plug-ins
• MM formats
• Roles of Javascript and Java

3
Multimedia Pages

• Multimedia is a combination of
• text, images, graphics and sounds
• animation
• movies and video
• 3D and Virtual Reality
• Others ? (streaming?)

4
Viewing Multimedia

• Browsers have limited capabilities
• Browsers are mainly text and images. They cant
  display all applications
• Capabilities extended by
• Add-ons (plug-ins)
• technology (java and javascript)
• Some plug-ins automatically installed

5
Add-ons

• Allow browsers to view specific applications
• e.g. quicktime movies - .mov files
• Usually free to display application
• but commercial to generate
• tag used in html
• ToolsoptionsAdd-ons to see them

6
Examples

• Shockwave and Quicktime
• Include animation, sound, video interaction and
  VR - Games
• Some provide controls such as fast forward and
  rewind (some dont ! )
• Examples
• - www.macromedia.com/shockwave/
• - www.apple.com/quicktime

7
Flash 3D example
8
Quicktime movie trailers
9
Multimedia Formats

• Graphics
• .pdf Adobe portable document format
• .gif - Graphics Interchange Format (proprietary)
• .jpg - joint photographic experts group
• .png - portable network graphics (new format)
• .bmp - not preferred
• Other formats
• require plug-ins or other software

10
Graphics

• GIF best for diagram/line art images
• JPEG best for photos, natural scenes, paintings,
  X-rays
• PNG improves on GIF
• Only 216 colours are guaranteed to look the same
  on Mac, PC and Unix web browsers
• GIFs can be transparent - float over background
• Progressive GIFs and JPEGs some idea of picture
  before completely loaded

11
Audio

• many formats
• .wav - Microsoft
• .aiff - originally Apple Macs
• .au - developed by Sun
• .ra - RealAudio (popular commercial format)
• .midi - Musical Instrument Digital Interface
• (quite small files)

12
Audio issues

• smaller files than video
• can set mood ( can run as part of web page - but
  can annoy)
• use to emphasise actions (button clicks warnings)
• attract attention
• good for language teaching and the disabled

13
Video

• Large files
• Can combine audio and video
• formats
• .avi - audio video interleave
• .mov - Apples QuickTime movie format
• .mpg - Moving picture expert group (ISO
  compression standard)

14
Animation

• Animated gifs - from a sequence of gif images
• Software available to create the animation
• GifWorks, Gif Construction Set
• All browsers support gifs
• Animations available for download
• - www.gifs.net
• Other methods use Java or Javascript

15
Flash and Director

• Macromedia products. Provide
• audio and video,
• animation,
• movie style timeline and keyframes
• Interaction games
• Shockwave player

16
Java, Javascript and VRML

• Programming technologies to enhanced browsers
  multimedia capabilites
• Java - programming language
• Javascript adds interaction (buttons etc.) -
  embedded in newer browsers
• VRML/ X3D - 3D Computer Aided Design

17
Java

• Object Oriented network aware language
• Developed by Sun, now ISO standard
• Java applications are platform independent
• The web becomes an interface for any application
• Implementation is transparent to user

18
Java

• Java programs are known as applets
• Runs within restricted environment to provide
  security
• Interpreted language
• Applets can be downloaded and reused

19
Javascript

• Embedded in HTML
• Provides control over browser functions, e.g
• colours
• navigations bars
• buttons
• Easy to learn language
• Platform independent

20
Javascript

• Developed by Netscape
• Is not related to Java
• Supported by other browsers
• Netscape tutorial
• home.netscape.com/eng/mozilla/3.0/handbook/javascr
  ipt

21
VRML

• 3D and CAD like imaging format
• Examples
• building and architecture
• chemistry, molecular modelling
• archaeology
• Image has to be programmed
• Interaction touch sensors
• Final year projects - MMU campus