Add closed captions, subtitles, etc. to your videos

This section introduces the new HTML5 <track> element, useful for adding closed captions, subtitles, descriptions, and metadata to your videos. It comes with a new JavaScript API.

The WebVTT format used for describing a track file is also presented in this chapter.

Most of the major desktop browsers now support HTML5 captioning

Some definitions

    • closed captions describe all relevant audio present in the video (fire, rain, birds, gun fights, etc.).
    • subtitles are only for spoken words.

The accessibility features of TV programs often propose both options for people with hearing deficiencies.

TYPICAL USE: ADD A SUBTITLE/CAPTION TRACK TO A <VIDEO> ELEMENT

Important warning!!

The <track> element cannot be used with a file:// URL. Please use http:// and a Web server. Your server must use a special MIME format for the .vtt files: text/vtt;charset=utf-8 (set by default on most servers now).

Examples of the lines to add to an Apache Web server:

  1. <Files mysubtitle.vtt>
  2. ForceType text/vtt;charset=utf-8
  3. </Files>

It might be worth mentioning that most browsers work fine with WebVTT even if the MIME Type is not set, but Internet Explorer doesn’t: in fact it will ignore WebVTT entirely unless the MIME Type is set correctly!

  1. <video height=“272” width=“640”
  2.        poster=http://content.bitsontherun.com/thumbs/q1fx20VZ-640.jpg&#8221;
  3.        crossorigin=“anonymous”
  4.        controls>
  5.    <source src=http://demo.jwplayer.com/html5-report/sintel.mp4&#8221;
  6.            type=“video/mp4”>
  7.    <source src=http://demo.jwplayer.com/html5-report/sintel.webm&#8221;
  8.            type=“video/webm”>
  9.    <track src=http://demo.jwplayer.com/html5-report/sintel-captions.vtt&#8221;
  10.           kind=“captions” label=“Closed Captions” default>
  11. </video>

EXTERNAL RESOURCES (OPTIONAL, IF YOU WISH TO LEARN MORE)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s