Tutorial 08: Enhancing a Website with Multimedia
To define a sequence of key frames in CSS, the _________ rule is applied.
@keyframes
Why is the fallback option provided to an audio clip?
ANSWER: It is considered bad design to add a feature to a web page without also providing some fallback option to users who cannot take advantage of that feature. One type of fallback option is used by specifying two audio sources so that if the browser cannot play the MP3 version of the audio clip, it can attempt to play the OGG version. If the browser cannot play either version or does not support the audio element at all, the user can follow the source elements with HTML code that the browser will recognize. The simplest fallback option is a text string indicating that the user needs to upgrade the browser to take advantage of the feature you added to the page. Plug-ins can act as a fallback option for browsers that do not support the HTML5 multimedia elements by adding the embed element to the end of the audio element as the last option for the browser.
Briefly describe the styles applied to track cues.
CSS supports the following cue pseudo-element to format the appearance of the cues appearing within a media clip: ::cue { styles } The styles for the cue pseudo-element are limited to the background, color, font, opacity, outline, text-decoration, text-shadow, visibility, and white-space properties. For example, the following style rule displays all cues in a 2em yellow serif font on a red background: ::cue { background: red; color: yellow; font: 2em serif; } The cue pseudo-element selects all of the cue text in the media clip. To format specific cues or text strings within a cue, a user can identify the sections of the cue text using the following markup tags: • <i></i> for italicized text • <b></b> for bold-faced text • <u></u> for underlined text • <span></span> to mark spans of text • <ruby></ruby> to mark ruby text • <rt></rt> to mark ruby text WebVTT also supports tags that are not part of the HTML library, such as the following <c></c> tag used to mark text strings belonging to a particular class: <c.classname></c> Here, classname defines the class. And for captions that distinguish one voice from another, WebVTT supports the following <v></v> tag: <v name></v> Here, name is the name of the voice associated with the caption. For cues based on their class name, add the class name to the cue pseudo-element as follows: ::cue(.classname) { style rules } Here, classname is the class marked within in the <c></c> tag. To format voice text, use the style rule as follows: ::cue(v[voice=name]) { style rules } Here, name is the name assigned in the <v></v> tag.
It is essentially the file format that is identified by a file extension.
Container
The advantage of the _________ approach is that a wide variety of timings can be defined, including timings in which a transition can stop, reverse itself, and then go forward again to its end state.
Cubic Bézier curves
A plug-in works within a browser with CSS and JavaScript files to present a customizable player.
False
A transition must start immediately after an event that triggers it.
False
A video file typically contains a single codec that is used for both audio and video images.
False
An animation has a single state of operation, so a radio button is used to control the animation.
False
By default, the caption cues are centered at the top of the video window.
False
The advantage of lossless compression is that the same level of compression is achieved as with lossy compression.
False
When making tracks with Web Video Text Tracks (WebVTT), white spaces are ignored.
False
When setting the transition timing, it must be ensured that the speed of the transition is constant.
False
Transition is a technique of creating the illusion of movement by displaying a sequence of changing images in rapid succession.
False - Animation
In the audio element <audio src="url" attributes />, the url specifies how the audio clip should be handled by the browser.
False - attributes
When a media player initially loads a video file, the player shows the last video frame as a preview of the video's content.
False - first
The original purpose of the web and HTML was to deliver textual information via separate hypertext documents.
False - interconnected
Using lossless compression, nonessential data are removed to achieve a smaller file size.
False - lossy compression
When controlling an animation, if a check box is selected the animation pauses.
False - plays
The language of the subtitle that is added to a media clip must be specified in the descriptions attribute in the track element.
False - srclang
It is the industry standard for high-definition video streams.
H.264
Briefly explain how to control an animation.
In many applications, a user may not want an animation to start automatically when the page loads but rather in response to the user clicking a form button. The user can control an animation using JavaScript or a CSS solution. Because an animation can have two states of operation—play or pause—a user can utilize a check box to control the animation. If the check box is selected, the animation will play; if the check box is not selected, the animation will be paused.
_________ is a widely used proprietary format developed by Apple based on the Apple QuickTime movie format.
MPEG-4
_________ is an open source format developed by the Xiph.org Foundation using the Theora codec as an alternative to the MPEG-4 codec.
Ogg
It acts as a fallback option for browsers that do not support the HTML5 multimedia elements by adding the embed element.
Plug-in
_________ is a royalty-free codec developed by the Xiph.org Foundation that produces video streams that can be used with almost any container.
Theora
A challenge in delivering multimedia content is presenting it in a form that can be retrieved quickly and easily without loss of quality.
True
An animation is limited to two style rules defined at the initial and end states.
True
The src, type, height, and width attributes can be applied to the embed element for any plug-in.
True
The task of controlling video playback requires an external JavaScript program as there are no CSS styles to control the video playback.
True
To format specific cues or text strings within a cue section, the cue text is identified using markup tags such as <span></span> for a span of text.
True
When a browser is unable to play an MP3 version or an OGG version of an audio file, a message is displayed as a fallback option asking the user to upgrade it.
True
When applying an animation, the animation name must be listed first while the other properties can be listed in any order.
True
It is the original audio format for Windows PCs, which is commonly used for storing uncompressed audio, making it impractical for all but the shortest audio clips.
WAV
A plug-in either opens in its own external window or runs within a web page as a(n) _____. a. embedded object b. isolated object c. root object d. source object
a
Codecs are placed within a _____ that handles the packaging, transportation, and presentation of data. a. container b. table c. windows d. cell
a
Consider the following text string consisting of four As followed by five Bs and six Cs. Identify a string that ensures no loss of information. a. 4A5B6C b. A3B4C5 c. ABC345 d. 456ABC
a
Data is compressed by removing redundant information using _____ compression. a. lossless b. lossy c. irreversible d. reversible
a
For longer video clips, the time in the cue is written in the form _____. a. hh:mm:ss.ms b. hh.ms:ss c. hh.mm.ss d. ms:ss.mm:hh
a
Identify an animation property that repeats the animation being played without stopping. a. animation-iteration-count = infinite b. animation-timing-function = ease c. animation-play-state = running d. animation-delay = time
a
In the context of HTML audio and video element attributes, the preload attribute's type _____ is used to preload only descriptive data about a particular clip. a. metadata b. descriptions c. auto d. captions
a
In the element <track kind="type" src="url" label="text" srclang="lang" />, the _____ attribute defines the track category. a. kind b. label c. srclang d. src
a
Pete wants to change the appearance of the player against the page background when the video is playing on the web page. He wants the page background to show via see-through colors in the player. Which of the following values of the wmode parameter must he include in the code to accomplish this? a. transparent b. showall c. exactfit d. autohigh
a
When animating objects with CSS, the key frame values 0% and 100% can be replaced with the keywords _____. a. from and to b. first and last c. start and end d. open and close
a
Which of the following Flash player parameters recognizes a movie so that it can be referenced and has a value of text? a. id b. flashvar c. name d. wmode
a
Which of the following audio elements is used to embed audio clips within a web page? a. <audio src="url" attributes /> b. <audio src=attributes /> c. </audio src="url" "attributes"> d. </audio src="attributes"/>
a
Which of the following audio formats in HTML provides better sound quality, especially at lower bit rates? a. .ogg b. .mp3 c. .wav d. .aiff
a
Which of the following browsers supports all audio formats such as MP3, Advanced Audio Coding (AAC), Ogg, and WAV? a. Google Chrome b. Microsoft Internet Explorer c. Opera d. Safari
a
Which of the following browsers supports only the MPEG-4 video format? a. Safari b. Chrome c. Firefox d. Opera
a
Which of the following is true of a cue in a Web Video Text Tracks file? a. The cue is matched with specific time intervals within a media clip. b. The cue label holds the text of the cue. c. The cue lists are separated by a comma after a cue text. d. The cue times are entered in hh:ss:ms format.
a
Which of the following is true of animating objects in CSS? a. Animation creates an illusion of movement by displaying key frames in rapid succession. b. Animation is limited to two style rules defined at the initial and end states. c. Animations can be run only once as multiple images in rapid motion to a page object. d. Animations can only be run when a CSS property is being changed.
a
Which of the following set of transition properties depicts the given image? a. Initial state background: white; color: black; transition: background 4s; End state background: green; color: white; b. Initial state background: white; color: white; transition: 0s; End state background: white; color: black; c. Initial state background: white; color: white; End state background: white; color: black; transition: background 4s; d. Initial state background: green; color: white; End state background: white; color: black; transition: background 4s;
a
Which of the following timing-function keywords allows a transition to occur more rapidly at the beginning and slow down near the end? a. ease b. ease-in c. ease-out d. ease-in-out
a
_____ are windows that are embedded within a web page that displays the content of another page or Internet resource. a. Inline frames b. Key frames c. Framesets d. Frame vectors
a
_____ compress data so that it can be transmitted in a fast and efficient manner and then decompress it when it is to be read or played back. a. Codecs b. Bitmaps c. Add-ons d. Tokens
a
_____ is an HTML5 audio and video player with support for Flash and Microsoft Silverlight. a. MediaElement.js b. Projekktor c. Flowplayer d. Video.js
a
The animation property _________ sets the length of an animation in seconds or milliseconds.
animation-duration = time
It starts the performance of a media clip as soon as it is loaded by the browser.
autoplay
Ryan wants a particular embedded media clip to automatically restart when it has finished playing. Which of the following HTML audio and video element attributes must Ryan include in his code to accomplish this? a. src b. loop c. controls d. preload
b
The cue attribute _____ places a cue vertically within the video window, where value ranges from 0% (top) to 100% (bottom). a. position:value b. line:value c. vertical:type d. size:value
b
The styles for the _____ pseudo-element are limited to the background, color, font, opacity, outline, text-decoration, text-shadow, visibility, and white-space properties. a. kind b. cue c. embed d. iframe
b
Which of the following MIME types is supported by Advanced Audio Coding (AAC) file format embedded in an HTML page? a. .wav b. .m4a c. .dvf d. .ogg
b
Which of the following is true of the default attribute when adding text tracks to a video file? a. It enables all the available tracks by marking them as default. b. It enables the active track by marking it with the default attribute. c. The default attribute is not required when there is a single track available. d. The default attribute is not required when there are multiple tracks available.
b
Which of the following languages is used to set the width of a media player, add borders, drop shadows, and apply filters and transformations to the media player's appearance? a. Ruby b. CSS c. PHP d. Perl
b
Which of the following structures is the format of a Web Video Text Tracks file? a. WebVTT cue1 cue2 ... b. WEBVTT cue1 cue2 ... c. WVtt cue1 cue2 ... d. WVTT cue1 cue2 ...
b
Colin has created a web page that supports multiple audio sources. However, he is unsure if the browsers used by his clients will support the audio format he has included. Which of the following must he include in the code to notify the clients about any browser upgradation required to play an audio file? a. cue label b. text track c. fallback option d. kind attribute
c
In the accompanying figure of graphing the transition timings, the vertical axis measures the progress of the transition toward completion and the horizontal axis measures the duration. Which of the following graphs labelled A, B, C, and D represents the ease-in-out timing? a. A b. D c. B d. C
c
In the accompanying figure, the value of the timing-function is _____. a. alternate-reverse b. linear-backwards c. ease-out d. ease-in
c
In the context of HTML audio and video element attributes, the _____ attribute's type includes auto, none, and metadata. a. autoplay b. muted c. preload d. loop
c
Once an audiovisual aid has been stored within a container file, a _____ is required to decode and play that content. a. bitmap b. command prompt c. media player d. clipboard
c
Ria is creating a website that includes videos. She wants to apply subtitles to the video clip and arrange the text horizontally within the cue. Which of the following cue attributes should she include in the code to accomplish this? a. position:value b. line:value c. align:value d. size:value
c
Ryan wants to embed the audio clip within the page, but he does not want the browser's native media player to show up. Which of the following HTML audio and video element attributes will help Ryan accomplish this? a. autoplay b. loop c. controls d. preload
c
Which of the following is true of the plug-in approach to deliver multimedia content? a. A common plug-in is available across all browsers, operating systems, and devices. b. Plug-ins are reliable and secure. c. A plug-in requires users to install a separate application in addition to their web browsers. d. Plug-ins consume valuable system resources, resulting in fast and reliable performance.
c
Which of the following timing-function keywords allows a transition to occur at a constant rate and then slow down toward the end? a. alternate-reverse b. linear-backwards c. ease-out d. ease-in-out
c
It is a brief text description that is synced to specified time points within the media clip.
captions
Identify the kind attribute that is a default translation of a dialog from a media clip whose language is specified in the srclang attribute. a. descriptions b. chapters c. captions d. subtitles
d
Pete wants to set the playback quality parameter of the movie where the display quality of the video is favored over the playback speed. Which of the following values of the quality parameter must he apply to accomplish this? a. low b. true c. false d. high
d
Ryan wants to embed an audio clip within the web page he is creating. Which of the following snippets must he include to embed an audio element in the web page along with the source and the type files? a. <audio controls> <source src="cp_overture.wav" type="audio/ogg"/> </audio> b. <audio controls> <source src="cp_overture.ogg" type="audio/.mp4"/> </audio> c. <audio controls> <source src="cp_overture.m4a" type="audio/ogg"/> </audio> d. <audio controls> <source src="cp_overture.aac" type="audio/mp4"/> </audio>
d
The cue attribute _____ sets the width of a cue as the percentage of the width of a video window. a. position:value b. line:value c. align:value d. size:value
d
The value of the kind attribute that provides long explanations synced to specified time points within a media clip is _____. a. metadata b. captions c. srclang d. descriptions
d
The video codec used for the Ogg video format is _____. a. H.264 b. VP9 c. Truespeech d. Theora
d
Which of the following is true of a transition? a. It is a quick and instantaneous process and does not involve any steps in between to provide the styles. b. It is an event initiated automatically by a browser. c. It retains an object's style from the initial state till the ending state. d. It slows down the change to an object's style and provides intermediate styles.
d
It contains text values that are passed to the player to control the behavior and the content of a movie.
flashvar
This attribute specifies that the audio output should be suppressed.
muted
The Flash player can act as a fallback for older browsers that do not support HTML5 by nesting the _________ element within the audio or video element.
object
The _________ element, which replaced the embed element, is used for any type of content such as sound, video clips, graphic images, PDF files, and even the content of other web pages.
object
A _________ is a software program accessed by a browser to provide a feature or capability nonnative to the browser.
plug-in
This attribute is applied to the video element to define a video's preview image.
poster
It is nested within a single audio section to provide several versions of the same media file.
source element
When embedding an audio element in a web page, the _________ attribute informs a browser of the file type and speeds up the process of choosing a compatible audio source.
type