Figure 1–1.doc

Multimedia on the Web

© Netskills, University of Newcastle 1

Edition February 2006 (Revised 15/02/06)

File document.doc

Print Record This document was printed on 25 February 2004.

Aims & Objectives

The aim of this document is to give an overview of the use of multimedia content in web pages including the use of plug-ins, the

inclusion of audio and video material and the use of streaming technology.

When you have completed these exercises you should be able to:

Use plug-in software to view multimedia web pages

Evaluate the use of real-time streaming technologies

Incorporate multimedia elements in your web pages

Create three-dimensional objects using the Virtual Reality Modelling Language

Pre-requisites

This document assumes that you are familiar with the use of a computer keyboard and mouse, and Microsoft Windows based products. It also assumes that you have written basic web pages using HTML.

Document Information

Format ConventionsThe following format conventions are used in this document.

Computer input that you type is shown in a bold Courier New font

http://www.netskills.ac.uk/

Hypertext links to be followed are shown in underlined Courier New font

From the Netskills home page, select the link to University of Newcastle

Computer output, menu names and options, buttons, URLs are shown in a Courier New font

Save, Go to, Refresh

Text that you must replace is shown in Courier New italics

Enter your username

Computer keys that you must press are in a Courier New font and enclosed in angle brackets

<Enter>, <n>, <N>, </>

Successive menu selections are illustrated in Courier New font using arrows to indicate a sub-menu. In the example this would mean: select the File menu, then select Picture, then select From File.

Insert > Picture > From File

Copyright© Netskills, University of Newcastle

Copyright in the whole and every part of this Courseware whether in the form of a written manual, document, software program, service or otherwise belongs to the University of Newcastle upon Tyne ("the Owner") and may not be used, sold, licensed, transferred, copied or reproduced in whole or in part in any manner or form or in or on any media to any person other than in accordance with the terms of the Owner's Licence Agreement or otherwise without the prior written consent of the Owner.

All use of this material is governed by the Owner's Standard Licence Agreement together with the appropriate Schedule. The following are available:

A Standard Licence Schedule to cover all use including all for-profit use by any type of organisation and all use by non-educational establishments

An Educational Licence Schedule for not-for-profit internal use only by a recognised educational establishment

The Netskills logo and this copyright notice must be included in any copy or adaptation.

Netskills is a trademark of Netskills, University of Newcastle

Contact Information

Netskills, University Computing Service, University of Newcastle NE1 7RU

Email: [email protected]

Phone: UK 0191 222 5000


Contents

Task 1. Plug-ins and Multimedia........................................................................................4

Task 2. Real-Time Multimedia.........................................................................................5

Task 3. Creating Multimedia Pages.................................................................................. 6

Task 4. Changing the Object (and Embed) Tag Attributes............................................8

Task 5. Virtual Reality Examples...................................................................................10

Task 6. Creating Virtual Reality Pages..........................................................................11

Task 7. Further Multimedia Examples..........................................................................12


Task 1. Plug-ins and MultimediaObjectives To explore the use of plug-ins in web pages and examples of multimedia.

Method You will investigate which plug-ins your browser supports and explore a range of applications for which multimedia can be used in web pages.

Comments Plug-ins display specific media types such as video, three-dimensional objects and animations. Many plug-ins can handle a range of media formats. For example, Windows Media Player can handle several audio and video formats.

Task 1.1 In your web browser open the address:

http://www.apple.com/quicktime/gallery/cubicvr/

These images are linked to 3D objects that can be viewed using the Quicktime VR plug-in. Click on one of the images to explore use of this plug-in.

Figure 1–1 QuickTime VR Gallery

Return to the Cubic VR gallery shown in Figure 1–1. Scroll to the bottom of the page and select the link Panoscan to explore further examples of the use of this technology.

Note Creating this type of media generally requires a commercial authoring tool. However, embedding existing media files in web pages requires only HTML and is covered in later tasks.

Task 1.2 In your web browser open the address:

http://www.nlm.nih.gov/research/visible/visible_human.html

This site uses video clips that are based on 3-D medical reconstruction. From under the section General Information select the link images and animations.

Now select the link animated trip through the Visible Human male cryosections. These video clips allow you to explore cross-sections of a human body. You will need a movie-player such as Windows Media Player to view these files.

Note Due to their large file size these videos may take a while to download. If you intend to use video clips in your web pages, your users may have be very patient!

Task 1.3 Netscape only: If you are using a Netscape browser, from the Help menu select About Plug-ins to generate a list of installed plug-ins.

Each installed plug-in allows you to view a specific file format or set of formats. Scroll down the list to see which plug-ins you recognise.

Return to the top of the page and select the link For more information on Netscape plug-ins, click here. This provides descriptions of further plug-ins that are available to download.

Notes Netscape requires JavaScript to be enabled for the About Plug-ins page.

Internet Explorer does not allow the user to view the installed plug-ins in this way.


Task 2. Real-Time MultimediaObjectives To investigate real-time multimedia.

Method You will visit web sites that stream audio and video.

Comments The examples in this exercise use streaming technology to deliver media files. As such files can begin playing whilst still downloading, this reduces the delay associated with waiting for the entire file to download.

Task 2.1 In your web browser go to the following web address:

http://www.bbc.co.uk/radio/

Figure 2–2 BBC Radio Home Page

Select one of the radio stations and click the appropriate Listen to Radio link. Depending on which station you select, you may be prompted to choose the streaming quality. If so, experiment with the various options to investigate the difference.

Note To listen to BBC Radio, you will need the RealPlayer plug-in. If this plug-in is not installed, move on to the next task. RealPlayer is freely available from:

http://uk.real.com/

Task 2.2 Examples of streaming video may be found at the University of Newcastle’s website at the following address:

http://www.ncl.ac.uk/press.office/media_clips/

Explore some of the links to the streamed video clips.

Note SMIL (Synchronized Multimedia Integration Language) has been developed as an HTML-like language for writing multimedia pages with streaming audio and video. See the W3 site for tutorials on SMIL and more information:

http://www.w3.org/AudioVideo/

The SMIL format is supported by the RealPlayer and QuickTime plug-ins.

Notes PresenterOne Basic is free software for the creation of streaming slide presentations accompanied by narration and music. It can be downloaded from:

http://www.realnetworks.com/products/media_creation.html


Task 3. Creating Multimedia Pages Objectives To edit a web page to include multimedia elements.

Method You will use a text editor such as Notepad to incorporate a range of media formats in a web page using the <object> (and <embed>) HTML tags.


http://materials.netskills.ac.uk/resources/36multimedia/template.html

Figure 3–3 The Examples File

From the File menu select Save As and save the page to your working directory as examples.html


http://materials.netskills.ac.uk/resources/36multimedia/audio_and_video/

You will now download a selection of media files to embed into a web page. You may want to try a range of file types (see note on formats below).

Formats Audio: .au, .aif, .wav, .rm Video: .avi, .mov

To download a file right click on the filename and from the menu select Save Target As (or Save Link As in Netscape). Save downloaded files to your working directory where you saved examples.html.

Task 3.3 Open a text editor such as Notepad (usually by selecting Start > Programs > Accessories > Notepad).

In your text editor open the file examples.html and add the lines shown below in bold, replacing backup.avi with the filename of one of the files you have just downloaded:

Examples of different audio file formats (.aiff, .wav, etc.), an MPEG video clip.<object height="100" width="100" classid="clsid: 02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"><param name="src" value="backup.avi" /><embed src="backup.avi" height="100" width="100" pluginspage="http://www.apple.com/quicktime/download/"></embed></object>

Save the file examples.html.


<object> and

<embed>

The <embed> and <object> tags add media files to a web page by specifying the path to the file. This is similar to the way in which the <IMG> tag is used to inset an image.

The W3C (http://www.w3.org/) recommendation is to use the <object> tag. Internet Explorer 5.5 and 6 use the <object> tag. However, as Netscape 4 uses the <embed> tag, authors often use both tags for backwards compatibility. Remember that browsers will use one or the other and any attributes will have to be specified for both tags.

The classid attribute identifies the Active X controller and must be spelt exactly as shown above. If your browser doesn’t have the correct plug-in installed then The codebase or pluginspage will redirect the user to the appropriate page for downloading the plug-in.

For more information see:

http://www.apple.com/quicktime/tutorials/embed.html

Task 3.4 Open your browser and from the File menu select Open (Open Page in Netscape). Click the Browse button (Choose File in Netscape) and from your working directory highlight the file examples.html. Click the Open button.

<embed> By default, the <embed> tag may not display the full plug-in control panel. With some plug-ins you can use the right mouse button to reveal controls (such as play, rewind, etc.). Alternatively, you may need to adjust the height and width attributes specified within the tag (see Task 4).

Task 3.5 Experiment with adding other types of media by embedding some of the other files you downloaded in Task 3.2 into your examples.html file.

Note When using media files on your site, it is not advisable to embed such files directly in the page as the entire movie will download automatically. Instead, use a smaller file, such as an image from the movie to provide a link to the video. This gives the user control over whether to download the media.


Task 4. Changing the Object (and Embed) Tag Attributes

Objectives To explore the use of the <object> (and <embed>) tag attributes with a QuickTime movie file.

Method You will use a text editor to add a QuickTime movie to a web page using the <embed> tag. You will then use attributes of the <embed> tag to manipulate the behaviour and appearance of the movie file. Note that this will only change the behaviour of the multimedia in Netscape. For standards compliant browsers, change the attributes of the <object> tag.

Task 4.1 In your browser open the following web address:

http://materials.netskills.ac.uk/resources/36multimedia/audio_and_video/

Download the file qt-example.mov and save it to your working directory where you saved examples.html.

Important Note

Some web browsers may change the extension of .mov files to .qt. Ensure that the saved file has the extension .mov. If you are not sure how to do this ask your trainer.

Task 4.2 In your text editor open the file examples.html and insert the following code shown in bold:

</object><object height="200" width="200" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"><param name="src" value="qt-example.mov" /><embed src="qt-example.mov" height="200" width="200" pluginspage="http://www.apple.com/quicktime/download/"></embed></object>

This code embeds the qt-example.mov in your page and specifies default height and width attributes.

Save the file examples.html and then open it in your web browser. If the movie doesn't play automatically, you may need to click (or double-click) on the movie.

Task 4.3 Return to your text editor and increase the values of the both the height and width attributes to at least 200. Save your file and reload it in your web browser.

By increasing the display size for the movie, you should be able to view the full set of QuickTime controls.

Remember for browser compatibility you will need to alter the attributes for both the <object> and <embed> tags.

Note height is one of a number of standard tag attributes that can be used with any embedded object. In addition, different types of embedded objects will also support a range of specific attributes.


Task 4.4 You will now add a QuickTime specific attribute. Add the text in bold below in order to make the movie always play as soon as the page is loaded.

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

Save the file and open it in your browser. Change true to false for the opposite behaviour.

Note Different browsers may have different default behaviours for playback of movie files. Designers can use the autoplay attribute to force a desired behaviour in all browsers.

Task 4.5 Now try adding the LOOP attribute by adding the text in bold below:

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

Save your file and view it in your browser. The movie should now play continuously.

If loop="true" is changed to loop="false" the movie will only play once. If loop="true" is changed to loop="palindrome" the movie will play forwards and then backwards in a continuous loop.

Task 4.6 For the full range of attributes supported by QuickTime movies see:

http://www.apple.com/quicktime/tutorials/embed.html

Note Other plug-ins may support a similar range of attributes, but each will have their own syntax for how they are used. Refer to the plug-in provider for further information.


Task 5. Virtual Reality ExamplesObjectives To explore how virtual reality (VR) can be used on the web.

Method You will explore examples of three-dimensional objects created using VRML and other 3D technologies.

Comments VRML and 3D imaging is particularly useful for applications such as architecture, archaeology, molecular modelling and medicine.

Task 5.1 Go to the Science Museum Wellcome Wing 3D tour site at:

http://www.sciencemuseum.org.uk/wellcome-wing/

An animated introduction will play and then you will see options to view the 3D tour.

Select the 3D high end site.

Figure 5–4 Science Museum Wellcome Wing 3D Tour

Use the mouse to navigate the tour – you can also click on exhibits to find out more about them.

Plugins The Science Museum Wellcome Wing web site requires the Flash Player in order to view the content. Also, the high end 3D site automatically installs the Cortona VRML Player – if you find this does not work, select the 3D low end site instead.

References A wide range of VRML resources including tutorials, specifications, software and educational examples of VRML can be found on the following web-sites:

http://www.web3d.org/


Task 6. Creating Virtual Reality PagesObjectives To create three-dimensional virtual reality objects and include them in a web page.

Method You will use a text editor to describe three-dimensional objects using VRML.

Comments VRML (Virtual Reality Modelling Language) is a simple text-based language. You will require a VRML plug-in in order to view files written in VRML.

Task 6.1 Open a text editor such as Notepad and enter the following text exactly as shown:

#VRML V2.0 utf8Shape { geometry Cone { } }

Save this file to your working directory as vrml.wrl

Task 6.2 In your web browser open vrml.wrl. Once the VRML plug-in has loaded use the controls provided to manipulate your view of the object.

Task 6.3 Return to your text editor and edit your code as shown below in bold:

Shape { geometry Box { } }

This will change the shape rendered by the VRML player from a cone to a box. Reload this file in your web browser to see the effects of your changes.

Task 6.4 Return to your text editor and add the following text (use spaces between each word and number):

Shape { geometry Box {size 2, 1, 1}

}

Save your page and reload it in your browser. The dimensions of your object should have changed. Experiment with the values for each of the dimensions to investigate how they affect your object.

Task 6.5 In your text editor add the following code (shown in bold) within the Shape statement:

Shape { appearance Appearance { material Material {diffuseColor 0, 0, 1} } geometry Box {size 2, 1, 1} }

Save your page and reload it in your browser. The appearance of your object should now have changed. Experiment with changing the values for the colour of the object.

Note In order to specify a colour in VRML, we have to also specify an appearance and a material. These characteristics must be specified in the lines preceding the description of the object itself.

Further information about VRML is available from:

http://www.lighthouse3d.com/vrml/tutorial/


Task 7. Further Multimedia ExamplesObjectives To explore further examples of audio and video being used in web pages.

Method You will visit web sites using different media for a range of applications.

Comments These exercises require the Quicktime and RealPlayer plug-ins.

Task 7.1 Examples of video clips and animations can be found at NASA's Space Telescope Science Institute:

http://hubblesource.stsci.edu/sources/video/clips/

Task 7.2 More information about creating Quicktime VR movies is available from:

http://www.apple.com/quicktime/technologies/qtvr/

The latest Quicktime plug-in can play both Quicktime movies and VR. It is available for free from:

http://www.apple.com/

Task 7.3 A real-time news site is the BBC TV news at:

http://news.bbc.co.uk/

Select the link BBC ONE TV NEWS near the top right of the page.

Task 7.4 For samples of commercial animation and movie files, go to the Disney site at the following URL:

http://disneyvideos.disney.go.com/animated.html

Figure 7–5 The Disney Cartoon Movies

Figure 1–1.doc

Documents