HTML and CSS Reference
In-Depth Information
This puts the subtitle text “Luftputefartøyet mitt er fullt av ål”
over the video starting at 11 seconds from the beginning, and
removes it when the video reaches the 13 second mark (not 13
seconds later).
No browser currently supports WebVTT or <track> but there are
a couple of polyfills available. Julien Villetorte (@delphiki) has
written Playr
(
www.delphiki.com/html5/playr/
)
, a lightweight
script that adds support for these features to all browsers that
support HTML5 video (
Figure 4.6
).
FIguRE 4.6
Remy reading
Shakespeare's Sonnet 155,
with Welsh subtitle displayed
by Playr.
WebVTT also allows for bold, italic, and colour text, vertical text
for Asian languages, right-to-left text for languages like Arabic
and Hebrew, ruby annotations (see Chapter 2), and positioning
text from the default positioning (so it doesn't obscure key text
on the screen, for example), but only if you need these features.
The format is deliberately made to be as simple as possible, and
that's vital for accessibility: If it's hard to write, people won't do it,
and all the APIs in the world won't help video be accessible if
there are no subtitled videos.
Let's also note that having plain text isn't just important for
people with disabilities. Textual transcripts can be spidered by
search engines, pleasing the Search Engine Optimists. And, of
course, text can be selected, copied, pasted, resized, and styled
with CSS, translated by websites, mashed up, and all other kinds
of wonders. As Shakespeare said in Sonnet 155, “If thy text be
selectable/'tis most delectable.”
NoTE
Scott Wilson's
VTT Caption Creator
with-html5-video/
)
is a utility that
can help author subtitles to be
used as standalone HTML, or a
W3C Widget.
