HTML REFERENCE

メディア・画像

<video> 要素

ー 動画コンテンツをページに埋め込むメディア要素。字幕・コントロール・フォールバックの設定が重要

POINT !

<video> 要素のポイント！

  • controls 属性を必ず付与する。省略すると再生・停止・音量調整などのブラウザ標準コントロールが非表示になり、キーボードユーザーやスクリーンリーダーユーザーが操作できなくなる。カスタムコントロールを実装する場合も ARIA とキーボード操作を完全にサポートする必要がある。
  • 字幕（<track kind="subtitles">）と音声解説（<track kind="descriptions">）の提供はアクセシビリティの要件。聴覚・視覚に障害のあるユーザーや、音を出せない環境のユーザーへの配慮として重要。WCAG 2.1 では収録済み動画への字幕提供がレベル A（最低基準）で要求される。
  • 複数の <source> 要素を使うことでブラウザごとに対応フォーマットを振り分けられる。MP4（H.264）は最も広く対応しているが、WebM（VP9/AV1）は同等画質でファイルサイズが小さい。<source> を列挙し、ブラウザが上から順に対応フォーマットを選ぶ仕組みを活用する。
  • autoplay を使う場合は muted 属性とセットで指定する。多くのブラウザは音声付きの自動再生をブロックするが、muted autoplay の組み合わせは許可される。背景動画などの装飾目的の動画には prefers-reduced-motion メディアクエリも考慮する。

概要

<video> 要素は HTML5 で導入された、動画コンテンツをページに直接埋め込むためのメディア要素です。
Flash プラグインなしでブラウザネイティブに動画再生が可能になったことは、Web の歴史における大きな転換点でした。

<video> の主要な機能は次の通りです。

① 複数フォーマットのフォールバック
<source> 要素を複数記述することで、ブラウザが対応するフォーマットを自動選択します。

② ブラウザ標準コントロール
controls 属性を付与するだけで、再生・一時停止・音量・シークバーなどのUIが表示されます。

③ 字幕・音声解説
<track> 要素で WebVTT 形式の字幕ファイルを読み込めます。

④ 再生の細かい制御
autoplay・loop・muted・preload など多くの属性で動画の動作を制御できます。

外部サービス（YouTube・Vimeo）の動画を埋め込む場合は <iframe> を使いますが、
自社でホストする動画コンテンツには <video> を直接使うのが適切です。
パフォーマンス・プライバシー・デザインの自由度の観点でも自社ホストが有利な場面があります。

具体的な役割

製品デモ動画・チュートリアル動画・背景動画・インタビュー映像など、自社サーバーや CDN にホストした動画コンテンツの埋め込みに使う。YouTube などの外部動画は <iframe> で埋め込む。

アクセシビリティ

♿ 動画のアクセシビリティ対応は複数の層で考える必要があります。

① コントロールの提供
controls 属性を付与し、ブラウザ標準 UI を使えるようにする。
カスタム UI を実装する場合は、すべてのボタンにキーボードフォーカスと適切な aria-label を付与する。

② 字幕（Captions / Subtitles）
<track kind="captions"> で音声・効果音の書き起こしを提供する（聴覚障害ユーザー向け）。

③ 音声解説（Audio Description）
<track kind="descriptions"> で映像の内容を音声で解説する（視覚障害ユーザー向け）。

④ 自動再生の制限
autoplay は vestibular disorder（前庭障害）ユーザーに悪影響を与える可能性があるため、
@media (prefers-reduced-motion: reduce) で制御する。

ネスト（入れ子）のルール

📦 <video> の内部には以下を配置できます。

・<source> 要素（複数可）：動画ファイルのフォーマット別指定
・<track> 要素（複数可）：字幕・キャプション・音声解説の読み込み
・フォールバックコンテンツ（テキスト・リンクなど）：<video> 非対応ブラウザ向け

<source> と <track> は順番があります。
<source> をすべて先に書き、その後に <track> を記述します。
フォールバックコンテンツはさらにその後に置きます。

技術の変遷：昔の常識 vs 今の常識

TRADITION (昔)
HTML5 以前は Flash（Adobe Flash Player）プラグインなしで動画再生ができなかった。Flash はセキュリティリスクが多く、iOS では動作せず、2020年末にサポートを終了した。また、動画フォーマットの統一規格がなく、ブラウザごとに対応コーデックが異なり対応が困難だった。
MODERN (今)
HTML5 の <video> によりプラグイン不要でのネイティブ動画再生が実現。MP4（H.264）が最も広くサポートされ、WebM（VP9/AV1）との組み合わせで高品質・軽量配信が可能になった。Intersection Observer API と組み合わせたビューポート内自動再生や、Media Session API によるメディアキー対応など、より高度な制御も実現できる。

主要な属性

属性名 説明
HTMLカテゴリ フローコンテンツ、フレージングコンテンツ、エンベデッドコンテンツ、インタラクティブコンテンツ（controls属性あり時）、パルパブルコンテンツ
配置可能な要素 <source>・<track>・フォールバックコンテンツ（ただし <video> や <audio> は含められない）
親要素の制限 エンベデッドコンテンツを受け入れる任意の要素
ARIAロール 暗黙のロールなし。カスタムコントロール実装時は各ボタンに role と aria-label を付与する

利用例

字幕・複数フォーマット対応の動画埋め込み

WebM と MP4 のフォールバック、日英字幕の提供、poster 画像設定を盛り込んだ実践的な実装例。

CSS Style
body { font-family: sans-serif; padding: 24px; background: #0f172a; } .video-mockup { background: #1e293b; border-radius: 10px; aspect-ratio: 16/9; max-width: 600px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #334155; } .video-screen { flex: 1; background: linear-gradient(135deg, #1e293b, #0f172a); display: flex; align-items: center; justify-content: center; color: #475569; font-size: 14px; gap: 10px; } .video-controls { background: rgba(0,0,0,0.6); padding: 10px 16px; display: flex; align-items: center; gap: 12px; } .ctrl-btn { width: 28px; height: 28px; border-radius: 50%; background: white; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; } .progress { flex: 1; height: 4px; background: #334155; border-radius: 2px; } .progress-fill { width: 35%; height: 100%; background: #1a56db; border-radius: 2px; } .vol { font-size: 16px; }
HTML Structure
<video
  controls
  width="800"
  height="450"
  poster="/videos/thumbnail.jpg"
  preload="metadata"
>
  <!-- WebM を優先（ファイルサイズが小さい） -->
  <source src="/videos/demo.webm" type="video/webm">
  <!-- MP4 をフォールバック（広く対応） -->
  <source src="/videos/demo.mp4" type="video/mp4">

  <!-- 字幕（日本語）-->
  <track
    kind="subtitles"
    src="/videos/subtitles-ja.vtt"
    srclang="ja"
    label="日本語"
    default
  >
  <!-- 字幕（英語）-->
  <track
    kind="subtitles"
    src="/videos/subtitles-en.vtt"
    srclang="en"
    label="English"
  >

  <!-- <video> 非対応ブラウザ向けフォールバック -->
  <p>お使いのブラウザは動画再生に対応していません。
    <a href="/videos/demo.mp4">動画をダウンロード</a>してご覧ください。
  </p>
</video>

背景動画（muted autoplay）

ヒーローセクションなどで使う装飾目的の背景動画。音声なし・自動再生・ループ設定と、動きを抑えるメディアクエリを組み合わせたパターン。

CSS Style
body { font-family: sans-serif; margin: 0; padding: 24px; background: #f8fafc; } .hero-demo { position: relative; background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%); border-radius: 12px; overflow: hidden; padding: 60px 40px; text-align: center; color: white; } .hero-demo h1 { font-size: 28px; margin-bottom: 12px; } .hero-demo p { color: rgba(255,255,255,0.7); margin-bottom: 24px; } .video-indicator { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,0.15); padding: 4px 10px; border-radius: 20px; font-size: 12px; display: flex; align-items: center; gap: 6px; } .dot { width: 6px; height: 6px; background: #ef4444; border-radius: 50%; animation: blink 1s infinite; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
HTML Structure
<div class="hero">
  <video
    class="hero__video"
    autoplay
    muted
    loop
    playsinline
    preload="auto"
    aria-hidden="true"<!-- 装飾目的なのでスクリーンリーダーから隠す -->
  >
    <source src="/videos/hero-bg.webm" type="video/webm">
    <source src="/videos/hero-bg.mp4" type="video/mp4">
  </video>

  <div class="hero__content">
    <h1>Web制作を、もっとスムーズに。</h1>
    <p>HTML・CSS・JavaScript のリファレンス辞典</p>
  </div>
</div>

<style>
  .hero { position: relative; overflow: hidden; }
  .hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* 動きを減らす設定が ON のユーザーには動画を停止 */
  @media (prefers-reduced-motion: reduce) {
    .hero__video { display: none; }
  }
</style>

よくある誤用・注意点

controls を省略したり、autoplay に muted を付けなかったりするのはよくある誤り。また字幕なしの動画公開はアクセシビリティ要件を満たせない。

CSS
HTML (Incorrect)
<!-- ❌ 悪い例 -->
<!-- controls なし → キーボード操作不可 -->
<video src="/videos/demo.mp4" autoplay></video>

<!-- muted なし → ブラウザに自動再生をブロックされる -->
<video src="/videos/demo.mp4" autoplay controls></video>

<!-- 字幕なし → アクセシビリティ不足 -->
<video controls>
  <source src="/videos/demo.mp4" type="video/mp4">
</video>

<!-- ✅ 良い例 -->
<video controls preload="metadata" poster="thumb.jpg">
  <source src="/videos/demo.webm" type="video/webm">
  <source src="/videos/demo.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitles-ja.vtt" srclang="ja" label="日本語" default>
</video>

Try it Live: <video>

×

リアルタイムで結果が反映されます。