HTML5のEmbedded Content～video要素とaudio要素～

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

Embedded Content関連

video要素

動画(映像・映画)や、キャプション付きのオーディオデータを再生する。
video要素に未対応のブラウザなどのために、要素内容にその動画へのアクセス方法を明示したコンテンツを入れることが可能。
track要素を用いてWebVTTファイルを読み込んで字幕などを表示することも可能。

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

chromeで表示したとき

カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・エンベディッドコンテンツ
・controls属性がある場合は、インタラクティブコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・src属性がある場合：0個以上のtrack要素とそれに続くトランスペアレントコンテンツ(メディア要素は含まない)
・src属性がない場合：0個以上のsource要素とそれに続く0個以上のtrack要素とそれに続くトランスペアレントコンテンツ(メディア要素は含まない)

コンテンツ属性
・グローバル属性
・src - リソースのURL
・crossorigin - クロスオリジンの設定
・poster - ビデオ再生の前に表示するポスターフレーム。利用可能なビデオデータがない時に表示させる画像ファイルのURLの指定をする。
・preload - メディアリソースのバッファリングの設定
・autoplay - ページがロードされた時に再生開始するかどうかの設定(論理属性。属性名のみでも可)
・loop - メディアリソースを繰り返しにするかどうかの設定(論理属性。属性名のみでも可)
・muted - デフォルトでミュート設定にするかどうかの設定(論理属性。属性名のみでも可)
・controls - コントローラを表示する設定(論理属性。属性名のみでも可)
・width - 横幅
・height - 高さ

タグの記載場所
・エンベディッドコンテンツを配置できる場所

audio要素

音声またはオーディオストリームを再生する。
audio要素に未対応のブラウザなどのために、要素内容にその動画へのアクセス方法を明示したコンテンツを入れることが可能。
track要素を用いてWebVTTファイルを読み込んで字幕などを表示することも可能。

<audio src="water.mp4" controls loop muted>
    <p><a href="water.mp4">ダウンロード</a></p>
</audio>

chromeで表示したとき

カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・エンベディッドコンテンツ
・controls属性がある場合は、インタラクティブコンテンツ
・controls属性がある場合は、パルパブルコンテンツ

コンテンツモデル
・src属性がある場合：0個以上のtrack要素とそれに続くトランスペアレントコンテンツ(メディア要素は含まない)
・src属性がない場合：0個以上のsource要素とそれに続く0個以上のtrack要素とそれに続くトランスペアレントコンテンツ(メディア要素は含まない)

コンテンツ属性
・グローバル属性
・src - リソースのURL
・crossorigin - クロスオリジンの設定
・preload - メディアリソースのバッファリングの設定
・autoplay - ページがロードされた時に再生開始するかどうかの設定(論理属性。属性名のみでも可)
・loop - メディアリソースを繰り返しにするかどうかの設定(論理属性。属性名のみでも可)
・muted - デフォルトでミュート設定にするかどうかの設定(論理属性。属性名のみでも可)
・controls - コントローラを表示する設定(論理属性。属性名のみでも可)

タグの記載場所
・エンベディッドコンテンツを配置できる場所