トラブルシュート

Chromeで動画が自動再生されないときの原因と直し方

作成したHTMLの動画がChromeで自動再生されない、という状況はAI生成コンテンツでよく起こります。Chrome独自の自動再生ポリシーが適用されるため、属性の指定方法次第で動作が大きく変わります。原因を理解して正しく修正する手順を解説します。

よくある原因

Chromeは2018年以降、音声付き動画の自動再生をデフォルトでブロックしています。`<video autoplay>`だけでは音声付き動画は再生されません。自動再生を成立させるには`<video autoplay muted>`と`muted`属性を必ず追加する必要があります。AI生成HTMLではautoplayのみで`muted`が抜けているケースが最も多い原因です。

もう一つの原因はJavaScriptでplay()を呼び出しているケースです。ユーザーのインタラクション(クリック・タップ)が発生する前にplay()を呼ぶと、Chromeはその呼び出しをブロックしPromiseをrejectします。コンソールに`Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first`と表示されていたら、この問題です。

  • 相手がログインなしで開ける状態か確認する
  • PCとスマホで最低1回ずつ表示を確認する
  • 内部情報・個人情報・不要な外部送信が残っていないか見る
  • レビュー期限と修正時の差し替え方を決めておく

自分側で確認すること

HTMLを開いて`<video`要素を検索し、`autoplay`と`muted`の両方が設定されているか確認します。`playsinline`属性もiOSのためには必要ですが、Chrome PCでは必須ではありません。また`loop`属性を合わせて指定しておくとバックグラウンド動画として繰り返し再生できます。修正後は`<video autoplay muted loop playsinline>`の形が推奨の書き方です。

ChromeのDevToolsを開き(F12)、Consoleタブにエラーが出ていないか確認します。`AutoplayPolicy`に関するメッセージや`play() request was interrupted`のエラーが出ていれば、スクリプト側での自動再生試行が失敗しています。該当するJavaScriptコードを見つけて、mutedをtrue設定した上でplay()を呼ぶよう修正してください。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

相手側で確認すること

受け取り側の相手から「動画が再生されない」と連絡が来た場合、まずChromeのバージョンを確認してもらいます。`chrome://settings/help`でバージョンが分かります。Chrome 66以前を使っている場合は別の問題の可能性があります。また、企業ネットワーク経由の場合、プロキシやファイアウォールが動画ファイルのMIMEタイプをブロックしているケースもあります。

共有したURLが`file://`形式ではなくギガサイト便が発行した`https://`形式であることも確認してもらいましょう。ローカルファイルとして開いた場合、Chromeのセキュリティポリシーで動画が読み込まれないことがあります。HTTPSのURLから開くことで多くのメディア関連エラーが解消します。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

再発防止の運用

AIに動画を含むHTMLを生成させる場合は、プロンプトに「video要素にはautoplay・muted・loop・playsinlineを必ず設定する」と明記します。また「JavaScriptでplay()を使う場合はmuted = trueを先に設定してから呼び出す」という条件も追加すると、スクリプト起因の自動再生ブロックを防げます。

ギガサイト便で公開後は必ずシークレットウィンドウでURLを開いて確認しましょう。通常のウィンドウでは以前に動画を許可したサイトのキャッシュが影響することがあります。初めてURLを開く状態をシークレットウィンドウで再現することで、受信者が見る環境に近い確認ができます。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

よくある質問

muted属性を追加したのに動画が再生されません

動画ファイルのパスが間違っている可能性があります。DevToolsのNetworkタブを開いて動画ファイルのリクエストが404や403になっていないか確認してください。ギガサイト便に動画ファイル単体ではなく、HTMLとアセットをzipにまとめてアップロードする必要があります。

Chromeでは再生されましたが、Safariでは再生されません

SafariでHLS以外の動画を自動再生するにはplaysinlineが必須です。`<video autoplay muted loop playsinline>`の形式で記述し、動画フォーマットはMP4(H.264)が最も互換性が高いです。WebMやAV1はSafariで未サポートのため避けてください。

動画は再生されていますが音が出ません

mutedを設定しているため音が出ないのは正常な動作です。ユーザーが明示的にミュート解除するUIを提供するか、ボタンクリックでplay()を再呼び出しする設計に変更してください。自動再生で音を出すことはChromeのポリシー上できません。

関連記事

トラブルシュート

OGP画像が更新されないときの原因と直し方

HTMLページを更新してもOGP画像が変わらない原因と直し方を知りたいWeb制作者向けに、キャッシュの仕組み・デバッグツールの使い方・再発防止の運用を具体的な手順で解説する記事。

5分で読める
トラブルシュート

ファビコンが更新されないときの原因と直し方

ファビコンが更新されない現象に悩むWeb制作者・デザイナー向けに、ブラウザキャッシュ・CDNキャッシュ・HTML記述ミスの3層を切り分けて解決する手順をまとめた記事。

5分で読める
トラブルシュート

QRコードで開くと404になるときの原因と直し方

QRコードを読み取ると404になってしまう問題を解決したい制作者・担当者向けに、URL設定ミス・ページ削除・認証壁の3パターンを切り分けて修正する手順をまとめた記事。

5分で読める
「トラブルシュート」の記事をもっと見る →