HTML
🎬 video/audio が自動再生されない
ブラウザの自動再生ポリシーでブロックされている
😰 こんな症状
autoplay 属性を付けたのに、動画や音声が自動再生されない。メディア要素を埋め込んだときに起きやすいよ。
🔍 原因
モダンブラウザはユーザー体験を保護するため、音声付きメディアの自動再生をデフォルトでブロックするよ。ユーザーが意図しない音声が突然流れるのを防ぐためのブラウザのポリシーなんだ。muted(ミュート)状態なら自動再生が許可されるよ。
❌ エラーが起きるコード
<video autoplay src="v.mp4"></video>
<!-- 音声付きは自動再生不可 --> ✅ 直し方
1. muted属性を追加する(<video autoplay muted>)。ミュート状態なら自動再生が許可される。 2. 音声付きで再生したい場合は、ユーザーのクリック操作をトリガーにしてJavaScriptでplay()を呼ぶ。 3. playsinline属性も追加するとモバイルでの互換性が上がるよ。
✅ 修正後のコード
<video autoplay muted src="v.mp4"></video>
<!-- muted を追加 --> この解決法は役立ちましたか?
🔗 関連するエラー
- videoタグで動画が再生されない — ファイルパスまたはフォーマットの問題
- 音声が自動再生されない — autoplay がブラウザにブロックされている
- 画像が表示されない — 画像パスが間違っている
- ページのレイアウトが崩れる — タグの閉じ忘れ
- リンクをクリックしても何も起きない — href 属性の書き忘れ
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは?初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス(相対パス・絶対パス)の書き方 — パスの書き方を初心者向けに解説