Video, Animation and Programs
•
•
•
•
•
•
•
•
•
•
•
Helper Applications and Plug-ins
Audio file types and how to obtain them
Adding sound to a web page
Video file types and how to obtain them
Adding video to a web page
Streaming Media
The features and common uses of JavaScript, Java
Applets, Flash, and DHTML
Adding a Java Applet to a web page
Adding a Flash Animation to a web page
Find free JavaScript, Java Applets, DHTML, and
Flash resources on the Web
Describe other technologies that can be used to
add web page interactivity
1

Helper Applications
&
Plug-ins
Helper Application
• A program that can be designated to
handle a particular file type (such as .wav
or.mpg) to allow the user to view or
otherwise utilize the special file.
• The helper application runs in a separate
window from the browser.

Plug-In
• A newer and more common method
• Plug-ins run right in the browser window
so that media objects can be integrated
directly into the web page.
2
Commonly Used
Plug-ins




Real Player
Windows Media Player
Apple Quicktime
Macromedia Flash Player
3
Audio
File Types






.wav
Wave File
.aiff
Audio Interchange File
Format
.mid Musical Instrument Digital
Interface (MIDI)
.au
Sun UNIX sound file
.mp3
MPEG-1 Audio Layer-3
.ogg Ogg-Vorbis
4
Obtaining
Audio Files

Audio files can be obtained from various
sources:
•
•
•
•
Record your own sounds or music
Download sounds or music from a free site
Download sounds or music from a site for a fee
Record music from a CD

A commercial CD can only be copied for personal use
and not for publishing to the Web. Contact the
owner of the copyright to request permission to use
the music.
• Purchase a CD of sounds or music.
• There are some ethical issues related to using
sounds and music created by others.

Be certain to only publish sounds or music that you
have either created yourself or have obtained the
rights (sometimes called a license) to publish.
5
Using Sound
on a Web Page

Link to the sound
<a href="ringing.wav" title=”Hear a telephone
ring.”>telephone ringing</a>

Embed the sound
• You can embed the sound in a page
and optionally display a control panel
for the sound
• The <embed> tag

Not part of the W3C standard but commonly
used
• The <object> tag

W3C standard but not well supported by
browsers
6
XHTML
<embed> tag
<embed src="catch.wav" autostart="false"
controls="smallconsole" height="25" width="100" />
 The embed tag
 A stand alone
tag
 Attributes:
•
•
•
•
•
•
•
•
src
controls
width
height
autostart
loop
align
hidden
7
XHTML
<object> tag
<object data="catch.wav " autostart="false" height="50"
width="100" type="audio/wav" ></object>



The object tag
A container tag
Attributes:
•
•
•
•
•
•
•
data
type
width
height
autostart
loop
hidden
8
XHTML
Background Sound


Internet Explorer supports the
<bgsound> tag. This tag is not
supported by other browsers and should
be avoided
Using the <embed> tag to configure a
background sound on a web page:
<embed src="catch.wav" autostart="true"
hidden="true" loop="true" />
9
Video
File Types




.mov
Quicktime
.avi
Microsoft Audio Video
Interleaved
.wmv Windows Media File
.mpg
MPEG (Motion Picture Experts
Group)
10
Obtaining
Video Files

Video files can be obtained from various
sources:
• Record your own



Digital Camcorder
Webcam
Copy video tapes using a video capture card
• Edit using Microsoft Movie Maker, Apple
Quicktime, etc.
• Download from a free site
• Download from a site for a fee
• Purchase a DVD of stock videos
• here are some ethical issues related to using
videos created by others.

Be certain to only publish videos that you have
either created yourself or have obtained the
rights (sometimes called a license) to publish.
11
Using Video
on a Web Page

Link to the video
<a href="sparky.mpg" title=”Video of dog
barking”>Sparky! (Caution: long video download)</a>

Embed the video
• You can embed the video in a page and
optionally display a control panel for the sound
• The <embed> tag

Not part of the W3C standard but commonly used
• The <object> tag

W3C standard but not well supported by browsers
12
XHTML
<embed> tag
<embed src="sparky.mpg" autostart="false" width="160"
height="120" />
 The embed tag
 A stand alone
tag
 Attributes:
•
•
•
•
•
•
•
•
src
controls
width
height
autostart
loop
align
hidden
13
XHTML
<object> tag
<object data="sparky.mpg" type="video/mpeg" autostart="false"
width="160" height="120" >A video displaying a cute Pekingese
dog barking.</object>



The object tag
A container tag
Attributes:
•
•
•
•
•
•
•
data
type
width
height
autostart
loop
hidden
14
XHTML
<img> tag dynsrc attribute
<img dynsrc="sparky.mpg" autostart="true"
width="160“ height="120" alt=”Sparky Video” />


Internet Explorer
Only
<img> tag dynsrc
attribute is used
to integrated the
video with the
web page.
15
Streaming
Media



A disadvantage to a regular audio or
video file is that the web site visitor
must wait for the entire file to
download before beginning to
experience it.
Streaming media corrects this problem
-- it begins to play almost immediately
and uses "buffering" to capture the
next portion of the file download.
Three major components:
• Authoring
• Distribution
• Playback
16

Intro to RealNetworks
Streaming
Media
(1)
There are two components to every
streaming media production:
• the media file itself (.rm file extension)
• the metafile (.ram file extension).


The metafile
(which means
“file about a file”)
is a text file that
contains a link to
the streaming media file.
Web developers that want to use streaming
media code a link to the metafile (not the
media file).
17
Intro to RealNetworks
Streaming Media Distribution(1)

The web server needs software to
handle the streaming media –
such as checking connection
speed and adjusting the stream to
the available bandwidth.
• Real System Server 8.

To use a streaming media file with
a web page, three files must be
uploaded to the web server:
• the media file (.rm extension),
• the metafile (.ram extension)
• and the web page.
18
Intro to RealNetworks
Streaming Media Distribution(2)

There are two ways to distribute
RealNetworks streaming media.
• Web host provider purchases and installs a
RealServer from RealNetworks.


This will handle multiple users and monitor
streaming rates with the client computers.
This is needed for a commercial, heavy traffic site.
• A second option (which is free) is to stream
the content using HTTP (the protocol that web
browsers and web servers use to
communicate).

The media is transmitted at a preset, constant speed
and the stream is not monitored.
19
Intro to RealNetworks
Streaming Media Playback


Web page visitors
whose browser is
equipped with the Real
Player plug-in will
experience your
streaming media.
If the web site is using a
RealNetworks server,
the stream will be
adjusted to the
bandwidth available,
otherwise a constant 20
stream will be sent.
Copyright Issues
and Media Files(1)




It is very easy to copy and download an
image, audio, or video file from a web site.
It may be very tempting to reuse a file in
one of your own projects, but that may not
be ethical or lawful.
Only publish web pages, images, and other
media that you have personally created or
have obtained the rights or license to use.
If another individual has created an
image, sound, video, or document that you
believe would be useful on your own web
site, ask permission to use the material
instead of simply “grabbing” it.
21
Copyright Issues
and Media Files(2)



All work (web pages, images, sounds,
videos, etc.) is copyrighted – even if there is
no copyright symbol and date on the
material.
Be aware that there are times when
students and educators can use portions of
other’s work and not be in violation of
copyright law – this is called “fair use”.
"Fair use" is use of a copyrighted work for
purposes such as criticism, reporting,
teaching, scholarship, or research.
22
Copyright Issues
and Media Files(3)

Criteria used to determine “fair
use”:
 The use must be educational and not
commercial
 The nature of the work
 The amount copied must be as small
of a portion of the work as possible.
 The copy does not impede the
marketability of the original work.
23
Questions
1.
List three common web browser plugins and describe what they are used
for.
2.
Describe issues involved with adding
media such as audio or video to a web
page.
3.
True or False. Visit the plug-in or
player’s web site for the most current
information on the XHTML needed to
successfully invoke a plug-in.
24
What is
Macromedia Flash?





Flash is a popular multimedia application
developed by Macromedia.
It is often used to create animation and
multimedia effects on web pages
Flash effects are saved in “.swf” files
.swf files play as they download and give the
perception of speedy display of complex
graphic animations
Flash requires a free browser plug-in, which
is available for download from Macromedia
25
How to create
Macromedia Flash?

“.swf” files can be created in a
number of applications including




Macromedia Flash,
Macromedia Fireworks,
Macromedia Dreamweaver,
Swish
26
Common Uses of
Macromedia Flash



Navigation
Splash Screen
Entire Web Site
27
Adding Flash to
a Web Page



Both the <object> tag and the <embed> tag
are used to place Flash media on a page
Some versions of currently popular
browsers such as Netscape support the
<embed> tag and do not fully support the
<object> tag.
Use the <noembed> tag to contain a text
description of the Flash media in order to
provide for accessibility.
28
Flash
General Sample
<object … object attributes go here….
<param name="movie" …value attribute goes here… />
<param name="quality" …value attribute goes here… />
<param name="bgcolor" …value attribute goes here… />
<embed … object attributes go here…. />
<noembed> … a brief description of the Flash media can
go here along with a link to alternate text content if
appropriate… </noembed>
</object>
29
Flash
Detail Sample
The following code places a Flash file called flashbutton.swf on a
web page:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=5,0,0,0 " width="147" height="34">
<param name="movie" value="flashbutton.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<embed src="flashbutton.swf" quality="high"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?
P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"
width="147" height="34" bgcolor="#FFFFFF" />
<noembed>This is a Flash button that links to <a
href=”http://macromedia.com”>Macromedia’s web site</a>
30
</noembed>
What is
Java?




Java is an Object Oriented
Programming (OOP) language
developed by Sun Microsystems.
Java is not the same language
as JavaScript.
Java is more powerful and much
more flexible than JavaScript.
Java can be used to develop
both stand-alone executable
applications and applets that are
invoked by web pages.
31
Java
Applets



Java applets are compiled
(translated from the English-like
Java statements to an encoded
form) and saved as “.class”
files which contain byte code.
The byte code is interpreted by
the Java Virtual Machine (JVM)
in the web browser. The JVM
interprets the byte code into the
proper machine language for
the operating system.
The applet is then executed and
32
appears on the web page.
Common Uses
of Java Applets





Navigation Bars and Buttons
Image Effects
Text Effects
Games
Web and Business Applications
33
Adding a Java Applet
to a Web Page



The applet tag
A container tag
Attributes:
• code, codebase, height, width, alt, id

Works together with <parameter> tags
• Stand alone tags
• Attributes:


name, value
The <parameter> tags used by an applet
are determined by the developer who
writes and distributes the applet
34
Sample
Java Applet
<applet code=“myapplet.class" height=“50" width=“500“
alt=“Java applet: displays a moving logo with company name”>
<param name="bgColor" value="#FFFFFF" />
<param name=“txtColor" value="#0000CC” />
This Java applet displays a moving logo with the company name
</applet>

The sample applet is named
myapplet.class and requires two
parameters, bgColor and txtColor.
35
Questions
1.
Describe two uses of Flash on
web pages.
2.
Describe two uses of Java
applets on web pages.
3.
Describe two disadvantages of
using interactive technologies
such as Flash and Java
applets on web pages.
36
What is
JavaScript?





Object-oriented scripting language.
Used to work with the objects associated
with a web page document --the window,
the document, the elements such as
forms, images, links, etc
Originally developed by Netscape and
called LiveScript
Netscape collaborated with Sun
Microsystems on modifications to the
language and it was renamed JavaScript
JavaScript is NOT Java
37
Common Uses
of JavaScript








Display a message box
Select list navigation
Edit and validate form information
Create a new window with a
specified size and screen position
Image Rollovers
Status Messages
Display Current Date
Calculations
38
What is
DHTML (Dynamic HTML)?



A group of technologies work together
to change a web page after it has
been downloaded.
These technologies allow the web
page to respond to user actions.
Technologies used in DHTML:
• Document Object Model (DOM)
• Cascading Style Sheets (CSS)
• Client-side Scripting
39
Document Object Model
(DOM)



The DOM
defines every
object and
element on a
web page.
Its hierarchical
structure can be
used to access
page elements
and apply styles
to page
elements.
A portion of the
40
DOM is shown
at
the right.
More on
DHTML


Has a long learning curve because of the
extent of the knowledge needed to successfully
combine the three technologies.
Implemented differently by major versions of
the major browsers, Internet Explorer and Netscape.
• DHTML coded to work in Internet Explorer will
often not work in Netscape.
• DHTML coded to work in Netscape 4.x will not
work in Netscape 6.

Convergence between the DHTML implementations

It should become easier to write cross-browser41
of Internet Explorer 5, Mozilla Firefox, and Netscape
7 is better.
DHTML in the future.
Common Uses
of DHTML



Hiding and showing text
Navigation
Image Effects
42
Adding DHTML
to a Web Page



The code needed to add a DHTML effect to a
web page will vary based on the desired
effect – usually using a combination of CSS
and JavaScript.
The JavaScript tends to get complex
because of the differences in the syntax
required for different browser and browser
versions.
It is a good idea to become comfortable
with CSS and JavaScript before tackling
DHTML.
43
Questions
1.
Describe two uses of JavaScript.
2.
Describe two uses of DHTML
3.
List the technologies used when coding
DHTML.
44