web multimedia course wellcome to. 6. window media formats 7. object intro 8. object quicktime 9....
TRANSCRIPT
WEB MULTIMEDIA COURSE
WELLCOME TO
6. WINDOW MEDIA FORMATS
7. OBJECT INTRO
8. OBJECT QUICKTIME
9. OBJECT REALVEDIO
10. TAG REFERENCE
11. PLAYER REFERENCE
1. INTRODUCTION
2. SOUND FORMATS
3. VIDIO FORMATS
4. BROWSER SOUND
5. BROWSER VIDIOS
CONTENTS
INTRODUCTION
Multimedia is everything you can hear or see :texts, books, pictures, music, sounds, CDs, videos,DVDs, Records, Films, and more.
What is Multimedia?
Browser SupportInternet Browser support : text, fonts, colors, picture, sounds, animations, video
INTRODUCTIONMultimedia Formats
- .html or .htm : the HTML page
- .xml : the XML file
- .css : the style sheet
The most common way to discover the media type is to look at the file extension.
- .jpg, .gif : the picture file
- formats with different extensions.
SOUND FORMATSSound can be stored in many different formats.
The MIDI Format(Musical Instrument Digital Interface)
The downside : - Cannot record sounds (only notes) or cannot store songs, only tunes.
The upside : - MIDI files can be extremely small . - Supported by many different software system
(.mid or .midi)
The RealAudio Format
SOUND FORMATS(.rm or .ram)
The format allows streaming of audio (on-line music,Internet radio) with low bandwidths. Because of the low bandwidth priority, quality is often reduced.
The AU Format (.au)
supported by many different software systems over a large range of platforms.
SOUND FORMATSThe AIFF Format
(.aif or .aiff)
Audio Interchange File Format and SND was developed by Apple.
They are not cross-platform and the format is not supported by all web browsers.
and The SND Format (.snd)
SOUND FORMATS
The WAVE Format (.wav)
supported by all computers running Windows, and by all the most popular web browsers.
The MP3 Format (MPEG) (.mp3 or .mpga)
The MP3 encoding system combines good compression (small files) with high quality
SOUND FORMATSWhat Format To Use?
If you want recorded sound (music or speech) to beavailable to all your visitors, you should use the WAVE format
If your website is about recorded music, the MP3 format is the choice of the future.
VIDEO FORMATSThe AVI Format
It is a very common format on the Internet,but not always possible to play on non-Windows computers.
(.avi)
The MPEG FormatThe MPEG (Moving Pictures Expert Group) format
is supported by all the most popular web browsers.
(.mpg or .mpeg)
The QuickTime Format
VIDEO FORMATS
QuickTime movies cannot be played on a Windows computer without an extra (free) component installed.
(.mov)
The RealVideo Format
The format allows streaming of video (on-line video, Internet TV) with low bandwidths. Because of the low bandwidth priority, quality is often reduced
(.rm or .ram)
VIDEO FORMATS
The Shockwave (Flash) Format
The Shockwave format requires an extra component to play. This component comespreinstalled with the latest versions of Netscape and Internet Explorer.
(.swf)
PLAYING SOUNDS
- sound is included in a web page, or as part of a web page
Inline Sound
- Inline sound can be added to a web page by using the <bgsound> element or the <img> element.
PLAYING SOUNDSUsing A Helper (Plug-In)
- A helper application (Plug-In) is a program that can be launched by the browser to "help" playing sound.
- Helper applications can be launched using the <embed> element, the <applet> element, or the <object> element.
- can let some (or all) of the player settings be controlled by the user.
PLAYING SOUNDSUsing The <bgsound> Element
- The purpose of this element is to provide a background sound for a web page:
<bgsound src="beatles.mid" />
PLAYING SOUNDSUsing The <bgsound> Element
<html><body><h2>Music In The Background</h2><bgsound src="beatles.mid"></body></html>
Example
PLAYING SOUNDS
Using The <img> Element
-The purpose of this element is to embed multimedia elements in web page:
<img dynsrc="horse.wav" />
PLAYING SOUNDS
Using The <img> Element
<html><body><h2> Horse As An Image</h2><img dynsrc="horse.wav"></body></html>
Example
Using The <embed> Element
PLAYING SOUNDS
-The purpose of this element is to embed multimedia elements in web page:
<embed src="beatles.mid" />
PLAYING SOUNDSUsing The <embed> Element
<html><body><h2>Beatles Embedded</h2><embedsrc="beatles.mid"width="50%"height="50%"></embed></body></html>
Example
Using The <object> Element
PLAYING SOUNDS
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"><param name="FileName" value="liar.wav" /> </object>
- The purpose of this element is to embed multimedia elements in web page:
<html><body><h2>Playing The Object</h2><objectheight="50%"width="50%"classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"><param name="AutoStart" value="1" /><param name="FileName" value="liar.wav" /></object></body></html>
PLAYING SOUNDSUsing The <object> Element
Example
PLAYING SOUNDS
Using A Hyperlink
<a href="beatles.mid"> Click here to play the Beatles </a>
- If a web page includes a hyperlink to a media file, most browsers will use a "helper application“ to play the file.
<html><body><h2>Linking To Beatles</h2><p><a href="beatles.mid">Click here to play the Beatles</a></p></body></html>
PLAYING SOUNDSUsing A Hyperlink
Example
PLAYING VIDEOUsing The <img> Element
-The purpose of this element is to embed multimedia elements in web page.
<img dynsrc="video.avi" />
Using The <embed> Element
PLAYING VIDEO
-The purpose of this element is to embed multimedia elements in web page.
<embed src="video.avi" />
PLAYING VIDEOUsing The <object> Element
-The purpose of this element is to embed multimedia elements in web page.
<object data="video.avi" type="video/avi" />
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.
PLAYING VIDEO
<a href="video.avi"> Click here to play a video file </a>
WINDOWS FORMATSThe ASF Format
-The ASF format (Advanced Streaming Format) is specially designed to run over the Internet.
- ASF files can contains audio, video, slide shows, and synchronized events
WINDOWS FORMATSThe ASX Format
- ASX (Advanced Stream Redirector) files are not media files, but metafiles.
- Metafiles provides information about files. ASX files are plain text files used to describe multimedia content
WINDOWS FORMATSThe ASX Format
<ASX VERSION="3.0"> <Title>Holiday 2001</Title> <Entry> <ref href="holiday-1.avi"/> </Entry> <Entry> <ref href="holiday-2.avi"/> </Entry><Entry> <ref href="holiday-2.avi"/> </Entry> </ASX>
WINDOWS FORMATSThe WMA Format
- The WMA (Windows Media Audio) format is an audio format developed by Microsoft.
- The WMA format is similar to the ASF format
WINDOWS FORMATSThe WMV Format
- The WMV (Windows Media Video) format is an audio format developed by Microsoft.
- The WMV format is similar to the ASF format
Other Windows Media Formats
WINDOWS FORMATS
- WAX (Windows Media Audio Redirector) files are much the same as ASX files, but intended to describe audio files (.wma files)
- WMP (Windows Media Player) files and WMX are reserved file types for future use by Windows.
OBJECT INTRO
Displaying A Picture
<object height="100%" width="100%“ type="image/jpeg" data="audi.jpeg"> </object>
OBJECT INTRO
Displaying A Web Page
<object height="100%" width="100%“ data="http://www.w3schools.com"> </object>
OBJECT INTRO
Displaying A Sound
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> <param name="FileName" value="liar.wav" /> </object>
OBJECT INTRODisplaying A Video
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"><param name="FileName" value="3d.wmv" /> </object>
Displaying A Calendar
OBJECT INTRO
<object width="100%" height="80%“ classid="clsid:8E27C92B-1264-101C-8A2F-040224009C02"><param name="BackColor" value="14544622"> <param name="DayLength" value="1"> </object>
OBJECT INTRODisplaying Graphics
<object width="200" height="200“ classid="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6"> <param name="Line0001" value="setFillColor(255, 0, 255)"><param name="Line0002" value="Oval(-100, -50, 200, 100, 30)"> </object>
Displaying Flash
OBJECT INTRO
<object width="400" height="40" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com /pub/shockwave/cabs/flash/swflash.cab#4,0,0,0"> <param name="SRC" value="bookmark.swf"> </object>
OBJECT QUICKTIMEThe QuickTime Format
- The QuickTime format is developed by Apple. Videos stored in the QuickTime format have the extension .mov.
- QuickTime movies cannot be played on a Windows computer without an extra (free) component installed.
OBJECT QUICKTIMEThe Solution
<object width="160" height="144“ classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param name="src" value="sample.mov"> <param name="autoplay" value="true"> <param name="controller" value="false"><embed src="sample.mov" width="160" height="144" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed></object>
The <object> Element
OBJECT QUICKTIME
- The width and height attributes of the object element should match the size of the movie in pixels.
- The classid attribute uniquely identifies the player software to use. It must be set to "clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B". This unique code identifies an ActiveX control that must be installed on the users PC before the movie can be played.
OBJECT QUICKTIMEThe <object> Element
- The codebase attribute specifies the base path used to resolve relative URIs specified by the classid, data, and archive attributes.
- The src parameter should point to the movie file.
- The autoplay parameter should have the value "true“ if you want the movie to play automatically.
- The controller parameter should have the value "false“ if you don't want the control buttons to show.
The <embed> ElementOBJECT QUICKTIME
- The embed element is added to support browsers that don't support the object element.
- The width and height : element should match the size of the movie in pixels.
- The autoplay and controller attributes : should be set to the same values as for the parameters in the object element.
- The pluginspage attribute defines the players download path. It must be set to "http://www.apple.com/quicktime/download/".
The Real Video Format
OBJECT REALVIDEO
- The RealVideo format is developed by Real Media. Videos stored in the Real Video format have the extension .rm or .ram.
<object width="320" height="240" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"> <param name="controls" value="ImageWindow" /> <param name="autostart" value="true" /> <param name="src" value="male.ram" /> </object>
The Solution
The <object> Element
OBJECT REALVIDEO
- The width and height attributes of the object element should match the size of the movie in pixels.
- The classid attribute uniquely identifies the player software to use. It must be set to "clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA".
- The param elements supply additional information to the player.
OBJECT REALVIDEOThe <object> Element
- The src parameter should point to the movie (or audio) file.
- The autostart parameter should have the value "true" if you want the movie to play automatically.
- The controls parameter should have the value "ImageWindow”if you don't want the control buttons to show, or "All" if you want all the controls to show.
Object ReferenceAttribute Defines
classid A unique id for the object.
height The height of the object in pi xels or %.
width The width of the object in pix
els or in %.
OBJECT REALVIDEO
OBJECT REALVIDEOParameter Reference
Attribute Defines
src The source of a RealAudio or RealVi deo clip.
controls The visibility of the controls. (See below)
console A console name to link multiple controls.
autostart Automatic start. (true | false).
nolabels Suppression of label texts in the con trols window.
reset Resetting the control for playlist. (tr ue | false).
autogotoURL How a URL is handled. (true | false) True forwards URL event to the
browser. False uses VBScript event instea
d.
Controls Values
Value Displays
All Displays a full player with all controls.
InfoVolumePanel Title, author, and copyright and volume slider.
InfoPanel Title, author, and copyright.
ControlPanel Position slider, play, pause, and stop buttons.
StatusPanel Messages, current time position, and clip length.
PlayButton Play and pause buttons.
StopButton Stop button.
VolumeSlider Volume slider.
PositionField Position and clip length.
StatusField Messages.
ImageWindow The video image
StatusBar Status, position and channels.
OBJECT REALVIDEO
TAG REFERENCE
The <bgsound> Element
Attribute Function
id A unique id for the element.
src The location (URL) of the source file.
balance - The balance. ( 10000=left, +10000=right).
loop -The number of loops. ( 1=infinite).
volume -The volume. (0=max, 10000=min).
TAG REFERENCE
The <embed> Element
Attribute Defines
autostart Automatic start. (true | false).
height The height of the element in pixels or %.
hidden The visibility of the element. (true | false).
src The location (URL) of the source file.
width The width of the element in pixels or %.
TAG REFERENCE
The <applet> Element
Attribute Defines
alt An alternate text.
archive The locations (URLs) of archive files.
code The location (URL) of the applet code.
codebase The base location (default URL) for all files.
height The height of the applet in pixels or %.
name The name of the applet.
object A saved representation of the applet. Do notuse.
width The width of the applet in pixels or %.
The <object> ElementAttribute Defines
archive The locations (URLs) of archive files.
classid The location (URL) of the object.
codebase The base path used to resolve relative URIs specified by the classid, d ata, and archive attributes.
codetype The content type of the code.
data The location (URL) of object data.
declare Do not instantiate (execute) the object.
height The height of the object in pixels or %.
name The object's name.
standby Text to display while object is loading.
tabindex The position in the tab order
type The content type of the object.
usemap The location (URL) of an image map.
width The width of the player in pixels or %.
TAG REFERENCE
The <param> Element
AttributeDefines
id A unique id for the element.
name Parameter name.
type Parameter content type.
value Parameter value.
valuetype Parameter value type.
TAG REFERENCE
Styling Attributes
AttributeDefines
align The alignment of the object.
border The border with in pixels.
hspace - The horizontal white space (margin) in pixels.
vspace - The vertical white space (margin) in pixels.
TAG REFERENCE
Common HTML Attributes
Attribute Defines
class The element's class.
dir The directionality of the element.
id A unique id for the element.
lang The language used by the element.
style The element's style.
title The elements title.
TAG REFERENCE
Standard Events
Event Handles
onclick mouse clicked
ondblclick mouse double clicked
onmousedown mouse button pressed down
onmouseup mouse button released
onmouseover cursor moved onto the element
onmousemove cursor moved within the element
onmouseout cursor moved away from the element
onkeypressed key pressed and released over the element
onkeydown key pressed down over the element
onkeyup key released over the element
TAG REFERENCE
MEDIA PLAYER REFERENCEWhy Has the class ID Changed?
- The correct class ID for Windows Media Player 7 and later is: clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6.
- Many places on the internet it states that the class ID should be: clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95. This class ID is not the correct one, but it will work, because of backward compability..
Windows Media Player 10clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6 (same as WMP7)
MEDIA PLAYER REFERENCE
Windows Media Player 9clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6 (same as WMP7)
Windows Media Player 7clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6
Windows Media Player 6.4clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95
MEDIA PLAYER REFERENCE
Windows Media Player 6 (Older Version)clsid:05589FA1-C356-11CE-BF01-00AA0055595A
REFERENCE
WWW.W3SCHOOLS.COM