trackタグの使い方と字幕・キャプションの追加方法をわかりやすく解説

2024.09.12
スポンサーリンク
スポンサーリンク

trackの概要

動画や音声の字幕・キャプションを追加する HTMLタグ

<track src=”字幕ファイル.vtt” kind=”subtitles” srclang=”言語コード” label=”表示名”>

概要 trackタグは、videoやaudioタグと組み合わせて、字幕・キャプション・説明などのテキスト情報を提供するためのHTMLタグです。
  • 字幕やキャプション、説明を追加するために使用される。
  • 字幕ファイル（VTT形式など）を指定し、ユーザーが選択可能。
  • アクセシビリティ向上に役立ち、多言語対応も可能。

trackタグで使用できる主な属性一覧

属性 説明 使用例
src 字幕やキャプションのファイル（.vtt）のURLを指定 <track src="captions.vtt">
kind トラックの種類を指定（字幕・キャプション・説明など） <track kind="subtitles">
srclang 字幕の言語を指定（ISO 639-1形式） <track srclang="ja">
label 字幕の表示名を指定 <track label="日本語">
default デフォルトで有効にする場合に指定 <track default>

trackタグの基本的な使い方

以下の例では、trackタグを使って動画に字幕を追加しています。

<video controls>
    <source src="video.mp4" type="video/mp4">
    <track src="subtitles-ja.vtt" kind="subtitles" srclang="ja" label="日本語" default>
    <track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English">
</video>

trackタグの応用：字幕とキャプションの違い

trackタグのkind属性によって、表示するテキストの種類を指定できます。

kindの値 意味 用途
subtitles 字幕（翻訳） 音声なしでも理解できるようにする
captions キャプション（聞こえない人向け） 音声の内容や効果音を表示する
descriptions 映像の説明 視覚障害者向けにシーンを説明
chapters チャプター情報 動画のナビゲーションを追加

注意事項

  • 字幕ファイルはWebVTT形式（.vtt）を推奨。
  • ブラウザによって字幕表示が異なる場合がある。
  • 字幕の自動翻訳には対応していないため、各言語の字幕を用意する必要がある。
  • iOSの一部のブラウザでは、字幕機能が適切に動作しないことがある。

よくある質問

Q: trackタグはどのブラウザでサポートされていますか？
A: 主要なブラウザ（Chrome、Firefox、Edge、Safari）でサポートされていますが、iOSや一部の旧バージョンでは対応していない場合があります。
Q: 字幕ファイルはどの形式を使うべきですか？
A: WebVTT（.vtt）形式が推奨されます。
Q: trackタグを使うとSEOに影響しますか？
A: 直接的なSEO効果はありませんが、アクセシビリティ向上によりユーザー体験が改善される可能性があります。
Q: trackタグでYouTube動画に字幕を追加できますか？
A: いいえ、YouTubeの埋め込みプレイヤーでは、trackタグは使用できません。YouTubeの字幕機能を利用してください。
Q: 字幕が正しく表示されない場合の対処法は？
A: 字幕ファイルのパスを確認し、kindやsrclang属性が正しく指定されているかチェックしてください。

まとめ

  • trackタグは、videoやaudioに字幕やキャプションを追加するためのタグ。
  • 字幕ファイルはWebVTT（.vtt）形式を使用するのが一般的。
  • kind属性で、字幕（subtitles）、キャプション（captions）、説明（descriptions）などを指定できる。
  • 多言語字幕を提供することで、アクセシビリティや利便性を向上させることができる。
  • 一部のブラウザでは動作に制限があるため、動作確認を推奨。
スポンサーリンク