HTML
videoタグで動画が再生されない
ファイルパスまたはフォーマットの問題
こんな症状
<video>タグを書いたのに動画が表示・再生されない。動画を埋め込むときに起きやすいよ。
まず試す
src のパスが正しいか確認し、MP4(H.264)形式にして controls 属性を付ける。
html
<video src="v.mp4" controls></video>これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓再生ボタンが出ない
→ controls 属性を付ける。 - ✓動画が読み込まれない（パス）
→ Networkタブで src が404でないか確認し、パスを直す。 - ✓ブラウザで再生できない形式
→ MP4（H.264）にする。互換性が最も高い。
なぜ起きる？
src属性のパスが間違っている、ブラウザが対応していない動画フォーマットを使っている、またはcontrols属性がないため再生ボタンが表示されていないよ。ブラウザによって対応フォーマットが異なるため、MP4（H.264）が最も互換性が高いよ。
✕ エラーが起きるコード
<video src="v.mp4"></video>
<!-- controls がない -->✓ 直したコード
<video src="v.mp4" controls></video>✅ 直ったか確認
再生ボタンが表示され、クリックで動画が再生されればOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- video/audio が自動再生されない — ブラウザの自動再生ポリシーでブロックされている
- 画像が表示されない — 画像パスが間違っている
- 拡張子が表示されない（.html が見えない） — OS の設定で拡張子が非表示
- favicon（ファビコン）が表示されない — faviconのパス・形式・キャッシュの問題
- iframeが表示されない — 埋め込み先がiframeを拒否している
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説