HTML5 から導入された videoタグ を使うと、YouTube など外部サービスに頼らず、
自分のサイトに直接動画を埋め込むことができます。
この記事では、
- videoタグの基本構造
- controls / autoplay / loop などの属性
- mp4など対応形式
- 実際のサンプルコード
- スマホ対応の注意点
を、初心者向けにわかりやすく解説します。
videoタグとは？
HTMLで動画を直接再生するタグ のことです。
動画ファイル（mp4 / webm など）を
ブラウザ上でそのまま読み込み、再生できます。
動画を埋め込む基本構造（最少コード）
最もシンプルな書き方はこちら：
<video src="movie.mp4" controls></video>
解説
src… 動画ファイルのURLcontrols… 再生ボタンなどが表示される
最低限、この2つがあれば再生できます。
よく使う属性（controls, autoplay など）
controls（必須）
controls
再生・停止・音量などの操作バーを表示。
autoplay（自動再生）
autoplay
ページを開いた瞬間に再生する。
※スマホでは無音でないと動かない（後述）
muted（無音再生）
muted
音声をミュートに。
→ autoplay とセットで使うケースが多い。
loop（ループ再生）
loop
動画が終わると自動で最初から再生。
playsinline（スマホで全画面化を防ぐ）
playsinline
iPhone などで動画を インライン再生 するために必要。
width / height（サイズ指定）
width="640"
height="360"
CSSで指定してもOK。
複数フォーマットを指定する <source>
ブラウザによって再生できる形式が違うため、
複数のフォーマットを指定することが推奨されています。
例：
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
お使いのブラウザは videoタグに対応していません。
</video>
YouTubeとの違いと使い分け
| 項目 | videoタグ | YouTube埋め込み |
|---|---|---|
| 動画ファイル | 必要 | 不要 |
| サーバー容量 | 消費する | しない |
| 再生速度 | 軽い | 少し重い |
| 広告 | なし | あり |
| 著作権 | 自分で管理が必要 | YouTube側管理 |
自分の動画 → videoタグがおすすめ
一般公開動画 → YouTube が楽
スマホでの注意点（特に iPhone）
iOSでは以下の制限があります：
音声つき autoplay は動かない
→ 自動再生したい場合は必ず muted を付ける
<video src="movie.mp4" autoplay muted playsinline></video>
playsinline を付けないと全画面再生になる
→ Webデザイン上困るため、ほぼ必須です。
実践サンプル
操作バー付き・最も一般的な動画埋め込み
<video src="movie.mp4" controls width="640" height="360" playsinline></video>
自動再生・ループ再生（トップページ向け）
<video src="movie.mp4" autoplay muted loop playsinline></video>
複数フォーマット対応版
<video controls playsinline>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
ブラウザが動画再生に対応していません。
</video>
よくあるエラーと対処法
自動再生されない → muted をつける
スマホで全画面になる → playsinline をつける
再生ボタンが出ない → controls を付け忘れ
ローカル動画が再生されない → サーバーにアップされていない
動画が真っ黒 → mp4形式が壊れている or コーデックが非対応
まとめ
- videoタグで動画を直接埋め込める
- controls はほぼ必須
- autoplay は muted がセットで必要（スマホ対応）
- playsinline は iPhone向けに必須
- mp4 が最も一般的で互換性が高い
- YouTube embed と用途で使い分ける
初心者でも扱いやすく、Webサイトに動きを加えられる便利なタグです。
著者からのひと言
videoタグは、HTML5で強化された強力なメディア要素です。
使い方はとてもシンプルですが、スマホ固有の挙動などを知っておくと実務でも役立ちます。まずは短いサンプルコードから試してみてください！
次回の記事は「audioタグで音声を埋め込む方法」です。
この記事が役に立ったら、いいね！お願いします！
