Widely available すべての主要ブラウザで対応済み。安心して使用可能。

<video>

<video> は HTML の要素で、文書中に動画再生に対応するメディアプレイヤーを埋め込みます。 <video> を音声コンテンツのために使用することもできますが、 <audio> 要素の方がユーザーにとって使い勝手が良いかもしれません。

メディア

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<video>
3
12
3.5
3.1
18
3
HTML 属性
autoplay
3
12
3.5
3.1
18
10
controls
3
12
3.5
3.1
18
3
crossorigin

crossorigin 属性は、audio, img, link, script, video の各要素で有効です。CORS への対応を提供し、したがって要素が読み取るデータのために CORS リクエストの構成を有効にします。要素によっては、属性は CORS 設定属性になります。
33
≤18
74
10
33
10
height
3
12
3.5
3.1
18
3
loop
3
12
11
3.1
18
6
muted
30
12
11
5
30
4.2
playsinline
75
79
10
75
10
poster
3
12
3.6
3.1
18
3
preload
3
12
4
3.1
18
3
src
3
12
3.5
3.1
18
3
width
3
12
3.5
3.1
18
3
DOM API
HTMLMediaElement

HTMLMediaElement インターフェイスは、 HTMLElement に音声や動画で一般的なメディアに関する基本的な能力の対応に必要なプロパティやメソッドを追加します。
3
12
3.5
3.1
18
3
abort_event

abort イベントは、リソースが完全には読み込まれなかったが、それがエラーの結果ではなかった場合に発生します。
3
12
9
3.1
18
3
autoplay

HTMLMediaElement.autoplay プロパティは、 HTML の autoplay 属性を反映しています。これは、メディアが中断なく再生できるようになった時点で自動的に再生を開始するかどうかを示します。
3
12
3.5
3.1
18
3
buffered

buffered は HTMLMediaElement オブジェクトの読み取り専用プロパティで、この buffered プロパティがアクセスされた時点でユーザーエージェントがバッファリングしているメディアリソースの範囲があれば，それを表す新しい静的な正規化された TimeRanges オブジェクトを返します。
3
12
4
3.1
18
3
canplay_event

canplay イベントは、ユーザーエージェントがメディアを再生できるようになったものの、追加のバッファリングのために停止することなくメディアの最後まで再生するには充分なデータが読み込まれていないとみられる場合に発生します。
3
12
3.5
3.1
18
3
canplaythrough_event

canplaythrough イベントは、ユーザーエージェントがメディアを再生可能なときに発生し、コンテンツをさらにバッファリングするために再生を停止することなく、メディアを最後まで再生するのに十分なデータが読み込まれたと推定します。
3
12
3.5
3.1
18
3
canPlayType

HTMLMediaElement の canPlayType() メソッドは、現在のブラウザーが指定された MIME タイプのメディアを再生できるかどうかを報告します。
3
12
3.5
4
18
3
controls

HTMLMediaElement.controls プロパティは、 HTML の controls 属性を反映し、メディアアイテムを再生するためのユーザーインターフェイスのコントロールを表示するかどうかを制御します。
3
12
3.5
3.1
18
3
crossOrigin

HTMLMediaElement.crossOrigin プロパティは、画像等の要素のための CORS 設定です。 詳しくは、 CORS 設定属性を参照してください。
33
13
22
10
33
10
currentSrc

HTMLMediaElement.currentSrc プロパティには、選択されたメディアリソースの絶対 URL が入っています。この選択は、例えば、ウェブサーバーがユーザーのディスプレイの解像度に基づいてメディアファイルを選択した場合に発生する可能性があります。 networkState プロパティが EMPTY の場合、値は空の文字列です。
3
12
3.5
3.1
18
3
currentTime

HTMLMediaElement インターフェイスの currentTime プロパティは、現在の再生時間を秒単位で示します。
3
12
3.5
3.1
18
3
defaultMuted

HTMLMediaElement.defaultMuted プロパティは、 HTML の muted 属性を反映し、メディア要素の音声出力を既定でミュートするかどうかを示します。このプロパティは動的な効果はありません。 音声出力をミュートおよびミュート解除するには、HTMLMediaElement.muted プロパティを使用してください。
15
12
11
6
18
6
defaultPlaybackRate

HTMLMediaElement.defaultPlaybackRate プロパティは、メディアの既定の再生速度を示します。
3
12
20
3.1
18
3
duration

HTMLMediaElement の読み取り専用プロパティ duration は、この要素のメディアの長さを秒単位で表します。
3
12
3.5
3.1
18
3
durationchange_event

durationchange イベントは、duration 属性が更新されたときに発生します。
3
12
3.5
3.1
18
3
emptied_event

emptied イベントは、メディアが空になると発生します。 例えば、このイベントは、メディアがすでに読み込まれている（または部分的に読み込まれている）状態で、それを再読み込みするために load() メソッドを呼び出した場合に送信されます。
3
12
3.5
3.1
18
3
ended

HTMLMediaElement.ended は、メディア要素が再生を終了したかどうかを示します。
3
12
3.5
3.1
18
3
ended_event

ended イベントは、メディアの終わりに達したため、またはそれ以上利用できるデータがないために再生またはストリーミングが停止したときに発生します。
3
12
3.5
3.1
18
3
error

HTMLMediaElement.error は最新のエラーの MediaError オブジェクトです。エラーが発生していない場合は null になります。要素が HTMLMediaElement/error_event イベントを受け取ったら、このオブジェクトを調べることで、何が起こったのかについての詳細を決定することができます。
3
12
3.5
3.1
18
3
error_event

error イベントは、リソースがエラーのために読み込めなかったときに発生します（例えば、ネットワーク接続の問題など）。
3
12
6
3.1
18
3
load

HTMLMediaElement の load() メソッドは、メディア要素をその初期状態にリセットし、再生を開始する準備としてメディアソースを選択してメディアを読み込むプロセスを開始します。
3
12
3.5
3.1
18
3
loadeddata_event

loadeddata イベントは、メディアの現在の再生位置のフレームの読み込みが完了したときに発生します。ふつうは最初のフレームです。
3
12
3.5
3.1
18
3
loadedmetadata_event

loadedmetadata イベントは、メタデータが読み込まれたときに発生します。
3
12
3.5
3.1
18
3
loadstart_event

loadstart イベントは、ブラウザーがリソースの読み込みを開始したときに発生します。
3
12
6
4
18
3
loop

HTMLMediaElement.loop プロパティは、 HTML の loop 属性を反映し、メディア要素が最後に到達したときに最初からやり直すかどうかを制御します。
3
12
11
4
18
3
muted

HTMLMediaElement.muted プロパティは、メディア要素がミュートされているかどうかを示します。
3
12
3.5
3.1
18
3
networkState

HTMLMediaElement.networkState プロパティは、ネットワークを介したメディアの現在の取得状況を示します。
3
12
3.5
3.1
18
3
pause

HTMLMediaElement.pause() メソッドはメディアの再生を一時停止します。 メディアがすでに一時停止状態にある場合、このメソッドは効果がありません。
3
12
3.5
3.1
18
3
pause_event

pause イベントは、動作の一時停止のリクエストが処理され、動作が一時状態に入ったときに送信されるものであり、メディアが要素の HTMLMediaElement.pause の呼び出しを通して一時停止した後が最も一般的です。
3
12
3.5
3.1
18
3
paused

HTMLMediaElement.paused プロパティは読み取り専用で、メディア要素が一時停止しているかどうかを示します。
3
12
3.5
3.1
18
3
play

HTMLMediaElement の play() メソッドは、メディアの再生を開始しようとします。 再生が正常に開始されると解決するプロミス (Promise) を返します。
3
12
3.5
3.1
18
3
play_event

play メソッドは autoplay 属性の結果として、paused プロパティが true から false に変更されたときに発生します。
3
12
3.5
3.1
18
3
play (returns promise)

Promise` を返す。
50
17
53
10
50
10
playbackRate

HTMLMediaElement.playbackRate プロパティは、メディアが再生されるレートを設定します。これはユーザーが早送りやスローモーションなどのユーザー制御を実装するために使用されます。通常の再生レートにこの値を掛けて現在のレートが求められるため、 1.0 の値が通常の速度です。
3
12
20
3.1
18
3
played

played は HTMLMediaElement インターフェイスの読み取り専用プロパティで、リソース（audio または video のメディアファイル）が再生された時間の範囲を示します。このプロパティは、この属性が評価された時点で、ブラウザーが再生したメディアソースの範囲（ある場合）を含む新しい TimeRanges オブジェクトを返します。
3
12
15
3.1
18
3
playing_event

playing イベントは再生が最初に開始されたときと、再生が再開されたときに発行されます。例えば、データ不足で一時停止や遅延していた再生が再開されたときに発行されます。
3
12
3.5
3.1
18
3
preload

preload は HTMLMediaElement インターフェイスのプロパティで、製作者がどうすればもっとも使い勝手が良くなると考えているかについて、ブラウザーに与えるヒントを示す文字列です。
5
12
4
5
18
5
progress_event

progress イベントは、ブラウザーがリソースを読み込むときに定期的に発生します。
3
12
6
3.1
18
3
ratechange_event

ratechange イベントは、再生レートが変更されたときに発生します。
3
12
3.5
3.1
18
3
readyState

HTMLMediaElement.readyState プロパティは、メディアの準備状態を示します。
3
12
3.5
3.1
18
3
seekable

seekable は HTMLMediaElement オブジェクトの読み取り専用プロパティで、新しい静的な正規化された TimeRanges オブジェクトを返します。これは seekable プロパティがアクセスされた時点でユーザーエージェントがシーク可能なメディアリソースがあれば、その範囲を表します。
3
12
8
3.1
18
3
seeked_event

seeked イベントは、シーク操作が完了したことで、現在の再生位置が変更され、論理属性の seeking が false に変更されたときに発生します。
3
12
3.5
3.1
18
3
seeking

seeking は HTMLMediaElement インターフェイスの読み取り専用プロパティで、リソース、すなわち audio または video が新しい位置へのシーク処理中であるかどうかを示す論理値です。
3
12
3.5
3.1
18
3
seeking_event

seeking イベントは、シーク操作が開始されると発生します。つまり、論理属性の seeking を true に変更し、メディアが新しい位置をシークしている状態になります。
3
12
3.5
3.1
18
3
src

HTMLMediaElement.src プロパティは、 HTML のメディア要素の src 属性の値を反映します。これは、要素で使用するメディアリソースの URL を示します。
3
12
3.5
3.1
18
3
stalled_event

stalled イベントは、ユーザーエージェントがメディアデータをフェッチしようとして、データが予期せずに来なかったときに発生します。
3
12
3.5
3.1
18
3
suspend_event

suspend イベントは、メディアデータの読み込みが中断されたときに発生します。
3
12
3.5
3.1
18
3
timeupdate_event

timeupdate イベントは、currentTime 属性で示される時刻が更新されたときに発生します。
3
12
3.5
3.1
18
3
volume

HTMLMediaElement.volume プロパティは、メディアを再生する音量を設定します。
3
12
3.5
3.1
18
3
volumechange_event

volumechangeイベントは、HTMLMediaElement.volume 属性か HTMLMediaElement.muted 属性のいずれかが変更されたときに発行されます。
3
12
6
3.1
18
3
waiting_event

waiting イベントは、一時的にデータが欠落したために再生が停止したときに発生します。
3
12
6
3.1
18
3
HTMLVideoElement

video 要素が実装している HTMLVideoElement インターフェイスは、動画ブジェクトを操作するための特別なプロパティとメソッドを提供します。また、 HTMLMediaElement と HTMLElement のプロパティとメソッドを継承しています。
3
12
3.5
3.1
18
3
height

height は HTMLVideoElement インターフェイスのプロパティで、この video 要素の height 属性を反映した整数を返し、CSS ピクセル単位でリソースが表示される高さを指定します。
3
12
3.5
3.1
18
3
playsInline
75
79
10
75
10
poster

poster は HTMLVideoElement インターフェイスのプロパティで、動画データが利用できない場合に表示させる画像の URL を反映する文字列です。プロパティが有効な URL を表していない場合、ポスターフレームは表示されません。
3
12
3.6
3.1
18
3
resize_event

resize は HTMLVideoElement インターフェイスのイベントで、HTMLVideoElement.videoWidth および HTMLVideoElement.videoHeight プロパティのうち、どちらか一方または両方が更新された直後に発行されます。
3
79
3.5
3.1
18
3
videoHeight

HTMLVideoElement インターフェイスの videoHeight プロパティは読み取り専用で、動画の内在的な高さを CSS ピクセル単位で示します。 単純に言えば、これはメディアの自然なサイズでの高さです。
3
12
3.5
3.1
18
3
videoWidth

HTMLVideoElement インターフェイスの videoWidth プロパティは読み取り専用で、この動画の内在的な幅を CSS ピクセル数で表します。 単純に言えば、これは自然なサイズでのメディアの幅です。
3
12
3.5
3.1
18
3
width

width は HTMLVideoElement インターフェイスのプロパティで、この video 要素の width 属性を反映した整数を返し、CSS ピクセル単位でリソースが表示される幅を指定します。
3
12
3.5
3.1
18
3
MediaError

MediaError インターフェースは、HTMLMediaElement に基づく HTML メディア要素内のメディア（音声や動画など）の処理中に発生したエラーを表す。
3
12
4
3.1
18
2
code

読み取り専用のプロパティMediaError.codeは、メディア要素で発生したエラーの種類を表す数値を返します。特定の診断情報をテキスト文字列で取得するには、MediaError.messageを参照してください。
3
12
3.5
3.1
18
2
message

読み取り専用のMediaError.messageプロパティは、MediaErrorオブジェクトによって記述されたエラーに関連する特定の診断詳細を提供する人間が読める文字列を返し、診断情報を決定または提供できない場合は空文字列（""）を返す。
59
79
52
15
59
15
TimeRanges

TimeRanges インターフェイスは、主に audio 要素と video 要素で使用するためにメディアをロードするときにメディアのどの部分がバッファリングされたかを追跡する目的で、一連の時間範囲を表すために使用します。
6
12
4
3.1
18
2
end

指定された時間範囲が終わる時間オフセットを返します。
6
12
4
3.1
18
2
length

TimeRanges.length 読み取り専用プロパティは、オブジェクト内の範囲の数を返します。
6
12
4
3.1
18
2
start

start() は TimeRanges インターフェイスのメソッドで、指定した時間範囲が開始する時刻オフセットを返します。
6
12
4
3.1
18
2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (74)
実装メモ
  • crossorigin="use-credentials"`を指定すると、シーク時にクッキーを送信しません。バグ 1532722 を参照してください。
注釈 1件
対応条件
  • 以前は別名で対応していました: webkit-playsinline (8)
注釈 1件
対応条件
  • 以前は別名で対応していました: webkit-playsinline (8)
注釈 1件
実装メモ
  • Chrome 64のデフォルトは`metadata`である。
注釈 1件
実装メモ
  • Chrome Android 64のデフォルトは`metadata`である。
注釈 2件
実装メモ
  • 文字列 `codecs` には、任意のオプションのパラメータのサブセットを含めることができる（すべて、またはすべてではない）。
  • 文字列 `codecs` に予期しない文字が含まれているとエラーになる。
注釈 2件
実装メモ
  • 文字列 `codecs` には、任意のオプションのパラメータのサブセットを含めることができる（すべて、またはすべてではない）。
  • 文字列 `codecs` に予期しない文字が含まれているとエラーになる。
注釈 2件
実装メモ
  • Firefox 28 より前のバージョンでは、WebM オーディオまたはビデオファイルについて `codecs` パラメータを指定せずに問い合わせた場合、`canPlayType()` は `probably` を返していました。複数のコーデックがサポートされているため、ファイルが再生可能かどうかを判断するには十分な情報ではありません。
  • Firefox 101 より前のバージョンでは、`canPlayType()` は `av01` コーデックの `codecs` パラメータオプションを無視していた (`av1` として扱っていた)。
注釈 2件
実装メモ
  • 文字列 `codecs` には、任意のオプションのパラメータのサブセットを含めることができる（すべて、またはすべてではない）。
  • 文字列 `codecs` に予期しない文字が含まれているとエラーになる。
注釈 2件
削除済み
  • このバージョンで機能が削除されました (22)
対応条件
  • 以前は別名で対応していました: crossorigin (12)
注釈 1件
削除済み
  • NETWORK_LOADED` 状態は、Firefox 4 の HTML 仕様に合わせるために削除されました。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • volume`は値を返し、書き込み可能である。しかし、値は常に1であり、値を設定してもメディアオブジェクトのボリュームには影響しない。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (79)
実装メモ
  • onresize`イベントハンドラプロパティはサポートされていません。
注釈 2件
削除済み
  • このバージョンで機能が削除されました (4)
対応条件
  • 以前は別名で対応していました: HTMLMediaError (3.5)

基本構文

HTML 
<video controls width="640" poster="thumbnail.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="ja" label="日本語">
  Your browser does not support the video element.
</video>

ライブデモ

videopre-ya-

playUI display. with Video element in videocontent embed.controls.

プレビュー全画面表示

Poster Attribute and Sizespecified

aspekt settings. with samuneil specified.width / height. with poster

プレビュー全画面表示

video Attributeoverview

Video element in usablemain attribute. and.

プレビュー全画面表示

実務での使いどころ

  • <video> の活用

    <video> は HTML の要素で、文書中に動画再生に対応するメディアプレイヤーを埋め込みます。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク