Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

Multimedia by yaofenji


• Web browsers typically only handle the following
  – Text
  – Image files in gif, jpg or png
• What if you want to go beyond this? There are a
  multitude of multimedia file formats available
• Can we add any to our web sites?
  – Yes, as long as we do one of the following
     • embed the multimedia file inside either a Java applet or a
       scripting language such as JavaScript (but these languages are
       limited in the types of files permitted) or
     • require that the user’s browser has the proper “plug in” so that
       they can see the file displayed
  – What is a plug in?
                          Plug Ins
• These are also known as helper applications – these are
  programs that the web browser can call upon to access files
  of types not built in to the web browser
   – The helper application runs outside of the browser (for
     instance, it pops open another window)
   – Plug ins run the file inside the web browser
• Most plug ins are freely available for users to download as
   – Do you download all of the plug ins? If not, why not?
• Popular plug ins include
   – Adobe shockwave and flash for swf and flv files
   – Adobe reader for pdf files
   – Java runtime environment for java applets
   – Realplayer and windows media player for mp3, rm, wmv, avi
     and mpg files
   – Apple quicktime for mov files
           Types of Multimedia Files
• Audio files:
   – wav – microsoft format, standard on all PCs but also available on Macs
   – aiff – Mac audio platform, also supported on PC as aif
   – mid – MIDI files, which are not sound files themselves but denote the
     instructions needed to generate music through a sequencer program, the
     instructions are note-by-note tones including duration and instrument type
        • these files can be much smaller than the other sound files but are recreations of the
          music and so may not sound much like the original
   –   au – older type for Sun workstations
   –   mp3 – highly compressed audi files
   –   ogg – open source version of mp3
   –   m4a – the iTunes/iPod music format, like mp3 and ogg
• Video
   –   mov – format for Quicktime (Mac)
   –   avi – original standard for video, still widely used
   –   flv – flash (also swf for shockwave flash)
   –   wmv – for windows
   –   mpg – one of the original standards, still widely used
   –   m4v and mp4 – newer formats
   –   3gp – mp4 for 3G cell network transmissions
         Obtaining Multimedia Files
• Probably the most common way to obtain files is to
  download/rip the files off of CDs/DVDs
    – Be careful, if you post such files, this may very well
      violate copyrights and you could become liable for this
    – You can also download files from other sources on the
      Internet but again, you may be violating copyrights
       • while you might easily get away with such downloads for your
         personal use, posting such files to your website can be very
• You can also create your own files
    – Most operating systems come with built-in audio
      recorders that allow you to record through a microphone
    – You can also import video from cameras or tv fairly
•   There are also programming languages that
    generate multimedia files like Java, JavaScript and
            What You Should Know
• Sound and image are analog signals
   – Non-discrete information, they come in continuous wave forms
• Computers store information digitally (1s and 0s)
   – To translate from analog to digital, you need an A to D
     convertor process – usually built into the sound or graphics
   – The translation process requires discretizing the continuous
     information by breaking it into small chunks
   – The number of chunks is based on the scanning rate (for
     images) or sampling rate (for sounds)
       • How many pixels per inch?
       • How many intervals per second for sounds
   – The higher the rate, the better the quality, but the larger the file
       • Typical sampling rates are 44KHz or higher – 44,000 samples per
         second, CD quality is 55.1KHz
       • Music is usually recorded using 16-bit resolution (16 bits per sample)
         versus 8-bit resolution for voice or simple sound effects
Lossy vs Lossless, Streaming or Not
• Many of the file types today store multimedia files in a
  lossy format
   – Lossy means that, in order to reduce the storage capacity
     of a file, some details (or quality) are discarded
      • you cannot re-obtain what is lossed, so you are obtaining a lesser
        quality version
   – Lossless means that the file can be stored and transmitted
     in a reduced capacity but has to be uncompressed before
     using it, uncompressing the file results in the same quality
     that the file started with
• A streaming file is one in which the storage contents are
  sent while the file is being displayed (or heard)
   – You don’t ever have the full file, instead just pieces at a
   – Streaming saves on the wait time for obtaining the file and
     saves storage space
   Adding Multimedia to Web Pages
• The simple way to add multimedia is through a hyperlink
   – <a href=“multimediafile”>link</a>
• The user will click on the link and either the file will be
  downloaded and started in a helper application (if the
  user’s computer has the helper application) or the user will
  be asked to save the file
   – This is not very satisfactory as it requires the user’s response to
     play the file, the user may be unhappy having to click on the
     link as well
• Or you can embed the file in your html code using one of
  two xhtml tags:
   – <embed /> -- this command is not part of the W3C XHTML
     1.0 recommendation and therefore it is not standard, however it
     is well supported by most browsers
   – <object>…</object> -- this command is both more
     complicated to use and is not implemented in all browsers and
     when it is, it is not implemented consistently – however, it is
     part of the W3C XHTML 1.0 recommendation
                            <embed />
• This tag is similar to the img tag
   –   it requires a src property that specifies the multimedia file
• This tag can be used for sound files or video files
   – The embed tag also has the following optional properites
       • controls: one of console, smallconsole, playbutton, pausebutton,
         stopbutton and volumelever
       • height/width in pixels – this is the size of the control console, not of
         the video (if this is to play a video file)
       • autostart, autoplay (true or false) to indicate whether the media
         should play once the page has loaded, or wait for the user to start it
       • loop (an integer number or true to indicate that the media should
         loop (play continuously))
       • align – location of the console (baseline is the default, others are
         left, right, center, top)
       • hidden – hides the console if true
       • pluginspace – a URL for a downloadable plugin
       • type – the type of media to play such as audio/mpeg, audio/wav,
         video/mpeg, etc
• Unlike the <embed /> tag, the <object> tag is not
  self-contained, so you have to specify the multimedia
  file through a separate <param /> tag
  – The <object> tag has the following properties:
     • data – file name (to tie this together with the param tag(s)
     • type – the type of media file
     • height/width
     • classid – this identifies an ActiveX control that must be installed
       on the user’s computer and if not installed, it can automatically
       be downloaded and installed
     • codebase – specify the location for the plugin
  – The <param /> tag has the following properties:
     • src – same file name as specified in data above
     • loop, hidden, autoplay – as with the <embed /> tag
     • controller – true for the controller to be visible, or false (hidden)
         – loop, hidden and controller are not uniformly supported
           Types of Media and Tags
• Although not part of the W3C recommendation, the author
  recommends the <embed /> tag to play background sounds
   – This is primarily because loop is not regularly supported in
     <param /> but is in <embed /> and since your background
     sound will probably be a short file, you will use loop=true to
     make it play continuously
• For playing a podcast, you need to take the original audio
  file and create an RSS feed (really simple syndication)
   – The rss feed contains XML information about your podcast
     along with the audio (most likely an mp3)
      • you can code your own rss feed since XML can be created/edited in
   – The author recommends using a hyperlink for your podcast
     since the user may not want to listen to it automatically, or you
     may want the user to have to click on the hyperlink to get it
• Audio files (music) and video files can be played
  using either <embed /> or <object>
  – However, the <object> tag is preferred for several reasons
     • First, the <param /> tag permits the classid which is required to
       play certain types of video (particularly quicktime)
     • Second, the <param /> tag also includes the codebase which is
       useful when displaying video in IE
     • Third, the <object> tags also allow the following JavaScript
       code that can get around the problems of non-IE browsers:
         – <!--[if !IE]>--> <object…></object><!--<!endif]-->
  – The author points out that the classid and codebase
    properties that are used to define Quicktime videos will
    only reliably play in IE so there needs to be an alternative
     • One way is to embed an <embed /> tag in <object> and the other
       is to use the if statement above to define an <object> without the
       classid or codebase properties
              The Three Alternatives
<embed src=“” autoplay=“false” controller=“true” />

<object classid=“clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC76B”
  <param name=“src” value=“” />
  <param name=“autoplay” value=“false” />
  <param name=“controller” value=“true” />
  <embed src=“” autoplay=“false” controller=“true”
          pluginspage=“” />
  Text here to describe the controller</object>

<object classid=“clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC76B”
  <param name=“src” value=“” />
  <param name=“autoplay” value=“false” />
  <param name=“controller” value=“true” />
  <!--[if !IE]>-->
         <object type=“video/quicktime” data=“”>
          <param name=“autoplay” value=“false” />
          <param name=“controller” value=“true” /></object>
    Text here to describe the controller</object>
         Dynamic Source Attribute
• This attribute is available for the <img /> tag but only for
  people viewing in IE
   – While you are using the img tag (usually used for single
     images), this attribute allows you to insert a video clip instead
   – Instead of a controller, the video clip appears using the same
     format as an image (i.e., without the controller and even
     without a border)
   – The property is dynsrc and the value is the video file as in
   – Also note that you include autostart and can include loop
     properties as well
   – If the user does not use IE, this will not work, so they may not
     see anything, or they may see a broken link so use this with
     caution (the author suggests using this if you are making a
     website for an intranet whose clients all are required to use IE)
• As seen throughout this chapter, there are a number
  of issues in terms of how to best offer multimedia
  content such that it will play without problem on
  various browsers
   – The best approach is to know how to use both types of
     tags and test to see which works most often
• Its also highly desirable to provide alternatives to
  users such as
   – Captioning for videos (available via Media Access
     Generator, or MAGpie from
   – use proper screen rates for video/animation so that the
     video does not cause seizures (between 2 Hz and 55 Hz)
   – alt properties for img tags that use dynsrc
   – useful text descriptors
   – download links for plug ins
                   Copyright Issues
• Recall the term Fair Use
   – You are allowed to excerpt music or movie clips for legitimate
      • Does this mean you could place 30 seconds of your favorite song on
        your web site? No
• Here are some criteria for establishing fair use:
   – The use must be educational rather than commercial
   – The nature of the work copied should be factual rather than
   – The amount copied must be as small of a portion of the work
     as possible
      • this means that if you can get your educational point across using a 10
        second clip, a 20 second clip would violate this
   – The copy does not impede the marketability of the original
      • you can find more information at and
      • additionally, some artists freely distribute their work without copyright,
        sometimes they will use a Creative Commons license instead
• Flash is a multimedia application that runs ActiveScript
   – The environment allows one to create multimedia files, so
     it is an authoring tool
   – With Flash, multimedia files can be created by using
     editing types of operations (similar in ways to editing
     drawings or text) but you can also create your own
     programming code
• Flash has a number of uses
   – Creating navigation bars with drop down menus and
   – Creating animation for splash pages, banners/scrolling text
   – Playing multimedia files without the need for additional
     plug ins
   – Tracking mouse motions
   – Opening up windows
      Adding Flash to a Web Page
• Both <object> and <embed /> tags can be used to
  display flash files
  – You can add a <noembed> tag around text that describes the
    flash file to improve accessibility whether you use <object>
    or <embed />
     • <noembed>This movie is fun to watch</noembed>
• The <embed /> tag has these properties
  – src – the name of the .swf file
  – quality – describes the quality of the file, such as high
  – pluginspage –
  – type – application/x-shockwave-flash
  – bgcolor, height, width
            Flash Using <object>
• The <object> tag has a number of attributes
  specialized for flash
  – accesskey – a hotkey on the keyboard to
    activate/deactivate the flash running (press ctrl+hotkey)
  – classid:D27CDB6E-AE6D-11cf-96B8-444553540000
  – codebase:
  – height, width, title
  – tabindex – a numeric value specifying the tabbing order
• The <param /> tag can have the following
  – movie – name of .swf file
  – quality – describe the quality, for instance high
  – bgcolor
                      Java Applets
• One of the appeals of the programming language
  Java is the fact that Java code is not compiled for any
  particular machine type
• Instead, when you compile Java programs, you
  create an intermediate code called bytecode
   – Bytecode is interpreted so that at run-time, the code is
     translated into machine code
   – What this means is that a person can write Java code and
     make it available for anyone who has a Java run-time
     environment, called a Java Virtual Machine (JVM)
      • all web browsers include a JVM
   – This allows a programmer to get their executable code out
     to people more easily than languages like C++
• Java is an OOPL and one of its built in classes is
  called an Applet
   – It is the Applet that will run in a browser
               Creating an Applet
• The first step is to write the Java program
   – You define your Applet class and provide all of the code
   – The Applet class requires at least one method, either init
     or run (your choice)
      • other methods can be defined including stop
• Next, you have to compile your Java program into
  byte code
   – If you have errors, the program does not compile, so you
     have to fix all errors first
• Now you upload your Java byte code file (.class
  file) to your web server
• And finally, you add an <applet>…</applet> tag to
  your html page
                 The <applet> Tag
• The properties for the <applet> tag are
   – code – the name of the .class file
   – codebase – if the applet is not in the same directory as the web
     page, this establishes the directory of (or path to) that file
   – height, width
   – alt – as with <img />, this allows you to define text description
     for what the applet will do
   – id – as with other tags, a unique identifier for this item which can
     be referenced by other code
• It is possible that the applet is invoked with parameters and
  if so, you would add <param /> tags which would include
  two properties, name and value
   – <param name=“color” value=“red” />
   – <param name=“x” value=0 />
   – this might be used to establish that in the applet, the variable
     color should be “red” and the variable x should be 0
• Additionally, <param /> tags can define data (a text file
  containing input data for the program) and bgColor
                     Java vs Flash
• Both can provide animation such as a banner or a
  splash screen
  – However, Java is a programming language
     • as a programming, you have to figure out how to write the code
       to make the animation work, this can be both difficult and time
  – Flash is a program where you define actions through a
    variety of techniques including clicking and dragging
    objects around
     • you can also specify code if desired
• But at the same time, Flash is more limited in what
  you can accomplish
  – for instance, you may not be able to define a game as
    easily in Flash as you can in Java, particularly a game that
    includes computer strategy like Chess
• We have already seen a lot of JavaScript
  – JavaScript is a small language, unlike Java
  – Unlike other scripting languages like PHP and Perl, we
    use JavaScript to write code that runs on the client’s side
    of the web, not the server
• Aside from the things we have already done in
  JavaScript, you can also write your own animation
  much like in Java or ActiveScript
  – We saw a little of the object-oriented nature of JavaScript
    by passing messages to document and window, but we can
    also pass messages to images, the browser itself, sections
    of the screen, links, and more
  – This would allow us to change these different objects,
    move them, delete them, change their colors, etc creating
    animation and interaction with the user
• This is actually a group of technologies that work
  together to change a web page once it has been
   – DHTML lets the web page respond to user actions
   – The technologies include
      • Document Object Model – DOM
          – This defines every object and element of a given web page through a
            hierarchical structure starting with the window and have children of
            document, history, location, navigator where document comprises
            anchor, form, image, and link (see figure 11.17 on page 452 which
            shows a partial hierarchy)
      • Cascading Style Sheets
      • Client-side scripting (e.g., JavaScript)
   – We use DHTML to do such tasks as
      • Hiding text and navigation (recall the pull down menus)
      • Image effects
• Ajax stands for Asynchronous JavaScript and XML
   – Like DHTML, this is a group of technologies used to create
     more of an interactive website
   – The technologies include JavaScript, XML but also DOM,
     CSS, and asynchronous data retrieval
• Ajax is part of the Web 2.0 movement
   – The traditional interaction between browser and server is that
     the browser (client) requests a page, the server looks it up,
     possibly enacting server side script code, and returns the page
     and the client then enacts any client side script code
   – With Ajax, the intention is to have more client side code but in
     this case, code that can manipulate the content of the page
     based on previous and current interactions
   – Ajax is also intended to be used to request only partial
     upgrades of the given page (refresh only content area A for
• Examples of Ajax in use include photo sharing on Flicker,
  Google email, and Amazon’s search engine
• To create Flash animation, you need some flash animation
  creation software (which costs $$), you can find already
  created and free resources at,,
• Some Java applets are available at, and
• JavaScript code can be found at
• DHTML examples are available at, and
• Ajax resources can be found at,, and

To top