ホーム>Web デザインのチュートリアル>HTMLチュートリアル

HTML5ビデオ字幕の使用方法と作成方法

著者：Eve Cole 更新時間：2025-02-25 21:32:02

HTML5 では、要素を使用してビデオの字幕を指定できます。この要素のさまざまなプロパティを使用すると、追加するコンテンツの種類、言語、そしてもちろん実際の字幕情報を含むテキスト ファイルへの参照などを指定できます。

 <video id=videoコントロール> <source src=./step.mp4 type=video/mp4> <track label=中文字幕kind=subtitles Chaptersメタデータ srclang=zh src=./caption.vtt default> <track label=ABC kind=subtitles srclang=de src=./caption1.vtt> <track label=Number kind=subtitles srclang=es src=./caption2.vtt> </video>
トラック プロパティの概要:

  • kind には、ファイルに含まれるコンテンツのタイプを示す値subtitleが割り当てられます。
  • ラベルには、この字幕セットが記述されている言語 (英語やドイツ語など) を示す値が与えられます。これらのラベルはユーザー インターフェイスに表示され、ユーザーが字幕を表示する言語を簡単に選択できるようになります。
  • src には、それぞれの場合に、関連する WebVTT 字幕ファイルを指す有効な URL が割り当てられます。
  • srclang は、各字幕ファイルのコンテンツが存在する言語を示します。
  • デフォルト属性は English 要素に設定され、これが字幕がオンになっており、ユーザーが特定の選択を行っていない場合に使用されるデフォルトの字幕ファイル定義であることをブラウザに示します。
WebVTT 字幕ファイル

実際の字幕データを含むファイルは、指定された形式 (この場合は Web Video Text Track (WebVTT) 形式) に従った単純なテキスト ファイルです。 WebVTT プラグインの仕様はまだ開発中ですが、主要な部分は安定しているため、今日から使用できます。

Blender Foundation などのビデオ プロバイダーは、ビデオの字幕とサブタイトルをテキスト形式で提供しますが、通常は SubRip Text (SRT) 形式で提供されます。これらは、srt2vtt などのオンライン コンバータを使用して WebVTT に変換できます。

ファイル形式の仕様:

ファイル拡張子は ==.vtt== です。

==.vtt==ファイルの MIME タイプは text/vtt です

Chrome および Firefox ブラウザでは、.vtt 字幕を何の問題もなく読み込んで表示できます。ただし、IE10 以降のブラウザでは、.vtt 字幕もサポートされていますが、MIME タイプを定義する必要があります。定義されていない場合、WebVTT 形式は無視されます。より簡単な方法は、字幕が配置されているフォルダーの下に .htaccess ファイルを追加し、その中に AddType text/vtt .vtt を書き込むことです。

// ファイルの先頭で ==WEBVTT== を宣言する必要があります

WEBVTT

//開始時間-->終了時間、単位はミリ秒

00:00:00.001 --> 00:00:03.000

// 上記時刻に対応した字幕を表示します。aaはクラス名と同様に別途設定できます。

<v aa>ナイン ネザー インリン 1111</v>

00:00:03.001 --> 00:00:06.000

<v bb>神と悪魔 2222</v>

00:00:06.001 --> 00:00:09.000

私の血の体で 3333

00:00:09.001 --> 00:00:12.000

犠牲 4444

00:00:12.001 --> 00:00:15.000

三命と七命 5555

字幕CSSスタイル設定

::cue 疑似要素は、定義されたキューに一致するため、スタイル設定の目的で個々のテキスト トラック キューをターゲットにするための鍵となります。テキストヒントに適用できる CSS プロパティはいくつかのみです。

  • 色
  • 不透明度
  • 可視性
  • テキスト装飾
  • テキストシャドウ
  • バックグラウンド速記パフォーマンス
  • 略記パフォーマンスの概要
  • フォント短縮属性
  • 行の高さ
  • ホワイトスペース

==注意: ::cue のキュー スタイルは現在 Chrome、Opera、Safari で動作しますが、Firefox ではまだ動作しません。 ==

WebVTT は、スタイル制御用のいくつかの HTML タグもサポートしています。一般的なタグには、sound ==v== タグ、color ==c== タグ、太字 ==b== タグ、斜体 ==i== タグ、および下線 ==u などがあります。 == タグ、==ruby== タグ、==lang== タグなど。

 //字幕のスタイルを設定します video::cue{background-color:transparent; color:white font-size:20px; line-height: 100px;}//単一行の字幕のスタイルを設定しますv[voice= aa]){ color:green;}video::cue(v[voice=bb]){ color:rgb(0, 26, 128);}
ブラウザ対応

IE

デフォルトでは、Internet Explorer 10 以降の字幕が有効になっており、デフォルト コントロールには、先ほど作成したメニューと同じ機能を提供するボタンとメニューが含まれています。デフォルト属性もサポートされています。

==注意: MIME タイプを定義しない限り、IE は WebVTT ファイルを完全に無視します。これは、AddType text/vtt .vtt== を含む適切なディレクトリに .htaccess ファイルを追加することで簡単に実行できます。

サファリ

Safari 6.1 以降では、Internet Explorer 10 以降も同様にサポートされており、利用可能なさまざまなオプションを含むメニューが表示され、ブラウザが選択できるようにする自動オプションが追加されています。

クロムとオペラ

これらのブラウザには同様の実装があり、字幕はデフォルトで有効になっており、デフォルトのコントロール セットには字幕のオンとオフを切り替える「cc」ボタンが含まれています。 Chrome と Opera は要素のデフォルトの属性を無視し、代わりにブラウザの言語を字幕の言語に一致させようとします。

要約する

上記は編集者が紹介した HTML5 ビデオ字幕の使用方法と作成方法です。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！

関連記事