Web Multimedia

1
Web Multimedia

• Sounds, Video, and Streaming

2
Multimedia What is possible?

• We know that graphics are integral to the Web
• Browsers have built-in abilities to display GIF
  and JPG files
• Weve also seen that Web browsers can be used to
  display text files, to download executables
• So youre probably not surprised to know that
  sound and even full motion video are other types
  of data that can be made available
• In fact any type of file can be placed on the Web
  but the trick is getting your browser to display
  it properly...

3
File Types on the Web

• Web browsers by default can render HTML and
  nearly all browsers can also render gif and jpg
  images
• The ability to play or view multimedia files
  however is not always built in, it depends on the
  browser and the software installed on your
  machine
• The server tells the browser what type of file it
  is sending it by using something called a MIME
  type (Multipurpose Internet Mail Extensions)
• MIME type are of the form text/html or
  image/gif
• A browser will use that MIME type info to try and
  figure out how to handle that file, whether it
  should render the file itself, whether it should
  load a helper applications, external plug-in,
  or if it will just ask you what to do with the
  file.
• With the old Netscape 4.7 as you could easily see
  the MIME type configuration there
• Edit/Preferences/Navigator/Applications

4
So.

• When it comes to multimedia
• Not all browsers may know how to deal with a
  sound or a video clip
• To enable that functionality you may need to
  install a third-party plug-in so your browser
  knows what to do and has some software to run
  that is capable of displaying/decoding that data
  when it is received (i.e. the Real Player, or
  Apples QuickTime)
• Plug-ins are also used to support additional
  document types such as Acrobat PDF files,
  Shockwave animations, etc.
• Fortunately modern versions of browsers like
  Netscape and IE bundle in the ability to play
  basic common multimedia files without installing
  any plug-ins
• IE also can use Active-X controls that you will
  be prompted to install if it isnt there already
  (ie. QuickTime)

5
Delivery mechanisms.

• Multimedia files can be delivered from the server
  to the client in two basic ways
• By copying the entire file from the server to the
  client and then the client plays it
• This is what happens with graphics right? The
  entire graphic is copied to your machine and then
  displayed
• By Streaming - where the server delivers some
  information and the client plays it while the
  information is still arriving

6
Copying approach.

• Simple, just create the file (sound or video),
  place it on the server just as you would like a
  graphic, and reference it in a link hreffile.wavListen to my sound
• or
• controlsconsole

7
The Good and Bad of this method..

• Simple for the person setting up the Web page
  however
• Sound and video files tend to be VERY large
  meaning they take a lot of space and take a LONG
  time to download.
• Someone on a 28.8 modem might have to take 30
  minutes to download a 1 minute video clip!

8
Common sound file formats

• As with graphics, there is more than one format a
  digital sound can be stored in. Most common
  formats include
• WAV - a Windows wave file. Can be stereo or
  mono, 8/16 bit. Large uncompressed audio files
• AU - Unix/Sun audio file, 8 bit mono, uses a
  compression algorithm to make files smaller
• AIF - Mac sound format
• MP3 Mpeg 3 audio files, compresses large
  files into smaller versions. Can be very high
  quality, sampled at different rates
• Others used for streaming Windows Media,
  Real, Quicktime

9
MP3 Files

• Popular mechanism for sharing music and some
  videos
• Originally made popular by Napster
• Many other options today, use a peer-peer file
  sharing concept
• Some applications are EVIL like KAZAA add
  spyware and other junk to your system
• Generally speaking MP3 encoding can produce
  excellent sounding files that are highly
  compressed
• When encoding an MP3 you can select the sample
  rate to determine quality. The higher the sample
  rate, the better the quality

10
Tools for creating and manipulating sound

• There are sound manipulation programs available
  that allow you to record and digitize sound, edit
  the sound, and save it to multiple formats
• In Windows the most basic tool is Sound
  Recorder
• Many shareware packages also available such as
  Goldwave that let you manipulate sound very much
  like PhotoShop/ImageReady let us manipulate
  graphics.

11
Using that sound on the Web.

• Simply create a link like
• Hear the sound
• or
• then options such as
• autostarttrue or autostartfalse
• controls console (to give the user a set of
  controls to start/stop)
• volume100
• width144 height120

12
Multimedia Streaming

• With streaming rather than the entire file
  being copied first and then played after it is
  received, the server starts sending and the
  client plays it as it is received
• As a result, the speed of the users connection
  to the server becomes VERY important
• To help, buffering is done to give the client a
  head start
• In addition, extensive compression is done to
  make the stream use as little bandwidth as
  possible. The more compression however the
  poorer the quality
• If the users connection cant keep up with the
  stream, it may start and stop, which can be VERY
  annoying for the listener/watcher
• To stream you need to use a server and a client
  that supports streaming functionality

13
Real Audio and Video

• On the Web this technique first popularized by
  Progressive Networks their Real Audio app
• Today it is called the Real Player instead
  because they added video as well as audio
  capabilities.
• To listen or watch you have to download the Real
  Player from www.real.com
• To create a Real streaming file you need to use a
  program to encode in the Real format. Used to
  be a free real encoder, difficult to find
  today. Then you place that encoded file on a
  Real server, add the appropriate HTML to your Web
  page and you are done.

14
Real isnt the only Streaming Application Today

• Microsoft has their Media Player built into
  Windows, and they keep coming out with new
  versions
• Apple QuickTime is very popular, especially with
  graphics professional, perhaps because so many of
  them tend to be Apple users to begin with
• These different players like to fight with each
  other over which will be your default player for
  the different media types each wants to do it
  all
• While Real used to dominate for streaming, the
  Windows media player is coming on strong perhaps
  because it is bundled with Windows and hence
  immediately available without a separate download

15
To Stream

• First must Digitize the sound or video
• Digitize your sound your sound or video
• Create a WAV or AVI file
• One it is digitized you need to encode it into
  the audio format you want, I.e. Real uses their
  own encoding mechanism, QuickTime is different,
  MP3 is different.
• Use the Windows Media Encoder to encode the file
  for Windows Media streaming as an example.
  Microsoft Producer can be used to create
  streaming PowerPoint slide shows.
• Noteonce you encode the file is in a
  proprietary format. May want to keep your
  original just in case you need to change in the
  future!
• May need to then create the necessary HTML and
  put all the files on a streaming media server.
  The process varies and the HTML code necessary
  varies with each streaming format.

16
Sample Streaming Sites

• Look at www.npr.org, www.cspan.org
• Notice options for both Real and Windows Media
• Look at www.quicktime.com to see some fun movie
  trailers. Notice how they have options for
  users connecting with varying amounts of
  bandwidth. Bigger and better quality are
  available if you have a faster connection
• Note Streaming can be done live but it really
  isnt live. Due to buffering, multiple users
  listening to the same stream be hear it at
  slightly different times

17
Reminder

• The ability to stream is basically just the
  plumbing to move the audio or video from place
  to place
• To successfully use video or audio on a website
  you may have to do a LOT of work in terms of the
  production quality of the multimedia file
• End users expect quality audio or video. If you
  do something very amateur looking it may be worse
  than not doing audio or video to begin with
• There are some higher-end tools to edit video
  available, like Adobe Premier for video. However
  these are like PhotoShop on steroids! Can be
  very complex to use!
• Simpler tools like Apples iMovie and the
  latest Windows Movie Maker help to make it a
  little simpler. Having a digital camcorder
  simplifies life a TON in terms of the initial
  capture of the video files, but in many ways the
  work is just starting with that initial video or
  audio capture

18
To Stream at UW.

• See
• www.washington.edu/computing/web/streaming/