1 / 26

Multimedia in a Web site

Multimedia in a Web site. Lesson plan. Movie/Audio Slide show Map. Getting Multimedia files. Multimedia files: Audio: Video: Plug in Enable a browser to show multimedia files on a web page. Getting multimedia files. Create sound by microphone, digitizing software

ceri
Download Presentation

Multimedia in a Web site

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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: <A HREF=“applead.mov”> Click here for the movie </A> Pros: Save time to download Cons: a new window is opened, users can’t see the movie directly without clicking to the link

  7. Result

  8. Embed a movie <object classid ="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="240" height="196"> <param name="src" value="applead.mov"> <param name="autoplay" value ="false"> <param name="controller" value="true"> <embed src="applead.mov" width="240" heigth="196" autoplay="false" controller="true" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object>

  9. Results

  10. Embeding Windows Media Player Files <object id="MediaPlayer1" classid ="CLSID:22D6F3312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715" width="240" height="252" type="application/x-oleobject"> <param name="autostart" value="false"> <param name="filename" value="mymovie.wmv"> <param name="showcontrols" value="true"> <param name="ShowStatusBar" value="true"> <embed 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></object>

  11. Example of embeded a Windows Media Movie • Example

  12. Practice 1. Open TextPad, cut and paste (or type) the following code<html> <head> <title> Movie page /title> </head> <body> <!– Please insert your HTML code here --> </body> </html> And save it as movie.html

  13. 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/movies/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.

  14. Slide shows • Example:

  15. Slideshow (page1.html) <head> <meta http-equiv="refresh" content=“10; url=page2.html"/> <style>p {width:200px} </style> <title> Slide Show </title> </head> <body> <p> <img src="castle.jpg" alt="Castle" width="500" height="400" /> </p> <p> Edinburgh Castle in Scotland. Edinburgh Castle dominates the city of …..</p>

  16. Slideshow (page2.html) <head><meta http-equiv="refresh" content=“10; url=page1.html"/> <style>p {width:200px} </style> <title> Slide Show </title> </head> <body> <p> <img src="castle1.jpg" alt="Castle" width="500" height="400" /> </p> <p> Borthwick Castle built…... </P>

  17. Slide 1

  18. Slide 2

  19. Practice 1. Open TextPad, cut and paste (or type) the following code<html> <head> <title> Slide show /title> </head> <body> <!– Please insert your HTML code here --> </body> </html> 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

  20. 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.

  21. 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

  22. Example • Step 1: Type: US Map in Google Choose one US Map:

  23. 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)

  24. Example Step 3: Creating internal map file: <center> <h1> Distribution of Top 25 Division 1 Basketball </h1> <map name="usamap" id="usmap"> <area at="Wisconsin" shape="Polygon" coords="258,54,273,57,290,68,293,98, 268,98,255,79" href="http://www.uwbadgers.com/sport_news/wbb/headlines/index.aspx" /> <area at="Connecticut" shape="Polygon" coords="296,95,406,101,395,126,399,108" href="http://www.uconnhuskies.com" /> </map> <img src="us-map.gif" alt="US Basketball Map" usemap="#usmap" width="480" heigth="329" /> </center>

  25. Result

More Related