埋め込んだ動画が再生されない原因と解決策

2019/11/16

先日、動画ファイルをWEBサイトに埋め込む作業をしていました。

最近ではWEBサイトに動画を表示させる場合は、まずYouTubeに動画をアップロードしてYouTubeからその動画を読み込む形式が多いですが、その時は自社のサーバーに動画をアップロードして、ブラウザでサイトを閲覧したときにその動画ファイルを自動的に読み込ませるという形式でした。

簡単！簡単！

と思って作業を始めましたが、いざ動画を埋め込んで動作確認をしていたら思わぬトラブルに遭遇してしまいました。

トラブル内容

トラブルの内容は

仮想環境では読み込まれていた動画が、実際にサーバーにファイルをアップロードしてブラウザでサイトを開いてみると読み込まれない

というものです。

サーバーにアップロードする前に仮想環境（XAMMP）でウェブサイトの動作をチェックし動画が再生されることは確認していました。

ところが実際にサーバーにファイルをアップロードしてブラウザでサイトを開いてみると動画が全く読み込まれないのです。

何でだろ？

原因はとっても簡単な事でした。

その時に埋め込んでいた動画ファイルは「日本語」のファイル名でした。

例えばそのファイル名が「テスト動画.mp4」だったとします。

僕はその動画ファイルを読み込ませるために以下のようにHTMLを書きました。

<div class="movie-area">
  <video controls autoplay muted playsinline>
    <source src="movie/テスト動画.mp4" type="video/mp4">
  </video>
</div>

以下のリンクで結果が確認できます。

リンクを見てもらうと解ると思うのですが「テスト動画.mp4」は再生されません。

どうしたら再生できたか。

解決法はとても簡単でした。

動画ファイル名を「日本語」から「英数」に変更

したところ、それまで全く読み込まれなかった動画が読み込まれるようになったのです。

先程の例で言えば「テスト動画.mp4」だったファイル名を「test_movie.mp4」に変更したのです。

<div class="movie-area">
  <video controls autoplay muted playsinline>
    <source src="movie/test_movie.mp4" type="video/mp4">
  </video>
</div>

以下のリンクを開くと自動的に動画が再生されると思います。

どうやら日本語のファイル名が読み込みを阻害していたようです。

仮想環境では日本語のファイル名でも動画は読み込めたんですけどねぇ

これまで動画ファイルを埋め込むときはいつもファイル名が英語だったので今回のような問題に遭遇しませんでした。

でも今回は動画ファイル名が日本語だったことで思わぬ事態となりました。。

原因がわかってしまえばとても簡単な事ですが、僕は動画ファイル自体に何か原因があるのかと思い動画を別の形式にエンコードしたりして解決に結構時間がかかってしまいました。

でも、いい勉強になりました。

もしvideoタグで日本語のファイル名を付けた動画が読み込まれない場合。

ファイル名を「日本語」から「英数」に変更する

だけで読み込まれるかもしれません。

それでは、またー。