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

HTMLのtrack要素：default属性でデフォルト表示する字幕トラックを指定する方法

default属性とは

動画に複数の字幕トラックを用意する場合、default属性を使うことで、ユーザーが特に設定を行っていないときに、どのトラックをデフォルトで有効にするかをブラウザに伝えることができます。

例えば、英語とロシア語の2つの字幕トラックを用意している場合、いずれか一方の<track>要素にdefault属性を付けておけば、動画再生開始時にその字幕が自動的に表示されます。

default属性のポイント

  • default属性は論理属性（ブール型）であり、値を指定する必要はありません。
  • <track>要素の中でdefault属性を付けられるのは1つだけです。複数のトラックに指定した場合、最初のものだけが有効になります。
  • ユーザーが字幕を手動で切り替えた場合は、その選択が優先されます。

実装例

以下のコードは、2つの字幕トラックのうちロシア語のトラックにdefault属性を指定した例です。

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

まとめ

複数の字幕トラックを提供する場合は、default属性を活用することで、ユーザー設定がない環境でも意図した字幕を確実に表示させることができます。字幕ファイルはWebVTT（.vtt）形式で用意し、srclang属性で言語を明示しておくと、よりアクセシビリティの高いコンテンツになります。

  1. HTMLのtranslate属性で要素のコンテンツを翻訳するかどうかを指定する方法

    HTMLのtranslate属性とはHTMLのtranslate属性を使用すると、その要素のコンテンツを翻訳するかどうかを指定できます。Google翻訳などの機械翻訳ツールでページを翻訳する際に、ブランド名、固有名詞、コードなど、翻訳してほしくない部分を除外したい場合に特に便利な属性です。translate属性に指定できる値translate属性には、以下の2つの値を指定できます。属性値説明yesコンテンツを翻訳します。noコンテンツを翻訳しません。特定のテキストを翻訳対象から除外する方法特定の単語やフレーズを翻訳されたくない場合は、その要素のtranslate属性に「no」を指定します。&l

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

    HTMLでトラック（track）テキストデータの言語を指定するには、srclang属性を使用します。特に、動画に字幕を追加する場合にこの属性が活用されます。srclang属性とはsrclang属性は、<track>要素で読み込むテキストデータ（字幕やキャプションなど）がどの言語で書かれているかを示すためのものです。値には「en」（英語）や「ru」（ロシア語）などの有効なBCP 47言語タグを指定します。字幕（kind=subtitles）を使用する場合、この属性の指定が推奨されています。サンプルコード以下のコードを実行して、srclang属性の動作を確認してみましょう。<!D