ウェブサイトで動画を使いたい場合、YouTubeなどの外部サービスを利用する方法もありますが、自社サーバーで動画を管理したいケースも多いでしょう。しかし、自前のサーバーに動画ファイルを置いて配信する際、思わぬトラブルに遭遇することがあります。

特に、特定のブラウザ（主にSafari）でのみ動画が再生されないというケースは珍しくありません。今回は、そんなサーバー側の問題を解決するためのチェックポイントをまとめました。

主な症状

  • Chromeでは動画が再生されるが、Safariでは再生されない
  • 同じコードが別のサーバーでは正常に動作する
  • エラーメッセージなく、単に動画が表示されない

サーバーサイドのチェックポイント

1. MIMEタイプの設定

動画ファイルが適切なMIMEタイプで配信されているかを確認します。特にSafariはMIMEタイプの検証が厳格です。

# .htaccessファイルでの設定例
<IfModule mod_mime.c>
    AddType video/mp4 .mp4 .m4v
    AddType video/webm .webm
    AddType video/ogg .ogv
</IfModule>

2. CORSヘッダーの設定

Cross-Origin Resource Sharing（CORS）の設定が不足していると、特定のブラウザでメディアファイルがブロックされることがあります。

# .htaccessファイルでの設定例
<IfModule mod_headers.c>
    <FilesMatch "\.(mp4|webm|ogv)$">
        Header set Access-Control-Allow-Origin "*"
        Header set Access-Control-Allow-Methods "GET, HEAD, OPTIONS"
        Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Range"
    </FilesMatch>
</IfModule>

3. バイトレンジリクエストの対応

動画の一部分だけを読み込む「レンジリクエスト」に対応していないと、再生が途中で止まったり、シークができなくなったりします。

<IfModule mod_headers.c>
    <FilesMatch "\.(mp4|webm|ogv)$">
        Header set Accept-Ranges "bytes"
    </FilesMatch>
</IfModule>

4. キャッシュ設定

適切なキャッシュ設定がないと、動画の読み込みが遅くなったり、再読み込みの際に問題が発生したりします。

<IfModule mod_headers.c>
    <FilesMatch "\.(mp4|webm|ogv)$">
        Header set Cache-Control "max-age=2592000, public"
        Header set Pragma "public"
    </FilesMatch>
</IfModule>

5. Apacheモジュールの確認

上記の設定が効かない場合、必要なApacheモジュールが有効になっているか確認する必要があります。

# モジュール確認コマンド
apache2ctl -M  # または apachectl -M

特に以下のモジュールが必要です：

  • headers_module - HTTPヘッダーの制御に必要
  • mime_module - MIMEタイプの設定に必要

6. バーチャルホスト設定の確認

サーバー全体またはバーチャルホストレベルで、.htaccessによる設定の上書きが禁止されている可能性も考えられます。

確認すべきファイル：

  • /etc/apache2/apache2.confまたは/etc/httpd/conf/httpd.conf
  • バーチャルホスト設定（/etc/apache2/sites-available/または/etc/httpd/conf.d/内）

以下のような設定があると、.htaccessでの設定が無視されます：

<Directory /var/www/html>
    AllowOverride None
</Directory>

適切な設定は：

<Directory /var/www/html>
    AllowOverride All
</Directory>

7. ファイルパーミッションの確認

動画ファイルやそのディレクトリに適切なアクセス権限が設定されているか確認します。

# パーミッション確認
ls -la /path/to/videos/

# 適切な権限設定の例
chmod 644 /path/to/videos/*.mp4
chmod 755 /path/to/videos/

Webサーバー設定修正後の作業

設定を変更した後は、必ず以下の手順を実行してください：

  1. 設定の文法チェック
apache2ctl configtest  # または apachectl configtest
  1. Webサーバーの再起動
systemctl restart apache2  # または systemctl restart httpd

代替策

サーバー設定に問題があり、すぐに修正できない場合は、以下の代替策を検討してください：

  1. YouTube埋め込み動画の利用

    • 自社サーバーでの配信に比べて安定性が高い
    • 帯域幅の節約になる

  2. CDNサービスの利用

    • CloudflareやAmazon CloudFrontなどのCDNを利用
    • 適切な設定で配信される

  3. ブラウザ検出による代替コンテンツの表示

    • Safariの場合のみ静止画または別の埋め込み動画を表示
    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
if (isSafari) {
  // 代替コンテンツ表示
}

まとめ

動画再生の問題は、サーバー設定、特にMIMEタイプやCORS設定に起因することが多いです。適切な設定を行うことで、ほとんどのケースでは問題を解決できます。サーバー管理者と連携して、これらのチェックポイントを順に確認していくことをお勧めします。

何度も設定を試しても解決しない場合は、一時的に代替策を採用しつつ、専門家に相談することも検討してください。