HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでテキストトラックの種類を指定する方法｜kind属性の使い方とサンプルコード

HTMLでテキストトラック（text track）の種類を指定するには、<track>要素に用意されているkind属性を使用します。例えば、字幕ファイルを読み込む場合は、kind属性の値として「subtitles」を設定します。

kind属性で指定できる主な値

kind属性には、テキストトラックの用途に応じて以下のような値を指定できます。

  • subtitles … 字幕（映像のセリフなどを翻訳・表示する場合）
  • captions … キャプション（効果音や話者情報も含めた補助的な文字情報）
  • descriptions … 映像の内容を音声で説明するための記述
  • chapters … 章タイトルなどナビゲーション用の情報
  • metadata … 表示目的ではないスクリプト向けのメタデータ

実装サンプル

以下のコードは、kind属性を使って英語とロシア語の字幕トラックを動画に追加する例です。実際にブラウザで動作を確認してみてください。

<!DOCTYPE HTML>
<html>
   <body>

      <video width = "300" height="200" controls autoplay>
         <source src = "/html5/foo.ogg" type = "video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         <track src = "subtitles_en.vtt" kind = "subtitles" srclang = "en" label = "English">
         <track src = "subtitles_ru.vtt" kind = "subtitles" srclang = "ru" label = "Russia" default>
         お使いのブラウザはvideo要素に対応していません。
      </video>

   </body>
</html>

ポイント解説

上記のサンプルでは、2つの<track>要素を使って複数言語の字幕を登録しています。srclang属性でトラックの言語を、label属性でプレイヤーに表示されるラベル名を指定しています。また、2つ目のトラックにはdefault属性が付いているため、この字幕が初期状態で有効になります。

字幕データはWebVTT形式（拡張子 .vtt）で作成するのが一般的です。対応していないブラウザでは字幕が表示されない点にも注意しましょう。

  1. HTML DOM Trackオブジェクトとは？主要プロパティと使い方を実例付きで解説

    HTML DOM Trackオブジェクトとは HTML DOM の Track オブジェクトは、HTML の <track> 要素を JavaScript から操作するためのインターフェースです。<track> 要素は、動画に対して字幕（subtitles）やキャプション（captions）などのテキストトラックを関連付ける際に使用されます。 <track> 要素の作成方法 JavaScript で新しい <track> 要素を作成するには、document.createElement() メソッドを使用します。 var trackObject

  2. HTML DOM Track kind プロパティの使い方と種類を徹底解説

    HTML DOM Track kind プロパティとは HTML DOM の kind プロパティは、<track> 要素の kind 属性の値を取得・設定するためのものです。この属性を使うことで、動画や音声ファイルに関連付けるテキストトラックの種類（字幕やキャプションなど）を指定できます。 構文 kind プロパティの値を取得する場合は以下のように記述します。 trackObject.kind kind プロパティに新しい値を設定する場合は次のとおりです。 trackObject.kind = stringValue stringValue に指定できる値の一覧 「strin