• View
• Edit
• History
• Print

Web Multimedia

A Web Design Lecture by Steven Choy

Overview: Sound formats - Video formats - Browser supports for multimedia - Object Elements - Use Flash object to embed MP3 - Use JavaScript to embed multimedia

Introduction

• Multimedia is pictures, sound, music, animations, and videos.
• Modern web browsers have support for many multimedia formats.
• Multimedia Formats

• Browser Support

Sound Formats

• The MIDI Format - .mid or .midi

• The RealAudio Format - .rm or .ram

• The AU Format - .au

• The WAVE Format - .wav

• THe MP3 Format - .mp3 or .mpga

Video on the Web

• The file format that holds the video
• The video encoding format
• The player that plays the video on the web page

Video File Formats

• This is often called a container format.
• Examples: .mp4, .flv, .avi, f4v, .ogv.
• .mp4 is a file format, which can hold either MPEG-4 or H.264 video,

Video Encoding Formats

• This is often called a codec
• Examples: H.264, VP6, MPEG-4, VP8, Theora

Video players for the Web

• Differents video players support different file formats and ecnoding formats.
• 3 different tyeps:
  • Use Helper applications: the browser launches a plugin-in to play the video
  • Use Flash player: the browser runs a Flash object that can get and play the video
  • Native support by the browser

How to get the video played onto your website?

• HTML5 <video> tag (It only works in new browsers)

      <video src="mymovie.mp4" width="320" height="240" controls="">
      </video>

      (file format = video stream + audio stream)
      .mp4 = H.264 + AAC
      .ogg/.ogv = Theora + Vorbis
      .webm = VP8 + Vorbis

• HTML <object> tag

    <object attr1="xxx" attr2="yyy" attr3="zzz">
      <param name="name1" value="value1" >
      <param name="name2" value="value2" >
      <param name="name3" value="value3" >
    </object>

• HTML <embed> tag

      <embed attr1="xxx" attr2="yyy" attr3="zzz">
      </embed>

Object Elements

• The object element supports pictures, sounds, videos and other objects.
• Image as object

        <object height="100%" width="100%"
          type="image/jpeg" data="audi.jpeg">
        </object>

• Web page as object

        <object type="text/html" height="100%" width="100%"
        data="http://www.stepwise.hk/">
        </object>

• Display a sound/video to be played

        <object
        classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
        <param name="FileName" value="liar.wav" />
        </object>

• Display a flash

      <object width="400" height="40"
        classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
        codebase="http://fpdownload.macromedia.com/
          pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
      <param name="SRC" value="bookmark.swf">
      <embed src="bookmark.swf" width="400" height="40"></embed>
      </object>

• Display QuickTime Movies

      <object width="160" height="144"
      classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
      codebase="http://www.apple.com/qtactivex/qtplugin.cab">
      <param name="src" value="sample.mov">
      <param name="autoplay" value="true">
      <param name="controller" value="false">
      <embed src="sample.mov" width="160" height="144"
      autoplay="true" controller="false"
      pluginspage="http://www.apple.com/quicktime/download/">
      </embed>
      </object>

• Display Real Video Movies

      <object width="320" height="240"
      classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">
      <param name="controls" value="ImageWindow" />
      <param name="autostart" value="true" />
      <param name="src" value="male.ram" />
      </object>

• The classid attribute uniquely identifies the player software to use.
• The codebase attribute specifies the base path used to resolve relative URIs specified by the classid, data, and archive attributes. When absent, its default value is the base URI of the current document.
• The embed element is supported by old browsers.

Example web pages

Use Flash object to embed MP3

• Google Reader MP3 Player

    <embed 
      type="application/x-shockwave-flash"
      flashvars="audioUrl=MP3_FILE_URL"
      src="http://www.google.com/reader/ui/3523697345-audio-player.swf"
      width="400" height="27"
      quality="best">
    </embed>

• Class discussion: what's the advantages of using Flash object to play audio?

Use JavaScript to embed multimedia

• Yahoo! Media Player (http://developer.yahoo.com/mediaplayer/)

      <a href="example1.mp3">My first song</a>
      <a href="example2.mp3">My second song</a>
      <script type=”text/javascript” src=”http://mediaplayer.yahoo.com/js”></script>

• jQuery lightbox for images and videos

• How to view the embedded source? (for class demonstration)
• How to use JavaScript to embed multimedia (for class demonstration)

Showcase: Creative use of video in Web design

• UNIQLOCK: It is an advertising campaign for Uniqlo, one of Japan’s largest casual wear retailers.
• I Surf Because: It is part of Billabong’s digital marketing campaign.

References and Resources

• Web Multimedia Tutorial -w3schools.com
• WWW FAQs: How do I embed sound and music in a web page?
• Scripts: Adding sound or background music .wav .mid .mp3
• How to Embed MP3 Audio Files In Web Pages With Google or Yahoo! Flash Player
• jQuery lightbox for images, videos, YouTube, iframes
• OBJECT - Embedded Object
• OBJECT in W3C HTML 4.01 Specification

Thanks for Reading

If you would rather like to have this lecture note in printed format, please click the print action link in the top right corner.

If you find any problem in this lecture note, please feel free to tell Steven via steven [at] findaway.hk.