Smart Communication Design Company
ホーム > ナレッジ > Blog > Web標準Blog > 2010年1月 > HTML5でアクセシブルな字幕付きビデオを

Web標準Blog

Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。

2010年1月15日

HTML5でアクセシブルな字幕付きビデオを

フロントエンド・エンジニア 矢倉

OperaでWebエバンジェリストを努めるBruce Lawsonが、「アクセシブルなHTML5のビデオ」という記事を実装方法とともに紹介しています。

videoのアクセシビリティ

video要素やaudio要素のアクセシビリティは、動画や音声にデータとして情報を含む事が望ましいとされています。ただ、それが難しい場合のことを考えて、このデモではビデオの字幕をページ内に記述し、それをビデオの上に重ねるという手法で字幕を表示させています(JavaScriptが有効でない環境では、トランスクリプトが表示されます)。

タイムシートはカスタムデータ属性で

さて、ビデオの内容もそうなのですが、このデモでなによりユニークなのはタイムシート情報をキャプションを囲むspan要素に持たせているところです。

HTML5にはアプリケーション作者や文書作成者が独自の情報を埋め込める「カスタムデータ属性」が用意されており、デモではこれを利用しキャプションに対応する動画の開始時間と終了時間を埋め込んでいます。

カスタムデータは、data-***というかたちで要素に埋めこめます。デモのソースコードを抜き出してみましょう。

<span data-begin=1 data-end=6>Hi, my name's Dr Archimedes Einstein ...
<span data-begin=6 data-end=9>in a very famous town that you're too ...
<span data-begin=9.5 data-end=11.5>Anyway, today we're going to talk ...
<span data-begin=12 data-end=15>A lot of people are worried about ...

HTML5では、埋め込んだ情報はelement.datalist.***から取得できると定義されているので、この場合はspan.datalist.begin/span.datalist.endでデータにアクセスできる事になります。しかし、現時点でこのカスタムデータ属性を実装しているブラウザーがないことから、デモでは属性の名前から値をとっています。

そして、取得したデータに該当する再生時間になったら、キャプションを表示する箇所にそのテキストを挿入するという仕組みです。

videoのアクセシビリティやカスタムデータ属性についてはまだ議論中なのですが、とても面白いデモだなと思いました。