Unit-4.pptx

(1)

(2)

Multimedia Projects

Multimedia is the integration of media objects such as text, graphics, video, animation, and sound to represent and convey information. Click on each image below to see examples. Note you must be in “presentation mode.”

Basic Text

QuickTime™ and a decompressor are needed to see this picture.

clipart

original images

sound

(3)

What is Multimedia?

Multimedia comes in many different formats. It can be almost anything you can hear or see like text, pictures, music, sound,

videos, records, films, animations, and more.

On the Internet you can often find multimedia elements embedded in web pages, and modern web browsers have support for a number of multimedia formats.

In this tutorial you will learn about different multimedia formats and how to use them in your web pages.

Multimedia Formats

Multimedia elements (like sounds or videos) are stored in media files. The most common way to discover the media type is to look at the file extension. When a browser sees the file extensions .htm or .html, it will assume that the file is an HTML page. The .xml extension

indicates an XML file, and the .css extension indicates a style sheet. Picture formats are recognized by extensions like .gif and .jpg.

(4)

Multimedia Projects

There are a number of creative ways in which multimedia can be used in the classroom. Examples of multimedia products include:

• _{Creating a Web page or site (covered in week 5)}

(5)

(6)

(7)

Format File Description

AVI .avi The AVI (Audio Video Interleave) format was developed by Microsoft. The AVI format is supported by all computers running Windows, and by all the most popular web browsers. It is a very common format on the Internet, but not always possible to play on non-Windows computers.

WMV .wmv The Windows Media format is developed by Microsoft. Windows Media is a common format on the Internet, but Windows Media movies cannot be played on non-Windows computer without an extra (free) component installed. Some later Windows Media movies cannot play at all on non-Windows computers because no player is available

MPEG .mpg

.mpeg The MPEG (Moving Pictures Expert Group) format is the most popular format on the Internet. It is cross-platform, and supported by all the most popular web browsers.

QuickTime .mov The QuickTime format is developed by Apple. QuickTime is a common format on the Internet, but QuickTime movies cannot be played on a Windows computer without an extra (free) component installed. RealVideo .rm

.ram The RealVideo format was developed for the Internet by Real Media. The format allows streaming of video (on-line video, Internet TV) with low bandwidths. Because of the low bandwidth priority, quality is often reduced. Flash .swf

.flv The Flash (Shockwave) format was developed by Macromedia. The Shockwave format requires an extra component to play. But this

component comes preinstalled with web browsers like Firefox and Internet Explorer.

Mpeg-4 .mp4 Mpeg-4 (with H.264 video compression) is the new format for the internet. In fact, YouTube recommends using MP4. YouTube accepts multiple

(8)

Format File Description

MIDI .mid

.midi The MIDI (Musical Instrument Digital Interface) is a format for electronic music devices like synthesizers and PC sound cards. MIDI files do not contain sound, but digital musical instructions (notes) that can be played by electronics (like your PC's sound card).

Click here to play The Beatles.

Since MIDI format only contains instructions (notes), MIDI files are extremely small. The example above is only 23K in size but it plays for nearly 5 minutes. MIDI is supported by many software systems over a large range of platforms. MIDI is supported by all the most popular Internet browsers.

RealAudio.rm .ram

The RealAudio format was developed for the Internet by Real Media. The format also supports video. The format allows streaming of audio (on-line music, Internet radio) with low bandwidths. Because of the low bandwidth priority, quality is often reduced.

Wave .wav The Wave (waveform) format is developed by IBM and Microsoft. It is supported by all computers running Windows, and by all the most popular web browsers (except Google Chrome).

WMA .wma The WMA format (Windows Media Audio), compares in quality to MP3, and is compatible with most players, except the iPod. WMA files can be delivered as a continuous flow of data, which makes it practical for use in Internet radio or on-line music.

MP3 .mp3

.mpga

(9)

Sample Kid Pix slides from a Comparatives/ Superlatives lesson and a unit on

(10)

Multimedia Projects

Sample slides from

Hyperstudio stacks on

(11)

Child Labor Unit Latino Unsung Champions

Digital Poetry Lesson on the Stock Market

Multimedia Projects

(12)

Some additional elements to consider….

• _{Too often, we see multimedia presentations use the same “canned”}

clip art images or sound clips over and over and over again. Many of these sounds and images have nothing to do with the content of

presentation, and can be distracting and annoying.

• _{Use of Images:}_{Encourage students to use their creativity in}

designing their presentations, using original images such as digital or scanned drawings, images from the Internet, digital photographs, or images from the web. Be creative with the images, such as using them as background on a slide with text floating over the image (see Week 1 presentation for example).

• _{Use of Sound:}_{Did you know that in most presentation software,}

original sound can be recorded, such as a student’s voice, or music or other sound can be used? Consider how these kinds of sounds may enhance a presentation rather than using the same typical sound files that come with the program such as a “chime” or “clapping” or “clicking” noise.

(13)

Multimedia Projects

Some additional elements to consider….

Linearity v. Non Linearity

A linear presentation is one in which the user goes from slide to slide in a non linear way, much like the way in which most of the slides in this course have been used (with some exceptions). But designing a presentation in a non-linear way can have tremendous advantages:

Non-lineaer presentations:

• _{Allow the user or presenter to “customize” the way in which the}

presentation will be viewed (through internal links).

• _{Allow links to other presentations or applications (such as Word, Excel, the}

web) to illustrate additional concepts or highlight related ideas. (external links). These links are just like hyperlinks on the web, and can be in the form of buttons, text or graphics.

Designing a non-linear presentation can be much more complex than simply creating a linear presentation. Much like designing a web page, it is

(14)

Multimedia Projects: Storyboarding

First slide

Slide #2

Slide #3

Slide #4

Slide #5 Slide #6 Slide #7

Slide #8

World Wide Web

Microsoft Word Research

Paper

Microsoft Excel Spreadshee

(15)

Multimedia Projects

Some final considerations:

• _{Some teachers ask “what’s the point” of nonlinear presentations? One}

significant benefit is for those students who do not have access to the web. They can create projects that mimic a web site, such as a digital portfolio. The other obvious benefit is the control the author has in

presenting the information during an oral presentation, or the control of the user when viewing the presentation. If a presentation is set up with a main page or table of contents (much like a home page on the web), the author can customize the presentation based on what the audience wants to learn about or explore, making the presentation much more dynamic and engaging.

• _{We could spend an entire course discussing how to create effective}

multimedia presentations in the classroom. Highlighted here were just some key concepts to keep in mind. If you are interested in learning more about how to create multimedia projects, conduct your own research and explore some of the resources provided in the

(16)

What qualifies as Multimedia on

Web?

16 

Graphics

 _Backgrounds  _Pictures

 _{3-D graphics}  _Charts

 _{Computer-generated} graphics, drawings, etc.

 _{Clip art}  _Buttons  Text  Video  Animation  Morphing  Sound

 _{Narration, voice}

 _{Recorded music or}

special sounds

 _{Computer-generated}

(17)

Multimedia for the Web Differs

17



Size constraints for client download



Viewers’ workstations differ

–

Size of screen

–

Modem speed

–

Number of colors

–

Video cards

–

Browsers, plugins

(18)

Product Performance

18



The customers’ screens have to reproduce

everything you produce in your program



No matter what computer, monitor,

connection they are using.



The law of digital media: Pick any two:



High quality images and sound



Ability to run on most computers

(19)

Multimedia issues

19



Functionality Issues



Presentation Design



Multimedia content issues

–

Images

–

Colors & Color Palettes

–

Video, Flash, Animation

–

Text, titles, fonts

(20)

Animated GIF

 _{An animated GIF is a graphic file type that is composed}

of many different images on top of each other. Together these images are compressed and work together,

creating movement, and give the appearance of a mini movie. GIF stands for Graphics Interchange Format.

 _{The Graphics Interchange Format (GIF) is a bitmap}

image format that was introduced by CompuServe in

1987 and has since come into widespread usage on the World Wide Web due to its wide support and portability.

 _{A GIF is a bitmap file format often used on the World}

Wide Web. An animated GIF is a series of individual GIF frames joined together to create an animation. It is

(21)

Animated GIF

 _{A GIF graphic file, which consists of two or more}

images shown in a timed sequence to give the effect of motion.

 _{A type of GIF image that can be animated by putting}

several images together in a single file. When the

images are viewed, they cycle through the combined images. This gives the illusion of motion, or

animation. Animated GIF format is by most Web browsers.

 _{Set of pictures saved in one GIF-compressed}

document. When the document is opened, the

(22)

Animated GIF

 _{A type of GIF image that can be animated by}

combining several images into a single GIF file. Applications that support the animated GIF

standard, GIF89A,cycle through each image. GIF animation doesn't give the same level of control and flexibility as other animation formats but it has

become extremely popular because it is supported by nearly all Web browsers. In addition, animated GIF files tend to be quite a bit smaller that other animation files, such as Java applets.

(23)

You can add music or video into your web page. The easiest way to add video or sound to your web site is to include the special HTML tag called <embed>.

This tag causes the browser itself to include controls for the

multimedia automatically. You do not need to have any ActiveX, Java VM, VBscript or JavaScript to support this <embed> tag. it's also a good idea to include the <noembed> tag to support browsers which don't recognize the <embed> tag. You could, for example, use

Here is a simple example to play embed a midi file:

(24)

 _Attributes:

 _{Following is the list of important attributes for <embed> element.}

 _align_{- Determines how to align the object. It takes either}_{center, left or}

right.

 _autostart_{- Indicates if the media should start automatically. Netscape} default is true, Internet Explorer is false.

 _loop_{- Specifies if the sound should be played continuously (set loop to} true), a certain number of times (a positive value) or not at all (false). This is supported by Netscape only.

 _playcount_{- Specifies the number of times to play the sound. This is} alternat option forloop if you are usiong IE.

 _hidden_{- Defines if the object shows on the page. A false value means no} and true means yes.

 _height_{- Height of the object in pixels or en.}  _width_{- Width of the object in pixels or en.}

 _pluginspage_{- Specifies the URL to get the plugin software.}  _name_{- A name used to reference the object.}

(25)

 _volume_{- Controls volume of the sound. Can be from 0}

(off) to 100 (full volume). This attribute is supported by Netscape only.

 _{HTML - Video Media Types}

 _{Flash movies (.swf), AVI's (.avi), and MOV's (.mov) file}

types are supported by the embed tag.

 _{.swf files - are the file types created by Macromedia's}

Flash program.

 _{.wmv files - are Microsoft's Window's Media Video file}

types.

 _{.mov files - are Apple's Quick Time Movie format.}  _{.mpeg files - are movie files created by the Moving}

Pictures Expert Group.

 _{Here is a simple example to play a flash file.}  _{<embed src="/html/yourfile.swf" width="100%"}

(26)

 _{Background Audio}_{– The <bgsound> Element:}

 _{You can use the <bgsound> tag to play a soundtrack in}

the background. This tag is for Internet Explorer documents only. Other browsers ignore the tag.

 _{It downloads and plays an audio file when the host}

document is first downloaded by the user and

displayed. The background sound file also will replay whenever the user refreshes the browser display.

 _{This tag is having only two attributes}_loop_and_src_{. Both}

these attributes have same meaning as explained above.

 _{Here is a simple example to play a small midi file:}

 _{<bgsound src="/html/yourfile.mid" > <noembed><img}

src="yourimage.gif" alt="yourimage.gif" /></noembed> </bgsound> This will produce blank screen.

 _{This tag does not display any component and remains}

(27)

 _{HTML Object tag}_:

 _{HTML 4 introduces the}_{<object> element, which offers}

an all-purpose solution to generic object inclusion. The

everything required by an object for its presentation by a user agent

 You can embed a HTML document in an HTML

document itself as follows:

 _{<object data="data/test.htm" type="text/html"}

width="300" height="200"> alt : <a

href="data/test.htm">test.htm</a> </object>

(28)

 _{You can embed a PDF document in an HTML}

document as follows:

 <object data="data/test.htm" type="application/pdf"

width="300" height="200"> alt : <a

href="data/test.pdf">test.pdf</a> </object>

 _{You can specify some parameters related to the}

document with the param tag. IE sometimes needs a src parameter to understand the location. Here is an exmaple to embed a wav file:

 _{<object type="audio/x-wav" data="data/test.wav"}

width="200" height="20"> <param name="src" value="data/test.wav"> <param name="autoplay"

(29)

 _{Referencing Audio, Video, and Images:}

 _{You can reference any external document,}

regardless of type or format, via a conventional anchor tag:

 _{Here is an example to reference an audio file. Similar}

way you can refer any world document, PDF file, zip file etc.

 _{If you want to listen music then}

 _{<a href="/html/yourfile.mid" target="_blank" > Click}

Here </a> This will produce following result:

(30)

 _{Displaying audio in HTML is not easy!}

 _{You must add a lot of tricks to make sure you audio files will}

play in all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and on all hardware (PC, Mac , iPad,

iPhone).

 _{The Easiest Way to Add Audio to Your Site}

 _{The easiest way to add Audio to your web pages?}

 _{The Yahoo Media Player (described at the bottom of this}

page) is definitely a favorite.

 _{It plays mp3 and a variety of other formats. You can add it to}

your page (or blog) with a single line of code, and easily turn your HTML page into a professional playlist.

 _{<a href="song.mp3">Play Song</a>}

(31)

 _{Using Plugins}

 _{A Plugin is a small computer program that extends the standard}

functionality of a web browser. Plugins can be used for many

purposes. They can be used to display music, display maps, verify your bank id, control your input, and much more.

 _{Plugins can be added to HTML pages using <object> or <embed>} tags.

 _{Playing Audio in HTML}  _Example

 _{<audio controls="controls" height="50px" width="100px">} <source src="song.mp3" type="audio/mpeg" />

 _{Using The <embed> Element}

 _{The purpose of the <embed> tag is to embed multimedia elements}

in HTML pages.

 _Example

(32)

 _{Using The <object> Element}

 _{The purpose of the <object> tag is to embed multimedia elements}

in HTML pages.

 _{The following code fragment displays an MP3 file embedded in a}

web page.

 _Example

 _{<object height="50px" width="100px" data="song.mp3" />}

Try it yourself »

 _Problems:

 _{If your browser does not support the file format, your audio will not}

play.

 _{If you convert your file to another format, it will still not play in all}

browsers.

 _{Using the <audio> Element}

 _{The <audio> element is an HTML 5 element, unknown to HTML 4,}

but it works in new browsers. Example

 _{<audio controls="controls"> <source src="song.mp3" type="audio/}

(33)

The Best HTML Solution of

Audio

 _{<audio controls="controls" height="50px}

width="100px">

 _{You must convert your videos to many different formats.}  _{The <audio> element does not validate in HTML 4 and}

XHTML.

 _{The <embed> element does not validate in HTML 4 and}

(34)

 _{Using the Yahoo Media Player}

 _{Using the Yahoo Media Player is a different}

approach. You simply let Yahoo do the job of playing your songs.

 _Example

 <a href="song.mp3">Play Song</a>

src="http://mediaplayer.yahoo.com/js"></script>

 _{Using Google}  _Example

 _{<a href="song.mp3">Play Song</a>}

(35)

 _{Using A Hyperlink}

 _{If a web page includes a hyperlink to a media file, most}

browsers will use a "helper application" to play the file.

 _{The following code fragment displays a link to an MP3 file. If}

a user clicks on the link, the browser will launch a helper application to play the file:

 _Example

 _{<a href="song.mp3">Play the song</a>}  _{Inline Sound}

 _{When sound is included in a web page, or as part of a web}

page, it is called inline sound.

 _{If you plan to use inline sounds in your web applications, be}

aware that many people find inline sound annoying. Also note that some users might have turned off the inline sound option in their browser.

 _{Our best advice is to include inline sound only in web pages}

(36)

The Best Way to Play Videos in HTML?

 _{For the best general way to include videos in HTML,}

refer to the next chapter.

 Playing Wave Audio Using QuickTime  _Example

 _{<object width="420" height="360"}

classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"

codebase="http://www.apple.com/qtactivex/ qtplugin.cab">

(37)

Videos

 _{Playing MP4 Video Using QuickTime}  _Example

classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">

 _{Playing SWF Videos Using Flash}  _Example

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">

(38)

Playing WMV Movies Using Windows Media Player

 _{The example below shows the suggested code used to display a}

Windows Media file.

 _Example

 _{<object width="100%" height="100%"}

type="video/x-ms-asf" url="3d.wmv" data="3d.wmv"

classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"> <param name="url" value="3d.wmv">

width="100%" height="100%" autostart="true" showcontrols="true" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"> </embed>

(39)

 _{Playing Videos in HTML}  _Example

 _{<video width="320" height="240" controls="controls">}

</video>

 _{Using the <video> Tag}

 _{The <video> element is new in HTML 5.}

 _{The purpose of the <video> tag is to embed video elements in HTML pages.}  _{The following HTML fragment displays a video in ogg, mp4, or webm format}

embedded in a web page:

 _Example

 _{<video width="320" height="240" controls="controls">}

<source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag.

(40)

(41)

OVERVIEW



What is streaming?



How Streaming Works?



Streaming (various approaches)



Different Streaming Methods



Streaming Players & products

(42)

42

MM Networking Applications

Fundamental characteristics:

 Typically delay sensitive

– _{end-to-end delay} – _{delay jitter}

 _But_{loss tolerant}_:

infrequent losses cause minor glitches

 _{Antithesis of data, which}

are loss intolerant but delay tolerant.

Classes of MM applications:

1) Streaming stored audio and video

2) Streaming live audio and video

(43)

What is Streaming?

Streaming Defined



Transmit audio, video and other multimedia

over the Internet or corporate intranets.



Use to deliver almost any type of media – from

(44)

How streaming works?

When audio or video is streamed, a small buffer space is created on the user's computer, and data starts

downloading into it. As soon as the buffer is full (usually just a matter of seconds), the file starts to play. As the file plays, it uses up information in the buffer, but while it is playing, more data is being downloaded. As long as the data can be downloaded as fast as it is used up in

playback, the file will play smoothly.

 _{A computer connected to the internet over a local area network}

(LAN) or a modem.

 _{A web browser with the proper player or plug-in installed.}  _{A plug-ins works in conjunction with the browser to play}

(45)



A web server stores web pages or HTML files.



Streaming media files normally reside on a

separate dedicated streaming server.



A media link is clicked on a web page the

browser reads the HTML code, and the player/

plug-in take over.



The player negotiates with the streaming

server and gets the target media file using a

path statement.

(46)



A few seconds of buffering the media file

(47)

How Streaming Media Works

Internet, Intranet, WAN Live Content Windows Media Encoder Windows Media Server

Windows NT or UNIX Web Server Windows Media Players Stored Video Files (AVI) Stored .ASF Files

(48)

Streaming (various approaches)



Several different approaches to streaming content on

the web such as: audio, audio with slides, motion

video, animation, live web casts…



Audio

is the simplest media type of stream.



Requires the least amount of time and technical

expertise to produce, and is the most reliable of all

true streaming formats.

(49)



Good for delivering music, recorded interviews and

speeches, language comprehension instruction,

stories, news report or auditory content that does not

require visual representations.



A slight delay of at about 5 seconds or more after a

user clicks an audio link.



Provide good quality sound and images with modem

connections.



Animation

is the movement of text, images and/or

shapes within a screen area.

(50)



Animation files often use a progressive download

method of streaming.



Flash animation can also be converted into true

streaming presentations using Real Media or

QuickTime.



They can also be combined and synchronized with

streaming audio files.



Good web animations often require significant

production time and resources.

(51)



Live web casts

are on-line broadcasts .



Use streaming to deliver the audio, slides or video of

a presenter.



Web casts are most suitable for high demand live

presentations to large geographically dispersed

audiences.



Web cast is a live event and can even be recorded for

later viewing for who missed the original webcast.

(52)

(53)

(54)

54

Streaming Live Multimedia

Examples:

 _{Internet radio talk show}  _{Live sporting event}

Streaming

 _{play can lag tens of seconds}

 still have timing constraint (but shorter delay required)

Interactivity

(55)

(56)

56

Streaming from Web Server (1)

 _{Audio and video files stored in}

Web servers

 _{Browser requests file with}

HTTP request message

 _{Web server sends file in HTTP}

response message

 _{Content-type header line}

indicates an audio/video encoding

 _{Browser launches media}

player, and passes file to media player

 _{Media player renders file}

• _{Major drawback: media player}

(57)

57

Streaming from Web Server (2)

Alternative: set up connection between server and player

 _{Web browser requests and}

receives a meta file

(a file describing the object) instead of receiving the file itself

 _{Content-type header}

indicates specific

audio/video application

 _{Browser launches media}

player and passes it the meta file

 _{Player sets up a TCP}

connection with server and sends HTTP request

Some concerns:

 _{Media player communicates}

over HTTP, which is not designed with pause, ff, rewind commands

(58)

58

RTSP/RTCP/RTP

HTTP GET

media player

Web server

media server Web

browser

client server

presentation desc.

RTSP RTCP

RTP

(59)

59

Start: Using HTTP to get Presentation File

<title>Twister</title>

<track type=audio

e="PCMU/8000/1"

src = "rtsp://audio.example.com/twister/audio.en/lofi"> <track type=audio

e="DVI4/16000/2" pt="90 DVI4/8000/1"

src="rtsp://audio.example.com/twister/audio.en/hifi"> </switch>

<track type="video/jpeg"

src="rtsp://video.example.com/twister/video"> </group>

</session>

(60)

60

Control: RTSP, Out of Band Control

RTSP messages are sent out-of-band:

 _{The RTSP control messages use a different port number (554)}

than the media stream, and are therefore sent out-of-band

 _{RTSP can be sent over UDP or TCP}

 _{Each RTSP message can be sent over a separate TCP}

connection

 _{The media stream, whose packet structure is not defined by}

RTSP, is considered “in-band”

 _{If the RTSP messages were to use the same port number as the}

(61)

61

RTSP: Initialization and Control

HTTP GET

SETUP

PLAY

media stream (RTP)

(62)

Different Streaming Methods

 _{The User Experience}

– _{On-Demand: user can start, stop, pause, FF, RR, etc. (VCR)} – _{Broadcast: user can join and leave (TV / Radio)}

 _{The Delivery Mechanism}

– _{Unicast: user-initiated point-to-point connection to the server} – _{Multicast: point-to-multipoint connection from the server}

 _Myths

– _{Unicast delivery implies on-demand experience} – _{Broadcast experience implies multicast delivery} – _{On-demand experience implies unicast delivery}

 Fact

(63)

N Clients

Server

Network

N Streams

across the

network

Content

(64)

N Clients

Server

Network

One copy

across the

network

Content

(65)

Different Streaming Players



Three major streaming players are RealMedia,

QuickTime, and Windows Media.



Streaming has three components that affect people

who use your web site: Servers and media files,

Media players or plug-ins, Encoding and creation

tools.



RealMedia, QuickTime and Windows Media have

their own proprietary server and types of media files

that they use.

(66)



Media player is a plug-in component for web

browsers.



Users need the player installed on their computer to

view or listen to streaming media designed for that

player.



Encoding and file creation relates to the way media

files are created for a particular streaming format.



Three streaming has its own proprietary way of

encoding media files for playback from streaming

server.



Might need access to special software for converting

(67)

Advantages of Streaming



Faster Views over the Internet:



Streaming media takes the wait out of hearing audio

or viewing video and animation over the internet.



Streaming video does not need to be downloaded

before it can be viewed.



Protection against media piracy:



Provides a much higher level of security for original

content and can protect content owner’s rights.

(68)



Streamed files play over the internet without

being downloaded to views’ computers.



Media if fully protected and not susceptible to

unauthorized duplication or tampering.



See who’s watching your videos:



Possible to keep track of viewers who see your

streaming media.



Provides feature that gives you detailed reports

about who is viewing your media, the number

of times a file is requested….

Click here to play The Beatles.

Child Labor Unit

Latino Unsung Champions

Digital Poetry

Lesson on the Stock Market

GIF

animated

Web browsers.

Java

applets.

Click Here

/streaming compared