HTML and CSS Reference
In-Depth Information
Figure 7-12.
Internet usage compared with U.S. access needs
While it's a small portion of the overall market, we shouldn't leave these users out from online experiences.
The Web should be for everyone! Another possible way you can leverage the subtitles is to include relevant data as the
video is playing. Think about gearing offers based on location and adding localized directions via the subtitle text.
A benefit of using subtitles and captions is that they're searchable, so content providers and publishers will benefit from
the SEO increases as well. The WebVTT file outlines a description file for a video to parse and gathers the information
that it should preset on-screen as playback is happening. Listing 7-8 demonstrates the WebVTT file format.
Listing 7-8.
WebVTT Example
WEBVTT FILE
0:00:00.000 --> 0:00:02.000
<b>Hello, World!</b>
0:00:03.040 --> 0:00:06.920 T:60% A:middle
Just <i>dropping</i> by to say <i>HELLO!</i>
In this code, a sample WebVTT file shows on-screen text while video playback is occurring. As you can see,
between the times of 0 seconds and 2 seconds, the words “Hello, World” will appear in bold text. Using some basic
HTML tags for bolding, italicizing, and underlining as well as using a positioning of
middle
, you can really add some
flavor to the subtitle content. The current specification allows for horizontal text position, alignment, and vertical
line position. You can even use CSS to style the captions to your liking using a new pseudo element called
cue
.
See Listing 7-9 to learn more about how to implement the
cue
element in CSS.
