Multimedia in a Web site

1
Multimedia in a Web site
2
Lesson plan

• Movie/Audio
• Slide show
• Map

3
Getting Multimedia files

• Multimedia files
• Audio
• Video
• Plug in
• Enable a browser to show multimedia files on a
  web page

4
Getting multimedia files

• Create sound by microphone, digitizing software
• Create movie from digital camcorder, Windows
  Movie Maker
• Search for free sound and movies on the web
• (Google at http//video.google.com/)

5
Main movie formats

• Quicktime (Apple)
• Windows Media Player File (Microsoft)

6
Linking to a Quick Time movie

• Linking to a movie
• Example
• Click here for the movie
  
• Pros Save time to download
• Cons a new window is opened, users cant see the
  movie directly without clicking to the link

7
Result
8
Embed a movie

• 488abddc6b" codebase"http//www.apple.com/qtactiv
  ex/qtplugin.cab" width"240" height"196"
• autoplay"false" controller"true"
  pluginspage"http//www.apple.com/quicktime/downlo
  ad/"

9
Results
10
Embeding Windows Media Player Files
"CLSID22D6F3312-B0F6-11D0-94AB-0080C74C7E95" cod
ebase"http//activex.microsoft.com/activex/contro
ls/mplayer/en/nsmp2inf.cabVersion6,4,5,715" widt
h"240" height"252" type"application/x-oleobject
" name"filename" value"mymovie.wmv" name"showcontrols" value"true" name"ShowStatusBar" value"true" type"application/x-mplayer2" pluginspage"http//
www.microsoft.com/Windows/MediaPlayer/"
src"mymovie.wmv" width"240" height"252"
autostart"1" showcontrols"1" showstatusbar"1"/embed
11
(No Transcript)
12
Example of embeded a Windows Media Movie

• Example

13
Practice

• 1. Open TextPad, cut and paste (or type) the
  following code
• Movie page /title
• And save it as movie.html

14

• 2. Be sure to install Quick Time movie or Windows
  Media Plugins.
• 3. Use any search engine that supports video
  searching to search for your favorite video or
  find a web site where you can download a movie
  trailer or a video free (e.g http//emol.org/movie
  s/freemovies.html
• 4. Modify the video.html file by adding html code
  to display that video directly on the web site.
  Then change the code to give a link to that video
  file.

15
Slide shows

• Example

16
Slideshow (page1.html)

• urlpage2.html"/
• p width200px
• Slide Show
• width"500" height"400" /
• Edinburgh Castle in Scotland. Edinburgh
  Castle dominates the city of ..

17
Slideshow (page2.html)

• urlpage1.html"/
• p width200px
• Slide Show
• width"500" height"400" /
• Borthwick Castle built...

18
Slide 1
19
Slide 2
20
Practice

• 1. Open TextPad, cut and paste (or type) the
  following code
• Slide show /title
• And save it as slideshow.html
• 2. Using google search engine to find 3 pictures
  and save it to your student storage
• 3. Modify your code to embed a slideshow with the
  3 above pictures in your web site

21
Client-side Image map

• Client-side image maps run more quickly because
  they are run by browsers at client side
• What it does
• As your pointer lay across the image, along the
  bottom of your browser, you should be seeing
  different URL fly by.

22
How do I?

• Step 1 Find a map
• Using Google or any image search engine to find a
  map
• Step 2 Define Your Pixel Locations
• RECTANGLE (RECT) Requires the upper left and
  lower right of the defined box.
• CIRCLE (CIRCLE) Requires the center point and
  radius (in pixels).
• POLYGON (POLYGON) Requires the coordinate of
  EACH vertex (point) of the area you want to
  define.
• Step 3 Create an Internal Map File

23
Example

• Step 1 Type US Map in Google
• Choose one US Map

24
Example

• Step 2 Open the image map from Paint, move the
  cursor and note down the coordinate
• E.g
• Wisconsin (258,54),(273,57),(290,68),(293,98),
  (268,98), (255,79)
• Connecticut
• (296,95), (406,101),(395,126), (399,108)

25
Example

• Step 3 Creating internal map file
• Distribution of Top 25 Division 1 Basketball
  
• coords"258,54,273,57,290,68,293,98,
  268,98,255,79"
• href"http//www.uwbadgers.com/sport_news/wbb/head
  lines/index.aspx" /
• coords"296,95,406,101,395,126,399,108"
• href"http//www.uconnhuskies.com" /
• usemap"usmap" width"480" heigth"329" /

26
Result