Web ページに動画を載せたいとき、HTML だけで完結できるのが <video> 要素です。再生・一時停止のコントロールを表示したり、ページを開いた瞬間に自動で再生したり、ループさせたりといった操作を、属性を付けるだけで指定できます。この記事では、<video> の基本構文から、controls・autoplay・muted・loop といった主要属性の役割、autoplay が muted とセットでないと自動再生がブロックされる理由、<source> 要素で webm と mp4 を出し分けるフォールバック、字幕を付ける <track> 要素までを、コーディング初心者〜中級者の方に向けて MDN の仕様に沿って解説します。
目次
video 要素とは
<video> は、動画ファイルを再生するためのプレーヤーをページに埋め込む要素です。かつては動画を再生するのにプラグインが必要でしたが、HTML5 以降は <video> を書くだけで、ブラウザがネイティブのプレーヤーを表示してくれます。再生する動画ファイルは src 属性、または中に置いた <source> 要素で指定します。
動画は画像と違ってファイルサイズが大きく、再生方法（自動再生するか、コントロールを出すか、音を出すか）によって読者の体験が大きく変わります。<video> はそうした挙動を属性で細かく制御できるのが特徴です。まずは最小の書き方から見ていきましょう。
基本の書き方（src と controls）
もっともシンプルなのは、src 属性に動画ファイルのパスを指定し、controls 属性を付ける書き方です。controls を付けると、再生・一時停止・音量・シークバーといった操作 UI がブラウザによって表示されます。これを付け忘れると、自動再生でもしない限りユーザーは動画を再生できません。
<!-- src で動画ファイルを指定し、controls で操作 UI を表示 -->
<video src="sample.mp4" controls width="640">
お使いのブラウザは video 要素に対応していません。
</video>タグの開始と終了の間に書いたテキスト（ここでは「お使いのブラウザは video 要素に対応していません。」）は、<video> に対応していない環境でだけ表示されるフォールバック用の内容です。現在のブラウザはほぼ対応しているので普段は目にしませんが、書いておくと安全です。width はプレーヤーの幅で、あわせて height も指定できます。サイズを数値で指定しておくと、動画の読み込み前にレイアウトが確定し、表示時のガタつき（レイアウトシフト）を防げます。
主要な属性とその効果
<video> には再生の挙動を変える属性がいくつもあります。よく使うものを整理すると次のとおりです。controls・autoplay・muted・loop・playsinline は値を持たない真偽属性で、属性名を書くだけで有効になります。
| 属性 | 効果 |
|---|---|
controls | 再生・一時停止・音量などの操作 UI を表示する |
autoplay | 動画を読み込み次第、自動で再生する。muted とセットが基本 |
muted | 音声をミュートした状態で開始する |
loop | 再生が終わると先頭に戻り繰り返す |
poster | 再生前に表示するサムネイル画像の URL を指定する |
preload | 読み込み方針を指定する（none / metadata / auto） |
playsinline | モバイルで全画面化せずインライン再生させる |
width / height | プレーヤーの表示サイズを指定する |
poster は、動画を再生する前に表示しておく静止画です。指定しないと最初のフレームや空のプレーヤーが表示されるため、内容が伝わる画像を poster に置いておくと見栄えが良くなります。preload は読み込みの方針で、metadata を指定すると長さなどの情報だけを先読みし、none なら再生されるまで読み込みません。回線への配慮が必要な場面では preload="metadata" がよく使われます。
autoplay は muted とセットにする
autoplay を付ければページ表示時に動画が自動再生されますが、ここに大きな落とし穴があります。現在の主要ブラウザは、ユーザーの操作なしに音の出る動画を自動再生することを原則ブロックします。突然音が鳴ると不快なため、音声付きの自動再生は許可していないのです。そのため autoplay だけを書いても、多くの環境では再生が始まりません。
自動再生を確実に効かせたいときは、autoplay と muted を必ずセットで指定します。ミュートされた動画であれば音が鳴らないため、ブラウザは自動再生を許可します。背景動画やループするアニメーション的な動画は、この組み合わせで実現するのが定番です。loop や playsinline もあわせて指定すると、繰り返し再生やモバイルでのインライン再生まで揃います。
<!-- autoplay は muted とセットにする -->
<video
src="bg.mp4"
autoplay
muted
loop
playsinline
width="640">
お使いのブラウザは video 要素に対応していません。
</video>なお muted を後から JavaScript で外しても、自動再生中の音声を勝手に有効にすることはできません。音を出したい動画は、controls を付けてユーザー自身に再生・音量操作をしてもらう設計にしましょう。
source 要素で複数形式を指定してフォールバックする
src 属性で1つのファイルを指定する代わりに、<video> の中に複数の <source> 要素を並べる書き方があります。それぞれの <source> に src と type（MIME タイプ）を指定しておくと、ブラウザは上から順に見て、自分が再生できる最初の形式を選びます。これにより、対応形式が異なるブラウザへのフォールバックができます。
<video controls width="640" poster="thumb.jpg">
<!-- 上から順に、再生できる最初の形式が使われる -->
<source src="sample.webm" type="video/webm">
<source src="sample.mp4" type="video/mp4">
<!-- どの source も再生できない場合に表示される -->
お使いのブラウザは video 要素に対応していません。
<a href="sample.mp4">動画をダウンロード</a>
</video>この例では、先に webm を、次に mp4 を並べています。webm はファイルサイズが小さくなりやすい形式で、対応していれば優先して使われます。対応していないブラウザは webm を飛ばして mp4 を再生します。mp4（H.264）は対応範囲が広いため、互換性のための最後の砦として置いておくと安心です。type を正しく書いておくと、ブラウザは中身を読み込まずに再生可否を判断でき、無駄な通信を減らせます。
<source> を使うときは、<video> 側に src を書かない点に注意してください。<video> に src がある場合はそちらが優先され、中の <source> は無視されます。形式を出し分けたいときは src を <source> 側だけに書きます。
track 要素で字幕を付ける
動画に字幕やキャプションを付けたいときは、<source> と同じく <video> の中に <track> 要素を置きます。字幕の中身は WebVTT という形式のテキストファイル（拡張子 .vtt）で用意し、src でそのファイルを指定します。kind に字幕の種類、srclang に言語コード、label に切り替えメニューでの表示名を指定します。
<video controls width="640">
<source src="sample.mp4" type="video/mp4">
<!-- 日本語字幕を既定で表示する -->
<track
src="captions.ja.vtt"
kind="subtitles"
srclang="ja"
label="日本語"
default>
お使いのブラウザは video 要素に対応していません。
</video>kind="subtitles" は翻訳・対話の字幕、kind="captions" は効果音なども含む聴覚補助向けのキャプションを表します。default を付けたトラックは、ユーザーが何も操作しなくても最初から有効になります。複数言語の字幕を用意したいときは <track> を言語ごとに並べれば、controls の字幕メニューから切り替えられます。なお WebVTT ファイルは別途自分で用意する必要があり、<track> はその表示を担う要素だと考えるとよいでしょう。
自動再生されないとき
muted が付いていない
自動再生が始まらない原因として圧倒的に多いのが、autoplay だけを指定して muted を付け忘れているケースです。前述のとおり、ブラウザは音の出る動画の自動再生を原則ブロックします。autoplay を効かせたいなら、まず muted がセットになっているかを確認してください。muted を付ければ多くの環境で自動再生されるようになります。
ファイルのパスや形式が間違っている
動画が表示・再生されないときは、src のパスが正しいか、ファイルが実際にその場所にあるかを確認しましょう。<source> を使っている場合は、type に指定した MIME タイプ（video/webm や video/mp4）が実際のファイル形式と合っているかも見直してください。どの <source> も再生できないと、フォールバックのテキストだけが表示されます。
モバイルで全画面になってしまう
スマートフォンで、ページ内に小さく再生させたいのに勝手に全画面になってしまう場合は、playsinline 属性を付けると、その場（インライン）で再生されるようになります。背景動画のように画面の一部で再生し続けたい用途では、autoplay muted loop playsinline をまとめて指定するのが定番の組み合わせです。
まとめ
<video> 要素を使うと、HTML だけでページに動画プレーヤーを埋め込めます。基本は src または <source> で動画を指定し、controls で操作 UI を表示すること。再生形式を出し分けたいときは <source> に webm と mp4 を並べてフォールバックさせ、type も忘れずに指定します。autoplay による自動再生は muted とセットでないとブラウザにブロックされるため、背景動画などは autoplay muted loop playsinline をまとめて使うのが定番です。さらに poster でサムネイルを、<track> で字幕を加えれば、見栄えとアクセシビリティの両面を整えられます。まずは controls 付きの最小構成から試し、用途に合わせて属性を足していくとよいでしょう。