トラブルシュート

公開後に動画が再生されないときの対処

プレゼン資料やデモページに埋め込んだ動画が、ギガサイト便で公開したら再生されない、というケースがあります。原因は動画ファイルの添付漏れやパスのズレ、ブラウザ側の自動再生の制限などさまざまです。この記事では症状ごとに切り分け、自分でできる確認とギガサイト便での具体的な対処手順、再発防止のコツまでを順を追って説明します。

症状の確認:再生ボタンが出るかどうかを見る

まず、動画プレーヤーの枠は表示されているのに再生できないのか、枠自体が出ていないのかを確認します。枠が出ていない場合はHTMLのvideoタグやソース指定に問題がある可能性が高いです。

プレーヤーは出るが再生ボタンを押しても始まらない場合は、動画ファイルが読み込めていないか、ブラウザが対応していない形式の可能性があります。開発者ツールのコンソールでエラーを確認しましょう。

よくある原因:ファイル添付漏れと形式の不一致

動画はファイルサイズが大きいため、HTMLだけをアップロードして動画本体を入れ忘れるケースが目立ちます。外部の動画ファイルを参照している場合、その場所に届かなければ再生できません。

また、ブラウザによって再生できる形式が異なります。一般的なMP4は広く対応していますが、特殊な形式やコーデックだと環境によっては再生されないことがあります。

  • 動画ファイルをZIPに含め忘れている
  • source src のパスが実ファイルと合っていない
  • ブラウザ非対応の形式・コーデックを使っている
  • 自動再生をミュートなしで指定しブロックされている

症状別チェック表

公開後に動画が再生されないは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

  • 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
  • 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
  • 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
  • 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

自分でできる確認:パスと形式をチェックする

開発者ツールのネットワークタブを開き、動画ファイルが404になっていないか確認します。404ならファイルが見つかっていないので、添付漏れかパスのズレです。

形式が疑わしい場合は、まずMP4に変換して試すのが確実です。多くのブラウザがMP4に対応しているため、形式が原因なら改善します。自動再生が効かないときは、ミュート指定を加えると再生されることがあります。

ギガサイト便での対処手順

動画とHTML、その他のファイルをまとめてZIPで公開すると、相対パスを保ったまま動画本体も一緒に届けられます。これにより添付漏れとパスのズレを同時に防げます。

次の手順で公開し直してください。差し替えはURLを変えずに行えます。

  1. HTMLと動画ファイルを同じフォルダにまとめる
  2. videoタグのsourceパスがフォルダ構成と一致しているか確認する
  3. 動画はできればMP4形式にしておく
  4. フォルダごとZIPに圧縮する
  5. ギガサイト便のトップにドラッグ&ドロップして公開する
  6. 発行URLを開いて再生できるか確認する

予防:軽量化と形式の統一で安定させる

動画は容量が大きくなりがちなので、公開前に解像度やビットレートを見直して軽量化しておくと、読み込みが速く安定します。形式はMP4に統一しておくと環境差による再生不可を避けやすくなります。

公開前にローカルで動画を再生して確認し、問題なければZIP化して公開する流れにすると、共有先での再生トラブルをほぼ防げます。

よくある質問

プレーヤーの枠は出るのに再生できません。

動画ファイルが読み込めていないか、ブラウザ非対応の形式の可能性があります。開発者ツールのネットワークタブで動画が404になっていないか確認し、形式が不安ならMP4に変換して試してください。

自動再生したいのに始まりません。

多くのブラウザは音声付きの自動再生をブロックします。自動再生したい場合はミュート指定を加えると再生されることが多いです。利用者の操作で再生する形にするのも確実です。

大きな動画でも公開できますか。

ZIPにまとめて公開できますが、容量が大きいほど読み込みに時間がかかります。事前に解像度やビットレートを下げて軽量化しておくと、共有先での再生が安定します。

動画だけ差し替えたいときはどうしますか。

新しい動画を含めたZIPを作り直してアップロードすれば、同じURLのまま差し替えられます。共有相手にURLを送り直す必要はありません。

原因が分からないときはどこから確認すべきですか?

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

関連記事

トラブルシュート

公開後にJavaScriptが動かないときの原因と直し方

ローカルでは動いていたボタンやアニメーションが公開後に反応しなくなった方向け。JavaScriptが止まる主な原因をファイルパスや読み込み順の観点で切り分け、自分で直せるかどうかを判断できます。

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

iframeが表示されないときの原因と対処

地図や外部コンテンツをiframeで埋め込んだのに公開後に枠が空白になった方向け。表示許可・HTTPSとHTTPの混在・相対パスのズレを症状ごとに切り分け、適切な対処を選べるようになります。

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

音声(audio)が再生されないときの対処

ページを開いた直後に音声を鳴らそうとしたら無音だった場合に、ブラウザのautoplay制限がなぜ存在するのかを理解し、ユーザー操作を起点にした正しい音声再生の実装方法を学べる記事です。

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

fetchで相対パスのファイルが404になるときの原因と対処

ローカルでは取れていたデータがfetchで404になって途方に暮れている開発者向け。fetchの相対パスが「どこを基準に」解釈されるかを明確にし、公開後のディレクトリ構成とのズレを素早く特定して直すための確認フローを紹介します。

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

公開したHTMLのフォームが送信できないときの対処

問い合わせフォームやアンケートの送信ボタンが押せない・エラーになる方向け。静的ファイル公開ではフォームの動作に制約がある理由を理解し、外部サービス連携などの現実的な解決策を選べるようになります。

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