次の方法で共有

HTML5 ビデオにキャプションを付ける

  • [アーティクル]

本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。 

【元記事】HTML5 Video Captioning 2011/10/13 7:05 AM

HTML5 は、すべての人の役に立つ Web を約束します。キャプションによってメディアのアクセシビリティを高めることは、この約束を実現するための重要な要素ですが、この分野はまだ標準化の途上にあります。

現在提案されている HTML5 track 要素を使用すると、開発者は、ビデオの会話や動作についてのテキストを含むキャプション ファイルを指定することにより、HTML5 ビデオにキャプションを追加できます。キャプションの標準化が一段落すれば、外部アドオンを利用しなくとも、より多くの人にとって楽しみやすいビデオ コンテンツを配信できるようになるでしょう。

Still image from a video showing captions

以下の HTML フラグメントで、track 要素の動作を説明します。

<video>

<source type="video/mp4" src="video_file" >

<track src="captions_file" label="English captions" kind="captions" srclang="en-us" default >

<track src="descriptions_file" label="English description" kind="descriptions" srclang="en-us" >

</video>

W3C HTML5 仕様では、複数のキャプション フォーマットが認められています。Windows Developer Preview に含まれる Internet Explorer 10 は <track> 要素をサポートしていますが、現在はまだ、キャプション ファイルのダウンロードや表示はできません。そこで、現状の実装を使用して、複数のキャプション フォーマットをサポートするプロトタイプを作成しました。

昨年の W3C TPAC 会議において、メディアアクセシビリティが議題に上り、HTML5 でサポートすべきアクセシビリティの要件が提案されました。そして最近、Web のキャプション手法についてさらに検討するために、Web Media Text Tracks コミュニティグループが設立されました。

HTML5 の最終仕様が決定されるのはまだ先のことになりますが、仕様は固まりつつあります。<track> とキャプション ファイル フォーマットに関して、より良いフィードバックを提供するため、Internet Explorer のチームと TWC Accessibility のチームが共同で、<track> 要素を使用してキャプションや説明をビデオに表示するプロトタイプを作成しました。

より多くのフィードバックを得るには複数のフォーマットを使用するテスト シナリオが望ましいため、このデモでは、TTML-1.0 と WebVTT の両方を使用できるようにしています。WebVTT は、キャプションを簡単にオーサリングする手段の必要性が認められた結果、昨年 W3C のディスカッションをもとに策定されました。TTML は、既に確立された、豊富な機能を持つビデオ キャプション用の標準で、Adobe Flash および Microsoft Silverlight でサポートされています。TTML は、Netflix や Hulu などの、ブロードキャスト コンテンツを表示するサイトで使用されています。

Screen shot of the prototype that displays TTML and WebVTT video captions and descriptions

このプロトタイプでは、ビデオと track 要素を使用して、TTML および WebVTT フォーマットを利用して、ビデオ再生時にキャプションや説明を表示する方法を紹介しています。このプロトタイプは、HTML5 対応のすべてのブラウザーをサポートしています。

HTML5 Labs サイトで、このプロトタイプを体験できます。[ソースの表示]、またはご使用のブラウザーの開発者ツールを使用して、TTML および WebVTT フォーマットの構文を解析する JavaScript をご覧ください。

皆様のご意見、ご感想をお待ちしています。

—Frank Olivier、Internet Explorer シニア プログラム マネージャー