Transcript Embedding Media

Embedding Media
into Web Pages
Lecturer – Steve Clark
Optimizing Audio
• There are a number of ways to reduce an
audio file for downloading via a web page.
• Length of clip
• Number of channels
• Bit depth
• Sampling Rate
Adding Non-streaming Audio
• There are many ways to access an audio file
by using a HTML document.
• Link to file with an anchor <a>
• Embed the plug-in player with <embed> tag
• Sounds can also be used as backgrounds
that begin playing automatically when the
page downloads.
Adding Non-streaming Audio
A Simple Link
• You can use an anchor tag <a> to link an audio
file from a web page:
<a> href=“Majest3.wav”>play the song.</a>
• When the reader clicks on the linked text the
browser will retrieve the file from the server and
launch a helper application to play the file.
• It is good web design to advise user of the size and
type of the audio file to be downloaded.
Adding Non-streaming Audio
<embed> for use with plug-ins
• When you use the <embed> tag, the browser places
the plug-in controls in the flow of the text like an
image.
• <EMBED SRC="Beethoven's Fur Elise.rmi"
CONTROLS="console" HEIGHT=160 WIDTH=145
AUTOSTART="false"></EMBED>
• Note that when you use a plug-in, the audio will
stop playing when the user leaves the page.
• Load Page
Adding Non-streaming Audio
Background Sounds
• There are several ways to make an audio file start
automatically when a web page loads.
• Note that the disadvantage of using background
sounds is that the user has no way of turning the
sound off.
• Also a large audio file will force a potentially
lengthy download time.
Adding Non-streaming Audio
• For internet explorer (only) <bgsound> tag:
<BGSOUND> SRC=“Ding.wav” LOOP=3>
Load background sound 1 web page
• For Explorer and Netscape use <bgsound> tag and
<embed> tag that hides the control panel:
<EMBED SRC=“Drumroll.wav” autostart=true
hidden=true></EMBED>
<NOEMBED><BGSOUND=“Drumroll.wav”></NOEMBED>
Load background sound 2 web page
Adding Non-streaming Audio
META TAGS
You can also make audio play automatically with
client-pull by using the <meta> tag:
<META> http-equiv=“refresh”
content=“1;url=Fall_01.mid”>
This causes the page to refresh and audio to play
after 1 second.
Load background sound 3 web page
Adding Streaming Audio
•
Like Non-streaming there are two
methods for adding streaming audio to a
web page.
1. Using a link <a>
2. Using an <embed> tag
• Embedding controls allows the design of
custom interfaces.
• Note Audio will stop playing when the
user leaves the page.
Adding Streaming Audio
• Each technology’s plug-in has its own set of
attributes.
• Some plug-ins require the link to be made
to a go-between or reference file.
• When accessed via the link, they pass the
URL of the actual media file to the
appropriate plug-in, which requests the
audio stream from the server.
Adding Streaming Audio
• RealAudio’s reference files are called
“metafiles” (suffix .ram).
• The link is made to the metafile not the
RealAudio file itself.
<A HREF=“song.ram”>Link to the song</A>
• The metafile contains the URL that points to
the RealAudio file (suffix .ra):
pnm://[ip.address]/song.ra
Adding Streaming Audio
• Metafiles are useful for maintenance and
control purposes.
• To change the audio, all you do is change
the tiny metafile, rather than the HTML
source code.
• You can also call multiple streaming media
files from one metafile. Where one link
plays all files.
Adding Streaming Audio
Some attributes for various plug-ins:
• src=URL – Defines URL of the audio file
• width=value – sets size of control panel
• height=value – sets size of control panel
• loop=true/false/number – to play once set to
false
• autostart=true/false – When true starts
automatically
Adding Video
•
Video files can be linked to HTML pages
using the same methods as audio files
1. Using a link <a>
2. Using an <embed> tag
• Customize control panel
• Indicate video file size (downloading)
• Indicate speed of transfer – modem, cable
• Link to reference file for streaming
Adding Video
• Using an anchor tag to download.
<A HREF=“radar.avi”> Check out video (220Kb) </A>
• Using an embed tag the browser looks for
the appropriate plug-in player
<EMBED SRC=“radar.avi” AUTOPLAY=false
WIDTH=160 HEIGHT=120></EMBED>