videoタグ -動画を埋め込んで再生する｜HTML辞典
<video>タグとは？
<video> タグは、HTML文書内で動画を埋め込んで再生するためのタグ です。<source> タグを使用することで、異なるフォーマットの動画ファイルを指定し、再生できるブラウザの互換性を向上させることができます。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、エンベッデッドコンテンツ（Embedded Content）、パルパブルコンテンツ（Palpable Content）。
閉じタグの有無
<video> は開始タグ（<video>）と閉じタグ（</video>）の両方が必要です。
基本的な記述方法
<video controls width="640" height="360">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
お使いのブラウザは動画タグをサポートしていません。
</video>使用できる主な属性
<video> タグには複数の属性があります。
| 属性名 | 説明 | 例 |
|---|---|---|
src | 動画ファイルのURLを指定（<source> を使わない場合） | <video src="video.mp4" controls></video> |
controls | 再生コントロールを表示 | <video controls>...</video> |
autoplay | ページ読み込み時に自動再生（ミュートが必要） | <video autoplay muted>...</video> |
loop | 動画をループ再生 | <video loop>...</video> |
muted | 動画をミュート状態で開始 | <video muted>...</video> |
poster | 動画再生前に表示されるサムネイル画像 | <video poster="thumbnail.jpg">...</video> |
width | 動画の横幅を指定（px） | <video width="640">...</video> |
height | 動画の高さを指定（px） | <video height="360">...</video> |
preload | 動画の事前読み込み設定 | <video preload="auto">...</video> |
CSSを使ったデザイン変更
動画プレイヤーのスタイルを調整したい場合は、CSSを活用できます。
video {
width: 100%;
max-width: 640px;
border-radius: 10px;
}適切な使用例
✅ 動画を再生できるコントロールを表示する
<video controls width="640" height="360">
<source src="video.mp4" type="video/mp4">
お使いのブラウザは動画タグをサポートしていません。
</video>✅ autoplay を使用して自動再生する（ミュート推奨）
<video autoplay muted>
<source src="background-video.mp4" type="video/mp4">
</video>✅ loop を使用して動画を繰り返し再生する
<video controls loop>
<source src="background-video.mp4" type="video/mp4">
</video>✅ poster を使用してサムネイルを設定する
<video controls poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
</video>✅ preload を使用して読み込み設定を調整する
<video controls preload="auto">
<source src="video.mp4" type="video/mp4">
</video>適切でない使用例（誤った使い方）
❌ <video> タグ内に <source> なしで src を使用するのは非推奨
<!-- NG: <source> を使わずに <video> で直接指定 -->
<video src="video.mp4" controls></video>✅ 正しい書き方（<source> を使用）
<video controls>
<source src="video.mp4" type="video/mp4">
</video>❌ autoplay を使う際に muted を指定しないとブラウザでブロックされる
<!-- NG: autoplay のみでは再生されない -->
<video autoplay>
<source src="video.mp4" type="video/mp4">
</video>✅ 正しい書き方（muted を追加）
<video autoplay muted>
<source src="video.mp4" type="video/mp4">
</video><video>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<video> | 動画を再生 | controls でプレイヤー表示 | 動画コンテンツの埋め込み |
<audio> | 音声ファイルを再生 | controls でプレイヤー表示 | BGM、音声コンテンツの埋め込み |
<source> | 動画や音声のソース指定 | <video> や <audio> 内で使用 | 互換性向上のための複数フォーマット指定 |
<iframe> | 外部コンテンツの埋め込み | YouTubeなどの動画埋め込み | 外部プレイヤーの利用 |
使用上の注意点
✅ controls を指定してユーザーが操作できるようにする
- ユーザーが再生・停止できるように
controlsをつけるのが推奨される。
✅ autoplay を使用する場合は muted をセットにする
- ユーザー操作なしで自動再生する場合は、ミュートが必須（ブラウザによっては
autoplayだけでは動作しない）。
✅ preload を適切に設定する
auto：ページ読み込み時に動画を事前読み込み（デフォルト）。metadata：動画のメタデータのみを読み込み。none：ページ読み込み時に動画を読み込まない。
関連タグ
まとめ
<video>タグは、HTML文書内で 動画を埋め込んで再生するためのタグ です。<source> を使用して複数フォーマットを指定し、controls を追加してユーザーが操作できるようにするのが一般的な使い方です。
