HTML5 ビデオ

Volardev 編集部 April 12, 2026

かつてWebで動画を再生するには Flash などのプラグインが必要でしたが、HTML5 の登場により <video> タグ一つでネイティブな動画再生が可能になりました。2026年現在、主要なすべてのブラウザで安定した動画視聴体験を提供できます。

1. 基本的なマークアップ

動画を表示するための最もシンプルなコードです。controls 属性を追加することで、ブラウザ標準の再生・停止・音量ボタンが表示されます。

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

1.1 `<source>` 要素の重要性

ブラウザによってサポートしている動画形式が異なるため、複数の形式を用意しておくのがベストプラクティスです。ブラウザはリストの上から順に確認し、最初にサポートしている形式を再生します。

2. 主な属性 (Video Attributes)

動画の挙動をコントロールするための強力な属性が用意されています。

属性	説明
`controls`	再生、一時停止、音量などのコントローラーを表示します。
`autoplay`	動画を自動的に再生開始します（後述の注意点あり）。
`muted`	音声をデフォルトで消音にします。
`loop`	再生が終わったら自動的に最初から繰り返します。
`poster`	動画が読み込まれる前や再生ボタンが押される前に表示する画像（サムネイル）を指定します。
`preload`	ページ読み込み時に動画データをどう扱うか（`auto`, `metadata`, `none`）を指定します。
`width / height`	プレイヤーのサイズを指定します。アスペクト比を維持するために両方指定することが推奨されます。

3. サポートされるビデオ形式

現在、Webで一般的に使用される形式は以下の3つです。

形式	拡張子	ブラウザサポート
MP4	`.mp4`	最高。すべてのブラウザ、デバイスで動作。
WebM	`.webm`	非常に高い。モダンブラウザ（Chrome, Firefox, Safari等）で動作。
Ogg	`.ogv`	一部のブラウザで動作。互換性のために追加されることがある。

4. 実践的な Tips と注意点

4.1 自動再生の黄金ルール

ユーザー体験（UX）を損なわないよう、現在の多くのブラウザでは「音が出る動画の自動再生」をブロックします。
広告や背景動画として自動再生させたい場合は、必ず muted をセットにする必要があります。

<video autoplay muted loop poster="thumbnail.jpg">
  <source src="bg-video.mp4" type="video/mp4">
</video>

4.2 フォールバック（代替）コンテンツ

<video> タグをサポートしていない非常に古い環境や、読み込みに失敗した場合のために、タグの間にテキストやダウンロードリンクを記述しておくことがマナーです。

5. まとめ

HTML5 ビデオをマスターすれば、リッチな視覚体験を低コストで実装できます。

チェック項目	推奨設定
互換性	最低でも MP4 形式を含める。
アクセシビリティ	`controls` を付けるか、自動再生時は `muted` にする。
パフォーマンス	`poster` を設定して、動画読み込み中の空白を避ける。
モバイル対応	レスポンシブにする場合は CSS で `width: 100%;` `height: auto;` を設定する。

Webサイトにダイナミックな動きを加えたいなら、まずはこの <video> タグから始めてみましょう。