HTML5のEmbedded Content～track要素とmap要素とarea要素～

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

Embedded Content関連

track要素

video要素やaudio要素に外部的なテキストリソースを指定する。

<video src="water.mp4" controls loop muted width="400" height="200">
    <track kind="captions" src="track.vtt" srclang="ja">
    <p><a href="water.mp4">ダウンロード</a></p>
</video>

カテゴリ
・なし

コンテンツモデル
・なし

コンテンツ属性
・グローバル属性
・kind - テキストトラックの種類。列挙属性。
　　subtitles - 音声が利用可能であるが理解されていない場合に適した字幕を表示。ビデオに重ねて表示。
　　captions - 音声が聞こえない、またははっきり聞こえない場合などに適した字幕を表示。ビデオに重ねて表示。
　　descriptions - 映像が不明瞭な場合の説明。合成音声で表す。
　　chapters - 章(チャプター)タイトル
　　metadata - スクリプトから使用するためのトラック。表示されない。
・src - テキストトラックのURL
・srclang - テキストトラックの言語
・label - 使用可能なラベル
・default - 他に適切なテキストトラックがない場合はこのトラックを有効にする

タグの記載場所
・メディア要素の子要素としてフローコンテンツより前に置く

map要素

img要素とarea要素と共にイメージマップを表す。

<img src="500_ice.JPG" usemap="#test">
<map name="test">
    <area href="icecream.html" shape="rect" coords="15,93,288,309">
    <area href="caferate.html" shape="rect" coords="321,91,500,291">
</map>

chromeで表示したとき

カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・トランスペアレント

コンテンツ属性
・グローバル属性
・name - usemap属性と関連付けるためのイメージマップの名前

タグの記載場所
・フレージングコンテンツを配置できる場所

area要素

イメージマップ上のエリアとハイパーリンクの設定を行う

カテゴリ
・フローコンテンツ
・フレージングコンテンツ

コンテンツモデル
・トランスペアレント

コンテンツ属性
・グローバル属性
・alt - 画像が利用できない場合に使用する置換テキスト
・coords - イメージマップに作成される形状の座標(浮動小数点数のリスト)
・download - 移動するのではなくリソースをダウンロードするかどうか、そうであればそのファイル名
・href - ハイパーリンクのアドレス
・hreflang - リンク先リソースの言語
・rel - このドキュメントとリンク先の関係
・shape - イメージマップ上に作成される形状の種類。列挙属性。coordsはCSSピクセル単位。
　　circleを指定した場合、coords="円の中心のx座標, 円の中心のy座標, 円の半径"
　　rectを指定した場合、coords="左上のx座標, 左上のy座標, 右下のx座標, 右下のy座標"
　　polyを指定した場合、coords="多角形の各角のx座標, 多角形の各角のy座標"　※指定は偶数で少なくとも6つもつ必要がある。
　　defaultを指定した場合、画像全体となる。
・target - ブラウジングコンテキスト
・type - リンク先のMIMEタイプ
・referrerpolicy - リファラーポリシー

タグの記載場所
・フレージングコンテンツを配置できる場所(ただしmap要素またはtemplate要素を祖先にもつ場合)