HTML and CSS Reference
In-Depth Information
information for free, so we get “write once, read everywhere”
accessibility.
That's the theory. In practice, no one knows how to do this; the
spec is silent, browsers do nothing. That's starting to change; at
the time of this writing (May 2010), the WHATWG have added a
new
<track>
element to the spec, which allows addition of vari-
ous kinds of information such as subtitles, captions, description,
chapter titles, and metadata.
The WHATWG is specifying a new timed text format called
multipage/video.html#websrt
)
for this information, which is one
reason that this shadowy 29th element isn't in the W3C version
of the spec. The format of the
<track>
element is
<track kind=captions src=captions.srt>
But what can you do right now? There is no one true approach
to this problem, but here we'll present one possible (albeit
hacky) interim solution.
Bruce made a proof of concept that displays individual lines of a
transcript, which have been timestamped using the new HTML5
data-*
attributes:
<article class=transcript lang=en>
<p><span data-begin=3 data-end=5>Hello, good evening and
¬
welcome.</span>
<span data-begin=7.35 data-end=9.25>Let's welcome Mr Last
¬
Week, singing his poptabulous hit &ldquot;If I could turn
¬
back time!&rdquot;</span>
</p>
...
</article>
JavaScript is used to hide the transcript
<article>
, hook into the
timeupdate
event of the video API, and overlay spans as plain
text (therefore stylable with CSS) over (or next to) the video
element, depending on the current playback time of the video
and the timestamps on the individual spans. See it in action at
javascripted-captions/
.
See
Figure 4.6
.
