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

HTMLでトラックテキストデータの言語を設定する方法（srclang属性の使い方）

HTMLでトラック（track）テキストデータの言語を指定するには、srclang属性を使用します。特に、動画に字幕を追加する場合にこの属性が活用されます。

srclang属性とは

srclang属性は、<track>要素で読み込むテキストデータ（字幕やキャプションなど）がどの言語で書かれているかを示すためのものです。値には「en」（英語）や「ru」（ロシア語）などの有効なBCP 47言語タグを指定します。字幕（kind="subtitles"）を使用する場合、この属性の指定が推奨されています。

サンプルコード

以下のコードを実行して、srclang属性の動作を確認してみましょう。

<!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>

コードのポイント

  • <video>要素内に複数の<track>要素を配置することで、言語ごとに異なる字幕ファイルを提供できます。
  • 各<track>要素には、字幕ファイルのパス（src）、種類（kind）、言語（srclang）、表示名（label）を指定します。
  • default属性を付けたトラックは、ページ読み込み時に既定で選択される字幕になります。

このようにsrclang属性を使い分けることで、多言語対応の字幕を簡単に実装でき、視聴者は自分の好みの言語を選択できるようになります。

  1. HTMLで要素の幅を設定する方法【width属性の使い方を解説】

    HTMLでは、width属性を使用することで要素の幅を設定できます。この属性は、<canvas>、<embed>、<img>、<input>、<video> などの要素と組み合わせて利用可能です。 width属性の基本的な使い方 width属性には、ピクセル単位の数値を指定します。例えば「width=300」と記述すると、要素の幅は300ピクセルに設定されます。高さを指定したい場合は、height属性を併用します。 width属性が使える主な要素 <img> … 画像の表示幅を指定 <video> … 動

  2. HTML DOM Track srcプロパティとは？構文とサンプルコードでわかりやすく解説

    Track srcプロパティとは HTML DOMのTrack srcプロパティは、<track>要素のsrc属性の値を取得または設定するためのプロパティです。src属性には、動画や音声に重ねて表示する字幕・キャプションなどのトラックファイルのURLを指定します。 構文 src属性の値を取得する場合 trackObject.src トラックファイルのURLを表す文字列値が返されます。 src属性に値を設定する場合 trackObject.src = URL 指定したURLがtrack要素のsrc属性に設定されます。 Track srcプロパティの使用例 次の例では、video要素内