HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit L Page 1 of 10
HTML 5 and CSS 3 – Illustrated, 2nd Edition
Unit L: Incorporating Video and Audio
A Guide to this Instructor’s Manual:
We have designed this Instructor’s Manual to supplement and enhance your teaching experience
through classroom activities and a cohesive chapter summary.
This document is organized chronologically, using the same heading in dark blue that you see in the
textbook. Under each heading you will find (in order): Lecture Notes that summarize the section,
Figures and Boxes found in the section, if any, Teacher Tips, Classroom Activities, and Lab Activities.
Pay special attention to teaching tips, and activities geared towards quizzing your students, enhancing
their critical thinking skills, and encouraging experimentation within the software.
In addition to this Instructor’s Manual, our Instructor’s Resources CD also contains PowerPoint
Presentations, Test Banks, and other supplements to aid in your teaching experience.
For your students:
Our latest online feature, CourseCasts, is a library of weekly podcasts designed to keep your
students up to date with the latest in technology news. Direct your students to
T
T
Ta
a
ab
b
bl
l
le
e
e
o
o
of
f
f
C
C
Co
o
on
n
nt
t
te
e
en
n
nt
t
ts
s
s
Unit Objectives
2
324: Assess Web Video and Audio
2
326: Use the video Element
3
328: Control Playback
4
330: Incorporate the source Element
5
332: Add Video Support for Older Browsers
7
334: Provide Poster and Fallback Images
8
336: Make Videos Accessible
9
338: Implement the audio Element
9
End of Unit Material
10
Glossary of Key Terms
11
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit L Page 2 of 10
U
U
Un
n
ni
i
it
t
t
O
O
Ob
b
bj
j
je
e
ec
c
ct
t
ti
i
iv
v
ve
e
es
s
s
Students will have mastered the material in Unit L when they can:
• Assess web video and audio
• Use the video element
• Control playback
• Incorporate the source element
• Add video support for older browsers
• Provide poster and fallback images
• Make videos accessible
• Implement the audio element
3
3
32
2
24
4
4:
:
:
A
A
As
s
ss
s
se
e
es
s
ss
s
s
W
W
We
e
eb
b
b
V
V
Vi
i
id
d
de
e
eo
o
o
a
a
an
n
nd
d
d
A
A
Au
u
ud
d
di
i
io
o
o
LECTURE NOTES
• Show examples of video and audio use on the web.
• Use Figure L-1 to point out that including video and audio files in a web page is similar to including
images, style sheet files, and JavaScript files.
• Demonstrate tools that allow users to manipulate videos and publish them to the web; and to upload
podcasts and self-produced music.
• Point out that video and audio can be encoded in many different ways, and new ways are constantly
being developed.
• Explain that each encoding method is a codec, which is short for coder/decoder.
• Use Table L-1 to introduce and describe the main video and audio codecs that are currently in wide
use on the web.
• Introduce the term container, explaining that because video is typically accompanied by audio, a
video stream is packaged within a container, which may also contain the accompanying audio
stream.
• Point out that most container formats can accommodate a variety of codecs, but each container is
commonly used with a particular audio codec and a particular video codec.
• Use Table L-2 to introduce and describe the common container formats that are currently popular
on the web.
• Introduce the term helper program, or plugin, as it relates to playing an audio or video file, and
explain its functionality in unpacking a container and decoding video and audio streams.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit L Page 3 of 10
TEACHER TIP
Point out the importance of clarifying to users whether a plugin is needed to fully experience your
website, and, when possible, providing a link to the appropriate software package.
• Explain that recent versions of some browsers have the ability to process and play media files within
the browser software itself. Point out that these abilities provide web developers with more control
over how media is presented and how the user interacts with the media.
• Emphasize the importance of taking extra steps to ensure that media files are available to a wide
spectrum of users.
FIGURE: L-1
TABLES: L-1, L-2
BOXES:
1. Quick Tip: For the current
state of browser video support,
see
en.wikipedia.org/wiki/HTML5_video.
CLASSROOM ACTIVITIES
1. Critical Thinking: Look at Tables L-1 and L-2. How many of the possible combinations of the
common video and audio codecs are typically used in the popular container formats? Can you speculate
why specific video and audio codecs are typically grouped together while others are not?
2. Quick Quiz:
b. T/F The Ogg container format typically uses Theora video encoding and Vorbis audio
3
3
32
2
26
6
6:
:
:
U
U
Us
s
se
e
e
t
t
th
h
he
e
e
v
v
vi
i
id
d
de
e
eo
o
o
E
E
El
l
le
e
em
m
me
e
en
n
nt
t
t
LECTURE NOTES:
• Introduce the video element, which is used to add a video to a web page.
• Point out that the src attribute corresponds to the matching attribute used with the img element.
• Introduce the term MIME type, and explain how it is used in the context of incorporating video in a
web page. Using Table L-3, provide an overview of the MIME types used as values for the type
attribute.
FIGURES: L-2, L-3, L-4
TABLE: L-3
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit L Page 4 of 10
BOXES:
1. Quick Tip: You will learn about the use and syntax of .vtt files later in this unit.
2. Quick Tip: Refer to the figures as you work through the steps to confirm code placement.
3. Trouble: If your browser displays a message saying that some web page items are blocked, follow the
steps provided to allow the blocked content.
4. Trouble: If Play is not a menu option in Safari, click Show Controls,
then click the Play button.
CLASSROOM ACTIVITIES
1. Quick Quiz:
2. Critical Thinking: Look at type values in Table L-3. Why do you think a standardize system of MIME
types exists? What problem(s) does the system solve?
LAB ACTIVITY
1. Ask students to add a video to their personal web page. The video may be one they created
themselves on a camcorder or phone, or may be taken from another web page. However, be sure to
point out that some videos are copyrighted and/or have license issues, and that students should ask
web page owners’ permission before posting a video downloaded from another site onto their own
web page.
3
3
32
2
28
8
8:
:
:
C
C
Co
o
on
n
nt
t
tr
r
ro
o
ol
l
l
P
P
Pl
l
la
a
ay
y
yb
b
ba
a
ac
c
ck
k
k
LECTURE NOTES
• Explain that the video element supports several attributes. Use Table L-4 to review the attributes
and the usage of each.
• Explain that the presence of the controls attribute within a video element instructs browsers to
add their default controls to the video element, enabling user control over actions like playing and
pausing content and adjusting audio volume.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit L Page 5 of 10
FIGURES: L-5, L-6
TABLE: L-4
BOXES:
1. Quick Tip: XHTML requires a value for every attribute, so to add video controls in an XHTML
document, you use the code controls=”controls”.
2. Quick Tip: In some browsers, you must move the mouse pointer over the video before the controls
are displayed.
3. Including video from an external site
Uploading video to a video hosting site such as YouTube can be a shortcut to including it in your web
pages. Such sites generally display buttons that you can click to automatically generate HTML code for
any video they host and then embed that video in your web pages. This process can remove a lot of
specialized technical work from the task of adding a video to a website, while preserving your control
over the appearance of your web pages. However, many free video hosting services display
advertisements before or during videos, which is not the case with videos that you host yourself.
CLASSROOM ACTIVITIES
1. Quick Quiz:
a. T/F It is possible to use an attribute to make sure a video included in a web page is played in
e. T/F When the controls attribute is included in the video element, the user has the ability
2. Classroom Discussion: Have students discuss different situations in which each of the attributes
discussed in this section can be used. Have they encountered these behaviors in videos they have seen
on the web in the past? Did they have any issues or problems with these behaviors?
LAB ACTIVITY
1. Ask students to add playback control attributes to the video they added to their personal web site.
The decision regarding which attributes to use should be made based on the contents of the
included video and its importance for the functionality of their site. For example, a short video
3
3
33
3
30
0
0:
:
:
I
I
In
n
nc
c
co
o
or
r
rp
p
po
o
or
r
ra
a
at
t
te
e
e
t
t
th
h
he
e
e
s
s
so
o
ou
u
ur
r
rc
c
ce
e
e
E
E
El
l
le
e
em
m
me
e
en
n
nt
t
t
LECTURE NOTES
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit L Page 6 of 10
• Point out that all browsers can play MPEG-4 videos encoded with the H.264 codec, but some
browsers are optimized to play other formats more efficiently. Remind students that some users still
access the web with older browsers that support the video element but not the H.264 codec.
Explain that these factors often makes it necessary to reference multiple video files specifying the
same video in different encoding and container formats.
• Introduce the source element, explaining that multiple source elements can be nested within
the video element to specify the location and coding of multiple files.
TEACHER TIP
Point out that the source element is used only to specify multiple media resources, and does not
represent anything on its own.
FIGURES: L-7, L-8
BOXES:
1. Quick Tip: XHTML requires a closing slash in a one-sided tag, so to add a source element in an
XHTML document, you use the code <source />.
2. Encoding video in web-ready formats
If you’re developing web pages on your own, you will probably need to convert a single video
file into multiple formats. Many tools are available to handle this conversion. While some software that
simplifies and automates the process is available for purchase, some powerful tools are available free or
on a donation basis as well. These free and low-cost alternatives are often just as powerful as their more
expensive counterparts, but they may require more configuration and may not be as well documented.
If you’re working on a well-funded project with a tight deadline, purchasing software may make the
most sense; however, if you’re working within a low budget, it can be well worth your time to
CLASSROOM ACTIVITIES
1. Critical thinking: When incorporating multiple source elements within a video element, how
should you decide on the order of the source elements?
2. Quick Quiz:
3
3
33
3
32
2
2:
:
:
A
A
Ad
d
dd
d
d
V
V
Vi
i
id
d
de
e
eo
o
o
S
S
Su
u
up
p
pp
p
po
o
or
r
rt
t
t
f
f
fo
o
or
r
r
O
O
Ol
l
ld
d
de
e
er
r
r
B
B
Br
r
ro
o
ow
w
ws
s
se
e
er
r
rs
s
s
LECTURE NOTES
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit L Page 7 of 10
• Point out that there are older browsers that do not recognize HTML5 elements, such as video and
source.
• Explain that HTML5 allows you to incorporate support for video that works for users of older
browsers while maintaining the benefits of HTML5 video for browsers that support it.
• Point out that older browsers rely on additional software, such as Adobe Flash, to play videos.
• Explain that to make a Flash video available for older browsers, you use the object and param
elements, which specify the file type and location, along with other settings defined by their
attributes.
FIGURES: L-9, L-10
TABLE: L-5
BOXES
1. Quick Tip: Check the documentation for a helper program to identify which param names and
values it requires.
2. Trouble: If no video is displayed, check
that your browser has Flash Player installed by visiting
adobe.com/software/flash/about/; if
Flash Player is not installed, follow the instructions to install it,
then refresh events.html.
CLASSROOM ACTIVITIES
1. Classroom Discussion: Have students discuss their experiences with using older browsers. Have they
had problems playing media files on these browsers? How, if at all, did they fix the problems?
2. Quick Quiz:
b. T/F A param element can only define one parameter related to the external resource in the
LAB ACTIVITY
1. Ask students to add support for older browsers to the video they added to their personal web site.
Students should explain their choice of application type and selection of parameters to include in
the param elements.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit L Page 8 of 10
3
3
33
3
34
4
4:
:
:
P
P
Pr
r
ro
o
ov
v
vi
i
id
d
de
e
e
P
P
Po
o
os
s
st
t
te
e
er
r
r
a
a
an
n
nd
d
d
F
F
Fa
a
al
l
ll
l
lb
b
ba
a
ac
c
ck
k
k
I
I
Im
m
ma
a
ag
g
ge
e
es
s
s
LECTURE NOTES:
• Explain that before a user chooses to play a video, the first frame of the video is displayed by
default.
• Introduce the term poster image, which is an image displayed before the video is played. Point out
that this is customizable.
• Provide an overview of the syntax for providing a poster image using the poster attribute.
FIGURES: L-11, L-12
CLASSROOM ACTIVITIES
1. Critical Thinking: The video element does not support an alt attribute. Think of a way to create
an alternative for the alt attribute, which can be seen when the video cannot be rendered.
2. Classroom Discussion: Have students discuss the criteria for selecting a fallback image. What kind of
information should the fallback image display?
3
3
33
3
36
6
6:
:
:
M
M
Ma
a
ak
k
ke
e
e
V
V
Vi
i
id
d
de
e
eo
o
os
s
s
A
A
Ac
c
cc
c
ce
e
es
s
ss
s
si
i
ib
b
bl
l
le
e
e
LECTURE NOTES:
• Explain that providing text content to accompany a video can make the video accessible to a wider
range of users.
• Introduce the term captions, and explain that captions provide access to the audio track for users
who are deaf or hard of hearing.
• If you have access to a streaming video service that provides subtitles, such as YouTube or Netflix,
show a brief clip with the subtitles turned on to familiarize students with how they work.
• Introduce the term descriptions, and explain that descriptions provide access to the visual portion of
a video for users who are blind or have low sight.
• Point out that descriptions explain in words what is happening in the video and can be read by a
screen reader.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit L Page 9 of 10
FIGURES: L-13, L-14, L-15
TABLE: L-6
BOXES:
1. Quick Tip: In a WebVTT file, all times must include
2 digits for minutes followed by a colon, 2
digits for seconds followed by a period, and 3 digits for fractions of a second. They can also start with 2
digits for hour followed by a colon.
2. Quick Tip: You can use screen reader software to test text descriptions.
3. Trouble: At the time this book was written, Firefox did not support captions, no browsers supported
captions when files were opened from the local file system, and IE required additional server
configuration to display them. If necessary, open events.html from a web server in Chrome or Safari,
then repeat Step 8.
CLASSROOM ACTIVITIES
1. Quick Quiz:
b. __________consist of text that is overlaid on the video image and describes the audio portion.
2. Classroom Discussion: Which aspects of a video are important to capture in captions? Which aspects
are important to capture in descriptions?
3. Critical Thinking: Are there aspects of a video that should be captured in both captions and
descriptions, or are they mutually exclusive? Why is this the case?
3
3
33
3
38
8
8:
:
:
I
I
Im
m
mp
p
pl
l
le
e
em
m
me
e
en
n
nt
t
t
t
t
th
h
he
e
e
a
a
au
u
ud
d
di
i
io
o
o
E
E
El
l
le
e
em
m
me
e
en
n
nt
t
t
LECTURE NOTES:
• Introduce the audio element, which is used to add audio to a web page.
• Point out that the audio element makes use of the same attributes as the video element and may
include nested source elements for source files in multiple formats.
• Use Table L-7 to provide an overview of the MIME type for the most common audio file formats.
• Point out that an audio element is invisible on a web page unless controls are displayed, so it is
almost always a good idea to display the controls.
FIGURES: L-16, L-17, L-18
TABLE: L-7
BOXES:
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit L Page 10 of 10
1. Quick Tip: Because the controls that each browser displays can vary in dimensions, you should not
specify height or width for the audio element.
CLASSROOM ACTIVITIES
1. Quick Quiz: The MIME type of an audio element is defined using the _____ attribute. (type)
2. Quick Quiz:
a. T/F Any browsers that can render the video element can also render the audio element.
E
E
En
n
nd
d
d
o
o
of
f
f
U
U
Un
n
ni
i
it
t
t
M
M
Ma
a
at
t
te
e
er
r
ri
i
ia
a
al
l
l
•
•
•
Concepts Review – Includes screen identification, multiple choice, and matching questions.
•
•
•
Skills Review – Provides additional hands-on exercises that mirror the progressive style of the
lesson material.
•
•
•
Independent Challenges 1, 2 and 3 – Case projects that require critical thinking and application of
the unit skills. The Independent Challenges increase in difficulty, with the first being the easiest
(with the most step-by-step detailed instructions). Independent Challenges 2 and 3 become
increasingly more open-ended.
G
G
Gl
l
lo
o
os
s
ss
s
sa
a
ar
r
ry
y
y
o
o
of
f
f
K
K
Ke
e
ey
y
y
T
T
Te
e
er
r
rm
m
ms
s
s
• AAC (324)
• captions (336)
• codec (324)
• container (324)
• cues (336)
• descriptions (336)
• encoding (324)
• fallback image (334)
• Flash Video (324)
• H.264 (324)
• helper program (324)
• MIME type (326)
• MP3 (324)
• MPEG-4 (324)
• Ogg (324)
• Opus (324)
• plugin (324)
• poster image (334)
• stream (324)
• Theora (324)
• Vorbis (324)
• VP8 (324)
• VP9 (324)
• WebM (324)
• WebVTT (336)
Top of Document