视频

可访问性的重要性

可访问性不是一个特性。缺少了字幕和描述,有视力或听力障碍的用户根本无法去了解一个视频。相比糟糕的用户体验,添加此类内容花费的时间不算什么。所以,为所有用户都提供一个基本的用户体验吧。

引入字幕来增加可访问性

利用轨道元素(track element)添加字母或描述来增加媒体在移动设备上的可访问性。.

谨记

  • Chrome for Android,iOS Safari 和当前所有的桌面浏览器都支持轨道元素,除了火狐(参看 caniuse.com/track)。可以用填充物(polyfills)替代,我们推荐 Playr 或者 Captionator

使用了轨道元素后,字幕看起来是这样的:

Screenshot showing captions displayed using the track element in Chrome on Android

添加轨道元素

为视频添加字幕很简单,就是添加一个轨道元素作为视频元素的子节点。

    <video controls>
        <source src="chrome.webm" type="video/webm" />
        <source src="chrome.mp4" type="video/mp4" />
      <track src="chrome-subtitles-en.vtt" label="English captions"
             kind="captions" srclang="en" default>
      <p>浏览器不支持video元素</p>
    </video>
    
查看完整示例

轨道元素的 src 属性提供了轨道文件的位置。

在轨道文件中定义字幕

轨道文件使用 WebVTT 格式描述时间的开始

WEBVTT

00:00.000 --> 00:04.000
Man sitting on a tree branch, using a laptop.

00:05.000 --> 00:08.000
The branch breaks, and he starts to fall.

...

除非另有说明,本网页的内容采用知识共享署名3.0许可和代码示例都基于Apache2.0许可。如需详细资讯,请参阅我们的网站政策

回到顶部