Widely available すべての主要ブラウザで対応済み。安心して使用可能。
メディア Widely available

Text tracks

TextTrack API と <track> 要素により、<video>/<audio> に字幕、キャプション、チャプター等のテキストトラックを追加します。

メディア

概要

TextTrack API と <track> 要素により、<video>/<audio> に字幕、キャプション、チャプター等のテキストトラックを追加します。

対応ブラウザ

デスクトップ

Chrome 23+
Edge 12+
Safari 6+
Firefox 31+

モバイル

Chrome Android 25+
Safari iOS 6+
Firefox Android 31+

基本構文

HTML 
<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subs-ja.vtt" kind="subtitles" srclang="ja" label="日本語" default>
  <track src="subs-en.vtt" kind="subtitles" srclang="en" label="English">
</video>

実務での使いどころ

  • Text tracks の活用

    テキストトラック。字幕、キャプション、説明をメディアに追加するAPI。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク