Web Design Wikiclass | Tutorial / Web Multimedia

Introduction: In this tutorial, you will do some exercises about putting multimedia on the web pages.

Activity One: Object Elements and Embed tags

The object element supports pictures, web pages, sounds, videos.
Make a HTML file to demonstrate the uses of the object tag to embed an image, a web page, an audio file, and a video file.
Use an audio file in WMA format. Use Windows Media Player as the audio player.
Use a video file in WMV format. Use Windows Media Player as the video player.
Do you need the <embed> tag to make the audio and video played in your web page?
You can use the following HTML template to insert your code

    <!DOCTYPE html 
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Web Multimedai test</title>
    </head>
    <body>
    <h1>Activity One: Object Elements</h1>
    <h2>Web Page AS Object</h2>
    <h2>Image AS Object</h2>
    <h2>Audio AS Object</h2>
    <p>Use an audio file in WMA format. Use Windows Media Player as the audio player.</p>
    <h2>Video AS Object</h2>
    <p>Use a video file in WMV format. Use Windows Media Player as the video player.</p>
    </body>
    </html>

Activity Two: Flash As Object

Go to flashgame.com.hk. Make your own web page that can display a flash game from your web page.
You can use the following HTML template to insert your code

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Embed Flash object in a web page</title>
    <style type="text/css" media="screen">
    body {text-align:center;}
    h1 {margin:25px 0 25px 0;font-size:40px;}
    </style>
    </head>
    <body>
    <h1>Embed Flash object in a web page</h1>
    <p>Insert your Flash object below. Make it be 570x430.</p>
    </body>
    </html>

Activity Three: Use Flash object to embed MP3

Make a HTML file to use Flash Object to play MP3 file.
MP3 file for your testing: http://plbpc013.ouhk.edu.hk/multimedia-test/unofficial-yahoo-song.mp3
You can use Google Reader MP3 Player. The following code is

      <embed 
        type="application/x-shockwave-flash"
        flashvars="audioUrl=http://plbpc013.ouhk.edu.hk/multimedia-test/unofficial-yahoo-song.mp3"
        src="http://www.google.com/reader/ui/3523697345-audio-player.swf"
        width="400" height="27"
        quality="best">
      </embed>

Activity Four: Use JavaScript to embed multimedia files.

Make a HTML file that use Yahoo! WebPlayer to enable users to play a list of multimedia files.
Reference: Yahoo! WebPlayer

Step 1: Link to Yahoo! Web Player JS code.

      <script type="text/javascript" src="http://webplayer.yahooapis.com/player-beta.js"></script>

Step 2: Add audio/video links to your page.

      <a href="http://mediaplayer.yahoo.com/example3.mp3">Yodel (mp3 link)</a>
      <a href="http://movies.yahoo.com/movie/1810096458/info">Tron (Yahoo! Movie link)</a>
      <a href="http://www.youtube.com/watch?v=i56XeM0-b8Y">Zoetrope (YouTube link)</a>

Step 3: Launch the web page to see if the auido/video files can be played.

Activity Five: Use Flash video player to play video on the web

Go to http://flowplayer.org/index.html
Study how to use the Flash video player to play flv video on your website.
Make a simple webpage to demonstrate this feature.
challenge: Get a small video in any format and convert it into flv format. Use the Flash video player to play it on a web page.
FLV file for your testing: http://plbpc013.ouhk.edu.hk/multimedia-test/sample.flv