トラブルシュート

Chromeで動画が自動再生されないときに共有前に確認するチェックリスト

HTML内の動画要素を正しく設定しておけば、ChromeでもSafariでも自動再生が安定します。公開前に自分でチェックできる項目を整理しました。属性の書き方からファイル形式、公開後の確認方法まで、順番に確認するだけで大半のトラブルを事前に防げます。

よくある原因

自動再生が機能しないケースの大半はmuted属性の漏れです。Chromeは音声付きの自動再生を許可していないため、mutedなしのautoplayは無視されます。加えて、JavaScriptで動画を動的に挿入する場合、DOMに追加する前にautoplayとmutedの両方をプロパティとして設定しないとブロックされます。

動画ファイルの形式も原因になります。ChromeはMP4(H.264)とWebMをサポートしますが、MOVやAVIはサポートしません。AI生成HTMLが`<video src="sample.mov">`と出力した場合、Chromeは動画を読み込めず何も表示しません。アップロード前に動画ファイルをMP4に変換することが必須です。

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

自分側で確認すること

チェック項目:(1)`<video>`タグにautoplay・muted・loop・playsinlineが揃っているか。(2)src属性のファイルパスが正しいか(相対パス・絶対パスの確認)。(3)動画ファイルの拡張子がmp4またはwebmか。(4)HTMLとZIPで動画ファイルを同梱しているか(ギガサイト便はZIPで一括アップロードが可能)。

DevToolsのNetworkタブでHTMLを読み込んだときに動画ファイルのリクエストが成功しているか確認します。ステータス200で動画が読み込まれているのに再生されない場合はConsoleタブのエラーを確認します。`NotAllowedError`が出ていればポリシーブロック、`NotSupportedError`であればファイル形式の問題です。

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

相手側で確認すること

相手から「動画が表示されない」と連絡が来た場合、まず「ページを再読み込みした状態のスクリーンショットを送ってほしい」と依頼します。動画のサムネイル(最初のフレーム)すら表示されていない場合はファイルが読み込まれていない可能性が高く、動画のサムネイルが見えて再生ボタンが出ている場合は自動再生ポリシーの問題です。

相手がCorporate PCでChromeの企業ポリシーが適用されているケースでは、自動再生がグループポリシーで無効になっていることがあります。「再生ボタンを手動でクリックすると再生されるか」を確認してもらい、できるなら動画前に再生ボタンを配置するUIに変更することを検討してください。

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

再発防止の運用

動画を含むHTMLを作成するときの社内ルールとして、「動画はMP4(H.264)に統一、タグは必ず`<video autoplay muted loop playsinline>`形式、ファイルはHTMLと同じフォルダに配置してZIP化」を定めておくと担当者が変わっても品質が維持できます。

ギガサイト便でZIPをアップロードする際は、ZIPのルートにindex.htmlと動画ファイルを入れる構成が最もシンプルで相対パスのトラブルが起きません。サブフォルダを作った場合は`src="assets/video.mp4"`のようにパスを揃えることを確認してからアップロードしましょう。

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

よくある質問

動画ファイルが大きくてZIPアップロードが時間かかります

HandBrakeなどの無料ツールでMP4を圧縮すると、画質をほぼ維持したまま容量を50〜70%削減できます。プリセット「Web Optimized」を選択してFast Start(moovアトムを先頭に移動)をオンにすると、完全ダウンロード前でも再生が始まります。

HTMLファイルには動画が埋め込みで入っていますか?ZIPにする必要がありますか

動画をBase64でHTMLに埋め込む方法もありますが、100MB超になりやすく表示が遅くなります。別ファイルとしてZIPに同梱し相対パスで参照する方がパフォーマンス上有利です。ギガサイト便はZIPアップロードに対応しています。

自動再生チェックリストを共有チームに配布する方法はありますか

このページをギガサイト便の非公開URLで共有するか、チェックリストをノーションやスプレッドシートに貼り付けてチームに配布してください。定期的にHTMLを作成するチームなら、GitリポジトリのREADMEにも記載しておくと参照しやすくなります。

関連記事

トラブルシュート

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

ChromeでHTML動画が自動再生されないトラブルを解決したい方向け。Chromeの自動再生ポリシーの仕組みから、muted属性の付け方・JavaScriptでの回避策・ギガサイト便での公開後確認まで具体的に説明します。

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