HTML5 and CSS3, Second Edition

supported natively, but the Video.js library supports it nicely. To use it, we

create a text file of captions and cue points using a format called Web Video

Text Tracks, or Web VTT. Web VTT is supported in Internet Explorer 10,

Chrome, Opera, and Safari. Let’s try it out with one of our videos.

First we create a captions folder within our video. Then we create the file 01_blur.vtt

in that folder. This file has the cue points and the text for the caption that should

be played at that point. Building these up takes time, so here’s a finished version:

html5_video/video/captions/01_blur.vtt

WEBVTT

00:00.000--> 00:08.906

We'lldragthe existinglayerto the New buttonon the

bottomof the layerspanelto createa new copy.

00:08.906--> 00:14.167

Now we'llgo to the Filtermenuand chooseGaussianBlur.

00:14.167--> 00:22.907

We'llchangethe bluramountjustenoughso we losea

littledetailof the image.

00:22.907--> 00:33.670

Now we'lldouble-clickon the layerto editthe layer.

00:33.670--> 00:41.928

And we'llchangethe blendingmodeto overlay.Thisallows

the originallayerunderneathto showthrough.

00:41.928--> 00:48.812

We can thenadjustthe amountof the effectby changing

the opacity.

00:48.812--> 00:57.507

And now we havea slightlyenhancedimage.

This file links up the captions to parts of the video. We define a time range and

then place the text for the caption underneath each range. We can have multiline

captions as long as we don’t leave any blank lines. To make this work with the

video, we add a <track> tag inside of the <video> tag that points to this file:

html5_video/videojs_index.html

<trackkind="captions"src="video/captions/01_blur.vtt"

srclang="en-us"label="English"/>

We specify that it’s a caption and that it’s in English. We could create captions

for other languages, as well, and store those in separate files. But for this

example it’s good enough, and we can see the result in the following figure.

report erratum • discuss

Making Videos Accessible • 147

Download from Wow! eBook <www.wowebook.com>