WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <track>「動画・音声のテキスト・トラック」

<track> 「動画・音声のテキスト・トラック」[読み方:トラック]

<track>タグは、<audio>タグや<video>タグに字幕などのテキストトラックを組み込む場合に使用します。
<track>タグには終了タグはありません。

HTML規格HTML4.01HTML5
使用可否×
<track>は、HTML5で追加されたタグです
ブラウザ別の対応状況
下記サイトで確認できます。
「Can I use」(英語のサイトです)
広告

<track> の仕様

カテゴリー使用できる場所(親要素)コンテンツモデル(子要素)タグ省略
<audio><video>内で
フローコンテンツより前に指定
終了タグ無

<track> の属性

【構文】
<track src="テキストファイル名" kind="種類" srclang="言語コード"・・・>
属性意味値のサンプルなど
src="テキストファイル名"組み込むテキストトラックファイルのURL【必須】「sample.vtt」
「sample.ttml」
拡張子:「.vtt」「.ttml」
kind="値"テキストトラックの種類をキーワードで指定
意味
subtitles翻訳字幕
captions字幕プラス効果音や状況説明
descriptions動画の視覚的な構成の説明
chaptersチャプター(章)タイトル
metadataスクリプトから利用される情報(ユーザには非表示)
srclang="言語"テキストトラックデータの言語コードを指定する
【条件付必須】下記留意事項参照
意味
ja日本語
en英語
frフランス語
など
label="ラベル名"トラックのタイトル-
defaultデフォルトで有効になるトラックを指定-
グローバル属性
  • accesskey
  • class
  • contenteditable
  • dir
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate
イベント属性
ページTOP

<track>タグのサンプル

「audio」タグと組み合わせたサンプル
<audio controls>
<source src="se_maoudamashii_onepoint03.mp3"type="audio/mp3">
<source src="se_maoudamashii_onepoint04.ogg"type="audio/ogg">
<track src="track_audio.vtt" kind="subtitles" srclang="ja"default>
<p style="color:red">HTML5のaudioに対応していないブラウザのためサンプルは表示されません。</p>
</audio>


(2014/09/10時点で対応しているブラウザは、ありません。)
音源は魔王魂様よりダウンロードし利用させていただいています。

「video」タグと組み合わせたサンプル
<video autoplay controls width="300"height="250">
<source src="e23.webm" type="video/webm">
<source src="e23.mp4" type="video/mp4">
<track src="track_video.vtt" kind="subtitles" srclang="ja"default>
<p><a href="e23.mp4">動画ファイルを保存後に再生してください。</a></p>
</video>

動画:kawacho様よりダウンロードし利用させていただいています。

ページTOP

留意事項

  • <track>タグは、HTML5で追加されたタグのため、ブラウザやそのバージョンによって動作が大きく異なりますので、注意が必要です
  • <track>タグは複数指定できますが、kind属性、srclang属性が同じものは指定できません。
    同じ場合は、label属性に違う名前を指定します。
  • 使用する資源全てのMIMEタイプをhtaccess に登録が必要です。
  • kind属性に"subtitles"(翻訳字幕)を指定する場合は、srclang属性は必須となります。
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン