HTML <video> タグ

JPKODA 編集部 May 6, 2026

<video> タグを使用すると、外部プラグインやプレイヤーを必要とせず、動画コンテンツを HTML ページに直接埋め込むことができます。
これにより、シームレスで統合されたユーザーエクスペリエンス（UX）を提供することが可能になります。
本セクションでは、<video> タグの属性、機能、およびベストプラクティスについて深く掘り下げていきます。

1. `<video>`タグの基本理解

HTML5 における <video> タグは、動画や映画を定義するための要素です。
これはコンテナ要素であり、一つまたは複数の <source> タグを内包できます。各ソースタグは異なる動画ファイルを指し、ブラウザは自身がサポートしている最初の <source> を自動的に選択します。ブラウザが <video> 要素をサポートしていない場合にのみ、タグ内部のテキスト内容が表示されます。

以下は、<video> タグの基本的な使用例です。

<video controls width="640" height="360">
  <source src="myvideo.mp4" type="video/mp4">
  <source src="myvideo.webm" type="video/webm">
  お使いのブラウザは video タグをサポートしていません。
</video>

この例のポイント：

controls: 再生、一時停止、音量調節などのデフォルトのコントロール UI を追加します。
width と height: 動画の表示サイズを指定します。
<source> タグ: ブラウザの互換性を確保するために、異なる動画フォーマットを提供します。
「お使いのブラウザは...」: これはフォールバックメッセージ（Fallback message）です。

2. `<video>` タグの主要な属性

<video> タグには、動画の再生、外観、動作を制御するための多様な属性が用意されています。特に重要なものを詳しく見ていきましょう。

2.1 src 属性（非推奨）

<source> タグを使用する方法が推奨されますが、<video> タグ内に直接 src 属性を記述してソースを指定することも可能です。ただし、複数のフォーマットを提供して柔軟性を高めるためには、<source> タグの利用が適しています。

<video controls width="640" height="360" src="myvideo.mp4" type="video/mp4">
  お使いのブラウザは video タグをサポートしていません。
</video>

2.2 controls 属性

controls 属性は、動画プレイヤーにデフォルトのコントロール（インターフェース）を表示します。これには通常、再生/一時停止、音量、プログレスバー、全画面表示オプションが含まれます。

<video controls>
  <source src="myvideo.mp4" type="video/mp4">
</video>

この属性がない場合、動画はロードされますが、ユーザーは再生をコントロールできません（JavaScript でカスタムコントロールを実装する場合を除く）。

2.3 width と height 属性

これらの属性は、動画プレイヤーの幅と高さをピクセル単位で指定します。これらを設定しておくことで、動画のロード中にページレイアウトが崩れる現象（リフロー / Reflow）を防ぐことができます。

<video controls width="640" height="360">
  <source src="myvideo.mp4" type="video/mp4">
</video>

2.4 autoplay 属性

autoplay 属性を指定すると、ページがロードされた瞬間に動画が自動的に再生されます。
注意: この属性はユーザー体験を損なう可能性があるため、慎重に使用してください。多くのモダンブラウザでは、音声付きの自動再生をデフォルトでブロックしています。

<video controls autoplay muted width="640" height="360">
  <source src="myvideo.mp4" type="video/mp4">
</video>

ヒント: ブラウザの自動再生ポリシーにより、通常は muted（消音）属性を併用しないと自動再生が機能しません。

2.5 loop 属性

loop 属性を指定すると、動画が終了した後に自動的に最初から再生を繰り返します。

<video controls loop width="640" height="360">
  <source src="myvideo.mp4" type="video/mp4">
</video>

2.6 muted 属性

muted 属性は動画を消音状態にします。これは、ブラウザの自動再生ポリシーを回避するために autoplay と組み合わせてよく使われます。

<video controls autoplay muted width="640" height="360">
  <source src="myvideo.mp4" type="video/mp4">
</video>

2.7 poster 属性

poster 属性は、動画のダウンロード中やユーザーが再生ボタンを押す前に表示される画像（サムネイル画像）を指定します。

<video controls poster="thumbnail.jpg" width="640" height="360">
  <source src="myvideo.mp4" type="video/mp4">
</video>

2.8 preload 属性

preload 属性は、ページロード時に動画ファイルをどの程度ロードするかを指定します。以下の3つの値を受け取ります。

auto: ページロード時に動画全体をロードします。
metadata: ページロード時にはメタデータ（再生時間、サイズなど）のみをロードします。
none: ユーザーが再生を開始するまで動画をロードしません。

<video controls preload="metadata" width="640" height="360">
  <source src="myvideo.mp4" type="video/mp4">
</video>

preload="metadata" はページ読み込み速度の向上に役立ち、preload="none" は特にモバイルユーザーの帯域幅を節約するのに有効です。

3. `<source>`タグ

<source> タグは、<video> や <audio> 要素に対して複数のメディアリソースを指定するために使用されます。異なるフォーマットを提供することで、様々なブラウザでの互換性を確保します。

3.1 src 属性

<source> タグの src 属性は、動画ファイルの URL を指定します。

<source src="myvideo.mp4" type="video/mp4">

3.2 type 属性

type 属性は動画ファイルの MIME タイプを指定します。これにより、ブラウザはファイルをダウンロードする前に再生可能かどうかを判断できます。一般的な MIME タイプは以下の通りです：

video/mp4: MP4 動画用
video/webm: WebM 動画用
video/ogg: Ogg 動画用

<source src="myvideo.webm" type="video/webm">

4. 複数フォーマットの提供

幅広いブラウザ互換性を確保するためには、複数の動画フォーマットを提供することが不可欠です。

<video controls width="640" height="360">
  <source src="myvideo.mp4" type="video/mp4">
  <source src="myvideo.webm" type="video/webm">
  <source src="myvideo.ogg" type="video/ogg">
  お使いのブラウザは video タグをサポートしていません。
</video>

この例では、ブラウザはまず MP4 の再生を試みます。MP4 をサポートしていない場合は WebM、次に Ogg を試します。すべてサポートされていない場合に、フォールバックメッセージが表示されます。

5. 主要な動画フォーマットとコーデック

異なるプラットフォームで高品質な動画を提供するために、動画形式について理解しておくことが重要です。

MP4: 最も広くサポートされているフォーマット。H.264 ビデオコーデックと AAC オーディオコーデックを使用します。品質と互換性のバランスに優れています。
WebM: Google が開発したオープンソース形式。VP8 または VP9 ビデオコーデックを使用します。ライセンスフリーで、ウェブでの使用に非常に適しています。
Ogg: Theora ビデオコーデックを使用したオープンソース形式。MP4 や WebM に比べると利用シーンは限定的です。

5.1 選定のアドバイス

ブラウザ互換性: ターゲットユーザーのブラウザがその形式をサポートしているか確認してください。
ファイルサイズ: 画質を大きく損なうことなく、ネットワーク転送に適したサイズに最適化してください。
品質: 妥当なファイルサイズで良好な視覚品質を提供するコーデックを選択してください。

6. アクセシビリティの考慮 (Accessibility)

字幕の提供 (Captions): 字幕は、聴覚障害を持つユーザーにとって不可欠です。<track> 要素を使用して字幕を追加できます（詳細は後の章で解説します）。
テキストトランスクリプト (Transcripts): 動画の音声内容をテキスト版として提供します。
音声解説 (Audio Descriptions): 視覚障害を持つユーザーのために、映像要素を説明するナレーションを提供します。
キーボード操作の確保: すべてのビデオコントロールがキーボードのみで操作可能であることを確認してください。

7. 実戦的なサンプルコード

7.1 例 1：基本的な動画の埋め込み

コントロール、指定されたサイズ、および複数のソースフォーマットを持つシンプルな動画の埋め込み。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>基本動画サンプル</title>
</head>
<body>
  <h1>マイビデオ</h1>
  <video controls width="640" height="360">
    <source src="myvideo.mp4" type="video/mp4">
    <source src="myvideo.webm" type="video/webm">
    お使いのブラウザは video タグをサポートしていません。
  </video>
</body>
</html>

7.2 例 2：自動再生されるミュート動画

消音状態でループ再生される自動再生動画の実装例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>自動再生ミュート動画サンプル</title>
</head>
<body>
  <h1>自動再生動画</h1>
  <video autoplay muted loop width="640" height="360">
    <source src="myvideo.mp4" type="video/mp4">
    <source src="myvideo.webm" type="video/webm">
    お使いのブラウザは video タグをサポートしていません。
  </video>
</body>
</html>

7.3 例 3：ポスター画像（サムネイル）付き動画

poster 属性を使用して、再生前に画像を表示する方法です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ポスター画像付き動画サンプル</title>
</head>
<body>
  <h1>ポスター付き動画</h1>
  <video controls poster="poster.jpg" width="640" height="360">
    <source src="myvideo.mp4" type="video/mp4">
    <source src="myvideo.webm" type="video/webm">
    お使いのブラウザは video タグをサポートしていません。
  </video>
</body>
</html>

1. <video>タグの基本理解

2. <video> タグの主要な属性