<video>要素

Technical Summary

Definition / Categories

項目	定義
意味	動画、必要に応じて関連する音声・text trackを持つmedia resourceを再生する
Categories	Flow、Phrasing、Embedded、Palpable content。controls属性があればInteractive content
Context	Embedded contentが期待される場所
Content model	srcがある場合とない場合で、source・track・transparent contentの順序が異なる
Tag omission	開始タグ・終了タグとも省略不可
Content attributes	グローバル属性、共通media属性、poster、playsinline、width、height、loading
DOM interface	HTMLVideoElement。HTMLMediaElementを継承

Content modelとresource selection

videoにsrc属性があるかどうかで、許される子要素の順序が分かれます。どちらの形でも、最後のtransparent contentに子孫media elementを置くことはできません。

条件	子要素のモデル
srcあり	0個以上のtrack、続いてtransparent content。sourceは置かない
srcなし	0個以上のsource、0個以上のtrack、続いてtransparent content

<video controls width="640" height="360" poster="/media/lesson.jpg">
  <source src="/media/lesson.webm" type="video/webm">
  <source src="/media/lesson.mp4" type="video/mp4">
  <track kind="captions" src="/media/lesson.en.vtt"
         srclang="en" label="English captions" default>
  This user agent does not support the video element.
</video>

media element内のsourceは代替media resourceの候補を示します。typeが分かる場合、user agentは対応しないtypeを持つ候補を取得前に飛ばせます。ただし、container / codec / profile対応、network、CORS、server応答が合わなければ再生できる保証はありません。picture内のsourceとは選択モデルが異なります。

video内のtransparent contentは、video elementをサポートしないuser agent向けの内容です。video elementを扱うuser agentでresource取得に失敗したとき、同じfallback本文が必ず表示されるわけではありません。取得失敗時の代替が必要なら、別の直接リンクやtranscriptを用意します。

要素固有属性と共通属性

属性	仕様上の役割	境界
src	media resourceのURL	指定時はsource childではなくこのURLを入口にする
poster	video dataを表示できない間に示す代表画像	字幕、transcript、代替説明ではない
controls	user agentに操作UIの表示を要求	見た目・操作部品・AAM公開は実装とplatformの観測対象
preload	取得するbuffer量についてのauthor hint	none・metadata・autoでも実際の取得量を断定できない
autoplay	条件を満たしたときresourceの自動再生を要求	user agentはautoplayをサポートする必要がなく、user preferenceを考慮し得る
muted / loop	muted stateの初期化 / 再生終了後に先頭へ戻す指定	現在状態は対応するIDL属性と区別して読む
playsinline	再生領域内でvideoを表示するよう促す	fullscreen動作やUIを全user agentで固定する指定ではない
width / height	playback areaの寸法属性	video resourceのnatural dimensionsとは別の値
crossorigin / loading	request mode / loading deferralの処理に関係する	resource・poster・text trackごとの取得結果を分けて観測する

posterは、video dataがない間にelementが表す画像として使われます。videoWidthとvideoHeightはvideo resourceのnatural dimensionsを返し、dataがまだないときは0です。表示領域のCSS寸法やposterの寸法と混同しません。

Network stateとready state

networkStateはresource選択・取得の段階を、readyStateは現在どれだけmedia dataを利用できるかを表します。値の意味が異なり、ひとつの単純なloading progressとしてまとめられません。

API	観測するもの	主な値・境界
networkState	resource selectionとdata取得	NETWORK_EMPTY、NETWORK_IDLE、NETWORK_LOADING、NETWORK_NO_SOURCE
readyState	現在位置のmedia dataの利用可能性	HAVE_NOTHINGからHAVE_ENOUGH_DATAまで。値は飛び越して変化し得る
currentTime / duration	media timeline上の再生位置 / resourceの長さ	seek、範囲外、長さ未確定、終了時点を別に扱う。長さが未確定のlive resourceはInfinityになり得る
media events	取得・metadata・buffer・再生・seekなどの状態変化	loadedmetadata、canplay、waiting、playing、seeking、seekedなど。固定の一連の順序とは限らない

preloadはhintで、browser cache、resource、network、user agent policyと合わせて確認します。イベント発火はmedia element taskとして処理され、ready stateが途中のすべての値を通る保証はありません。

再生要求とautoplay

HTMLMediaElement.play()はPromiseを返します。再生が許可されていない場合はNotAllowedError、対応可能なresourceが見つからない場合はNotSupportedErrorでrejectされ得ます。呼び出しだけで再生開始を断定せず、Promiseの結果とmedia eventを観測します。

const video = document.querySelector('video');

video.play().then(() => {
  console.log('playback started');
}).catch((error) => {
  console.log('playback did not start:', error.name);
});

HTML Standardはuser agentにautoplayの対応を義務付けていません。また、自動再生を使う場合も利用者が上書きできるようにし、自動再生を使わない方法を検討するようauthorsに勧めています。実装ごとのpolicy、muted条件、user activation、OS設定の結果はSPECの主張と分けて記録します。

Text trackと動画のアクセシビリティ

trackはmedia elementに外部の時間付きtext trackを関連付けます。kindにはsubtitles、captions、descriptions、chapters、metadataがあります。track cueはmedia timeline上の開始・終了時刻を持ちます。各track kindの意味、default、言語選択は本文で個別に確認し、すべてのtext trackを字幕と同一視しません。

HTML-AAMはvideoをcomputed role html-videoに対応付け、platform accessibility APIのmappingを定めています。controlsがある場合のUI公開はplatformごとに異なり得ます。仕様上のmapping、browser Accessibility Tree、platform API、支援技術での結果は同一のEvidenceではありません。

HTMLのtrackを用意することと、動画コンテンツがアクセシビリティ要件を満たすことは別の判断です。WCAG 2.2の時間依存メディア基準は、 prerecorded / live、音声・映像の情報、media alternativeとして明示されているかなどに応じて適用範囲が変わります。

DOM Interface

API	概要	条件・境界
width / height	要素のdimension attributes	CSSで計算された描画サイズとは別
videoWidth / videoHeight	video resourceのnatural dimensions	media data未取得時は0
poster / playsInline	poster URL / inline再生のIDL surface	反映属性の値と、実際のrender・再生挙動を分ける
play() / pause()	再生・停止要求	play()はPromise。成功・拒否のどちらも処理する
currentTime / duration / seekable	timeline、seek position、seekable range	live・streaming resourceでは有限のdurationや先頭からの完全なseekを仮定しない
networkState / readyState / error	resource取得と現在の再生準備状態	異なる状態機械のsurfaceとして記録する
textTracks / addTextTrack()	関連text trackと追加API	子track、script追加、resource内部tracksの由来を分ける

Fact / Evidence（主張 / 根拠）

HTML Standard、HTML-AAM、WCAGに基づく主張と適用条件を示します。ブラウザー挙動の実測は下のImplementation Evidenceに分け、未実施の項目は確認済みとは扱いません。

Evidence

1. HTML Standard: The video element — categories、content model、attributes、poster、HTMLVideoElement
2. HTML Standard: Media elements — resource selection、network / ready states、playback、seeking、events、autoplay
3. HTML Standard: The track element and timed text tracks — track kinds、cues、language、default、text track API
4. HTML Accessibility API Mappings: video — computed role and platform control mapping
5. WCAG 2.2 SC 1.2.2 and SC 1.2.3 — prerecorded synchronized media criteria and conditions
6. Web Platform Tests: the-video-element and media-elements — test discovery entry points; no results are claimed here

Implementation Evidence

仕様上の主張とブラウザー実装、WPT、Accessibility Treeの観測を分けて登録しています。選定した実測とtestを実施済みです。各行の記録に観測環境と未確認の範囲を示します。

実測fixture: video-v1を作成し、Chrome 153の単一環境で動画読込・再生・字幕表示とAccessibility Treeを観測しました。WPTは選定8ファイルを実行しました。詳細は下記Evidence行を参照してください。全browser・全test suite・platform accessibility mappingの網羅は引き続き未完了です。

codec、media file、network、user activation、user preference、browser、OS、native controls、platform API、支援技術による結果を分けて記録し、単一環境の結果を横断的な共通動作として一般化しません。

Coverage / Open Issues

• 確認済み意味、Categories、Context、src別content model、主要属性、poster、HTMLVideoElement
• 確認済みshared media resource selection、network / ready state、playback promise、event modelの仕様上の入口
• 確認済みtext track、HTML-AAM、WCAG時間依存メディア基準の根拠位置と適用境界
• 未完了Chrome、Firefox、Safariでのsource fallback、codec、network / ready state、event、poster、寸法の比較
• 未完了autoplay policy、user activation、preload、lazy loading、CORS、range request、media fragment、live streamの詳細実装比較
• 未完了他browserとの実測比較、全WPT directory、HTML-AAMの全platform mapping、OS accessibility APIと支援技術、字幕表示・選択の差

このページは初期Coverageです。仕様上の入口と根拠を整理したものであり、video全体の完全な検証、すべてのbrowserでの再生、またはすべてのmediaがアクセシビリティ基準を満たすことを主張しません。

Related surface

初心者向けの再生UI、字幕、poster、代替説明はYugienのvideo要素ページを参照してください。audioとの共通media modelはaudio要素で比較できます。sourceの親要素別候補選択はsource要素、時間付きテキストの仕様・WebVTT・Evidenceはtrack要素ページで確認できます。画像resource選択の比較にはpicture要素とimg要素、別文書の埋め込みとの境界にはiframe要素も確認できます。