0Pricing
HTML Academy · レッスン

trackとWebVTTによる字幕

trackと.vttファイルで動画にキャプションと字幕を追加します

「trackとWebVTTによる字幕」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

キャプションと字幕

動画のアクセシビリティには、音声コンテンツのテキストによる代替手段が必要です。

  • 字幕 — 会話を書き起こしたもので、視聴者が音を聞けることを前提とします
  • キャプション — 会話と音の説明を含みます（聴覚障害者向け）
  • 音声解説 — 視覚障害者のために映像の内容を説明します

track要素

<track>要素は、字幕またはキャプションのファイルを動画に関連付けます。

<video controls>
  <source src="tutorial.mp4" type="video/mp4">
  <track
    src="tutorial-en.vtt"
    kind="subtitles"
    srclang="en"
    label="English"
    default
  >
  <track
    src="tutorial-es.vtt"
    kind="subtitles"
    srclang="es"
    label="Spanish"
  >
</video>

track属性

track要素の属性：

  • src — VTTファイルへのパス
  • kind — トラックの種類（subtitles、captions、descriptions、chapters、metadata）
  • srclang — BCP 47言語コード（en、es、frなど）
  • label — CCメニューに表示する、人が読める名前
  • default — 真偽値。デフォルトでこのトラックを表示します

WebVTT形式

WebVTT（Web Video Text Tracks）は、字幕ファイルの形式です。

WEBVTT

00:00:01.000 --> 00:00:04.000
Hello and welcome to the HTML5 tutorial.

00:00:04.500 --> 00:00:08.000
In this lesson, we'll cover the video element
and how to add subtitles.

00:00:09.000 --> 00:00:12.000
[Keyboard click sounds]
Let's look at a code example...

VTTキュー識別子

VTTキューには、オプションの識別子を付けられます。

WEBVTT

intro-1
00:00:01.000 --> 00:00:04.000
Welcome to the tutorial.

intro-2
00:00:04.500 --> 00:00:08.000
We'll cover HTML5 video today.

00:00:09.000 --> 00:00:12.000
No identifier on this cue — that is fine.

VTTキュー設定

VTTキューでは、位置に関する設定を指定できます。

WEBVTT

00:00:01.000 --> 00:00:04.000 position:10% align:left
This text is positioned at the left.

00:00:05.000 --> 00:00:08.000 line:10%
This text appears near the top.

00:00:09.000 --> 00:00:12.000 size:50% position:75%
A smaller caption on the right.

CSSによるWebVTTキューのスタイル設定

::cue疑似要素でキューボックスのスタイルを設定します。

/* Style all cues: */
::cue {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 1.2rem;
  font-family: 'Arial', sans-serif;
  padding: 0.2em 0.5em;
  border-radius: 4px;
}

/* Style specific voice tags: */
::cue(v[voice="Teacher"]) {
  color: #60a5fa;
}

trackのkindの値

kind属性は、テキストトラックの目的を指定します。

  • subtitles — 会話の翻訳または書き起こし
  • captions — 聴覚障害者向けの会話と音の説明
  • descriptions — 視覚障害者向けの映像内容の音声解説
  • chapters — ナビゲーション用のチャプタータイトル
  • metadata — JavaScriptで利用する機械可読データ

チャプタートラック

動画のチャプターナビゲーションにはkind=chaptersを使用します。

<track
  kind="chapters"
  src="chapters.vtt"
  srclang="en"
  label="Chapters"
>

<!-- chapters.vtt: -->
<!--
WEBVTT

00:00:00.000 --> 00:01:30.000
Introduction

00:01:30.000 --> 00:05:00.000
HTML Document Structure

00:05:00.000 --> 00:10:00.000
Forms and Input
-->

JavaScript TextTrack API

TextTrack APIでトラックデータにアクセスします。

const video = document.getElementById('tutorial');
const tracks = video.textTracks;

// Enable a track:
tracks[0].mode = 'showing';  // 'hidden', 'showing', or 'disabled'

// Listen for active cue changes:
tracks[0].addEventListener('cuechange', function() {
  const cue = this.activeCues[0];
  if (cue) console.log('Current cue:', cue.text);
});

インタラクティブ動画用メタデータトラック

メタデータトラックを使うと、特定の時刻にJavaScriptイベントを発生させられます。

<track kind="metadata" src="interactive.vtt" id="meta-track">

<script>
video.textTracks[0].mode = 'hidden';
video.textTracks[0].addEventListener('cuechange', function() {
  const cue = this.activeCues[0];
  if (cue) {
    const data = JSON.parse(cue.text);
    // Trigger quiz, show annotation, etc.
    showAnnotation(data);
  }
});
</script>

アクセシビリティ要件

WCAGでは、録画済み動画にキャプションを付けることが求められます。

  • レベルA — 音声を含むすべての録画済み動画にキャプションを付けます
  • レベルAA — すべての録画済み動画に音声解説を付けます
  • 自動生成されたキャプション（YouTube）は、確認なしでは不十分です
  • キャプションは正確で、同期され、完全でなければなりません

クイックチェック

subtitlesとcaptionsというtrackの種類には、どのような違いがありますか。

まとめ：trackとWebVTT

字幕とキャプションの必須事項：

  • video内に<track src kind srclang label default>を記述します
  • kind：subtitles、captions、descriptions、chapters、metadata
  • WebVTTファイル形式：WEBVTT + timestamp --> timestamp + text
  • ::cue CSS疑似要素でキューのスタイルを設定します
  • WCAGでは、録画済み動画にキャプションを付けることが求められます

よくある質問

「trackとWebVTTによる字幕」レッスンは無料ですか？

はい。「trackとWebVTTによる字幕」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「trackとWebVTTによる字幕」で何を学びますか？

trackと.vttファイルで動画にキャプションと字幕を追加します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「trackとWebVTTによる字幕」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. audio要素のsrc controls loop autoplay
  2. video要素とアスペクト比
  3. 複数形式に対応するsource要素
  4. trackとWebVTTによる字幕
← HTML Academyに戻る