Tutorial 7 Working with Multimedia
description
Transcript of Tutorial 7 Working with Multimedia
![Page 1: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/1.jpg)
HTML and CSS6TH EDITION
Tutorial 7Working with Multimedia
![Page 2: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/2.jpg)
XPXPXPXPXPObjectives• Learn about sound file formats and properties• Embed a sound clip using the audio element• Embed a sound clip using the embed element• Learn about video file formats and properties• Embed a video clip using the video element
New Perspectives on HTML and CSS, Comprehensive 2
![Page 3: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/3.jpg)
XPXPXPXPXPObjectives• Embed a video clip using the object element• Explore how to use Shockwave Flash players• Explore how to embed YouTube videos• Explore the history of Java• Embed a Java applet and other Objects
New Perspectives on HTML and CSS, Comprehensive 3
![Page 4: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/4.jpg)
XPXPXPXPXPPlaying Web Audio
New Perspectives on HTML and CSS, Comprehensive 4
![Page 5: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/5.jpg)
XPXPXPXPXPIntroducing Multimedia• Bandwidth is a measure of the amount of data
that can be sent through a communication pipeline each second.– Consider bandwidth when working with
multimedia on a Web site– Multimedia is much more accessible to Internet
users because of high-speed internet connections and the reduction of the file size of multimedia clips
New Perspectives on HTML and CSS, Comprehensive 5
![Page 6: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/6.jpg)
XPXPXPXPXPIntroducing Multimedia• Multimedia is displayed within a Web page in a
fashion similar to an inline images– Controls are displayed as part of the Web page– To play a multimedia file, a browser often will have
access to a plug-in or add on– Starting with the widespread adoption of HTML5,
many browsers now include built-in support for audio and video files, removing the need for plug-ins
New Perspectives on HTML and CSS, Comprehensive 6
![Page 7: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/7.jpg)
XPXPXPXPXPExploring Digital Audio• Every sound wave is composed of two
components:– Amplitude- the height of the sound wave• Relates to sound’s volume
– Frequency- the speed at which the sound wave moves• Relates to sound’s pitch
New Perspectives on HTML and CSS, Comprehensive 7
![Page 8: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/8.jpg)
XPXPXPXPXPExploring Digital Audio
New Perspectives on HTML and CSS, Comprehensive 8
![Page 9: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/9.jpg)
XPXPXPXPXPExploring Digital Audio• You hear sounds as a continuously varying
signal• Must be converted to digital format to store as
a computer file• Digital recording measures the sound’s
amplitude at discrete moments in time– Each measurement is called a sample• Samples per second taken is called the sampling rate
New Perspectives on HTML and CSS, Comprehensive 9
![Page 10: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/10.jpg)
XPXPXPXPXPExploring Digital Audio
New Perspectives on HTML and CSS, Comprehensive 10
![Page 11: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/11.jpg)
XPXPXPXPXPExploring Digital Audio• Sampling resolution (also called bit depth)
indicates the precision in measuring the sound within each sample.– 8-bit– 16-bit– 32-bit
New Perspectives on HTML and CSS, Comprehensive 11
![Page 12: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/12.jpg)
XPXPXPXPXPExploring Digital Audio
New Perspectives on HTML and CSS, Comprehensive 12
![Page 13: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/13.jpg)
XPXPXPXPXPExploring Digital Audio• There are different sound file formats used for
different operating systems.• Different file formats provide varying levels of
sound quality and file compression.
New Perspectives on HTML and CSS, Comprehensive 13
![Page 14: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/14.jpg)
XPXPXPXPXPExploring Digital Audio
New Perspectives on HTML and CSS, Comprehensive 14
![Page 15: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/15.jpg)
XPXPXPXPXPAdding HTML5 Audio• To add an audio clip under HTML5, use the audio element
<audio><source src=”url1” /><source src=”url2” />…
</audio> where url1, url2, etc. are the possible sources of the audio clip.
New Perspectives on HTML and CSS, Comprehensive 15
![Page 16: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/16.jpg)
XPXPXPXPXPAdding HTML5 Audio
New Perspectives on HTML and CSS, Comprehensive 16
![Page 17: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/17.jpg)
XPXPXPXPXPWorking with Embedded Objects• Older browsers that don’t support the HTML5 audio element instead rely on plug-ins to play embedded media clips
• To insert an embedded object such as a media player, you can nest the embed element within the audio element– Browsers recognizing the audio element will
attempt to load the audio clip that way
New Perspectives on HTML and CSS, Comprehensive 17
![Page 18: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/18.jpg)
XPXPXPXPXPWorking with Embedded Objects<audio src=”overture.mp3”>
<embed src=”overture.mp3” type=”audio/mpeg” width=”250” height=”10” />
</audio>
New Perspectives on HTML and CSS, Comprehensive 18
![Page 19: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/19.jpg)
XPXPXPXPXPWorking with Embedded Objects• The MIME types identify the type of data
contained in the file
New Perspectives on HTML and CSS, Comprehensive 19
![Page 20: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/20.jpg)
XPXPXPXPXPWorking with Embedded Objects• The src, type, height, and width
attributes constitute the basic HTML attributes for the embed element, but they do not specify how users interact with the embedded object
New Perspectives on HTML and CSS, Comprehensive 20
![Page 21: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/21.jpg)
XPXPXPXPXPPlaying Web Video
New Perspectives on HTML and CSS, Comprehensive 21
![Page 22: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/22.jpg)
XPXPXPXPXPExploring Digital Video• Digital video adds a visual element to a Web page as
well as provides information• Video files are composed of a series of single images
called frames• Many frames are sized to have width-to-height ratios
or aspect ratios of 4:3, though theatrical releases typically have aspect ratios of 1.85:1 or 2.39:1
• The video bit rate, which is the amount of data that has to be processed by the video player each second
• The number of frames shown in a period of time is the frame rate
New Perspectives on HTML and CSS, Comprehensive 22
![Page 23: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/23.jpg)
XPXPXPXPXPExploring Digital Video
New Perspectives on HTML and CSS, Comprehensive 23
![Page 24: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/24.jpg)
XPXPXPXPXPAdding Video in HTML5• To add a video clip with HTML5 use
<video><source src=”url1” /><source src=”url2” />…
</video> where url1, url2, etc. are the possible sources of the video clip.
New Perspectives on HTML and CSS, Comprehensive 24
![Page 25: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/25.jpg)
XPXPXPXPXPAdding Video in HTML5
New Perspectives on HTML and CSS, Comprehensive 25
![Page 26: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/26.jpg)
XPXPXPXPXPIntroducing the object Element• The object element was introduced in the
specifications for HTML 4 for the purpose of marking any kind of nontextual content
• The object element replaced the embed element, which was widely supported though never part of the previous HTML specifications released by the W3C
<object attributes>parameters
</object>New Perspectives on HTML and CSS, Comprehensive 26
![Page 27: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/27.jpg)
XPXPXPXPXPIntroducing the object Element
New Perspectives on HTML and CSS, Comprehensive 27
![Page 28: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/28.jpg)
XPXPXPXPXPAdding a Flash Player File• To add a Flash player (.swf) file, use the object element
<object data=”url”type=”application/x-shockwave-
flash” width=”value” height=”value”>
<param name=”movie” value=”url” />parameters
</object>• where url is the location and filename of the SWF file, and
parameters is other parameter elements that manage the appearance and actions of the player
New Perspectives on HTML and CSS, Comprehensive 28
![Page 29: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/29.jpg)
XPXPXPXPXPAdding a Flash Player File
New Perspectives on HTML and CSS, Comprehensive 29
![Page 30: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/30.jpg)
XPXPXPXPXPEmbedding Videos from YouTube• YouTube videos are embedded using either the YouTube
Shockwave Flash player file (.swf) or, depending on each user’s device and playing preferences, an HTML5 video player. <object width=”value” height=”value”>
<param name=”movie” value=”url” />parameters<embed src=”url”type=”application/x-shockwave-
flash” width=”value” height=”value” parameters />
</object>
New Perspectives on HTML and CSS, Comprehensive 30
![Page 31: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/31.jpg)
XPXPXPXPXPEmbedding Videos from YouTube
New Perspectives on HTML and CSS, Comprehensive 31
![Page 32: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/32.jpg)
XPXPXPXPXPThe object Element and ActiveX• Internet Explorer supports a technology called
ActiveX to play embedded media• ActiveX employs reusable software
components that can be run from within a variety of Windows programs
• Each ActiveX component is identified by a unique string of characters called the class id.
New Perspectives on HTML and CSS, Comprehensive 32
![Page 33: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/33.jpg)
XPXPXPXPXPThe object Element and ActiveX
New Perspectives on HTML and CSS, Comprehensive 33
![Page 34: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/34.jpg)
XPXPXPXPXPThe codebase Attribute• When a browser encounters a plug-in or an
ActiveX control that it doesn’t recognize, it usually leaves a blank space where the embedded object normally would appear
• One way of dealing with this problem is to provide browsers with information about where a working version of the plug-in or control can be downloaded
New Perspectives on HTML and CSS, Comprehensive 34
![Page 35: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/35.jpg)
XPXPXPXPXPThe codebase Attribute<object classid=”clsid:02BF25D5-
8C17-4B23-BC80-D3488ABDDC6B” codebase=”http://www.apple.com/qtactivex/qtplugin.cab”>parameters
</object>
New Perspectives on HTML and CSS, Comprehensive 35
![Page 36: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/36.jpg)
XPXPXPXPXPEmbedding an Applet
New Perspectives on HTML and CSS, Comprehensive 36
![Page 37: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/37.jpg)
XPXPXPXPXPIntroducing Java• Oak was developed by Sun Microsystems as an
operating system intended to be used by common appliances and devices
• Oak was renamed Java in 1995• Each Java program works with a Java Virtual
Machine (JVM)
New Perspectives on HTML and CSS, Comprehensive 37
![Page 38: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/38.jpg)
XPXPXPXPXPApplets and Java Virtual Machines
New Perspectives on HTML and CSS, Comprehensive 38
![Page 39: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/39.jpg)
XPXPXPXPXPApplets• Applets are displayed as embedded objects on
a Web page • Several libraries of Java applets are available• The popularity of Java has declined in recent
years as more and more of its features can be duplicated with Flash or JavaScript
• The programming enhancements provided with HTML5 also will result in an even more reduced need for Java
New Perspectives on HTML and CSS, Comprehensive 39
![Page 40: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/40.jpg)
XPXPXPXPXPWorking with Java Applets• To embed a Java applet, use the object element
<object type=”application/x-java-applet”
width=”value” height=”value”><param name=”code” value=”url” />parameters
</object>where the width and height attributes define the dimensions of the applet window, url specifies the location and filename of the Java file (usually the class file), and parameters represents the parameters associated with running the applet.
New Perspectives on HTML and CSS, Comprehensive 40
![Page 41: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/41.jpg)
XPXPXPXPXPInserting Java Parameters
New Perspectives on HTML and CSS, Comprehensive 41
![Page 42: Tutorial 7 Working with Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062501/56815e81550346895dcd1218/html5/thumbnails/42.jpg)
XPXPXPXPXPEmbedding Other Objects• Inline images• HTML files
New Perspectives on HTML and CSS, Comprehensive 42