トラフィックを Cloudflare でプロキシしていると、macOS と iOS の Safari で MP4 動画ファイルが読み込めないことがあります。
この問題は、Safari が HTTP レンジリクエストをほかのブラウザーと違う方法で扱うためです。とくに、動画ストリーミング中の ETag の処理が異なります。
Safari と iOS デバイスは、特定の時刻へのシークや、中断したダウンロードの再開など、動画機能のために HTTP レンジリクエストを使います。
Cloudflare のキャッシュ層が弱い ETag 付きでこれらのレンジリクエストを処理すると、Safari はキャッシュ済みレスポンスを拒否することがあります。その結果、動画が読み込めない、または黒い画面になることがあります。
この問題を解消するには、次の順序で 2 つの Cache Rule を設定します。
すべての MP4 ファイルに適用し、キャッシュ対象にして、Respect Strong ETags をオンにする Cache Rule を作成します。
-
Cloudflare ダッシュボードで Cache Rules ページを開きます。
Cache Rules を開く ↗ -
Create rule > Cache rules を選択します。
-
Rule name に、ルールのわかりやすい名前を入力します。
-
When incoming requests match… で、すべての MP4 ファイルに適用するフィルターを作成します。例:
URI FullWildcard*.mp4。 -
Cache eligibility で Eligible for cache を選択します。
-
Respect strong ETags の + Add Setting を選択し、トグルをオンにします。
-
Place at で Last を選択します。
すべての MP4 ファイルに適用し、キャッシュを完全にバイパスする Cache Rule をもう 1 つ作成します。
-
Cloudflare ダッシュボードで Cache Rules ページを開きます。
Cache Rules を開く ↗ -
Create rule > Cache rules を選択します。
-
Rule name に、ルールのわかりやすい名前を入力します。
-
When incoming requests match… で、MP4 ファイル向けに同じフィルターを作成します。例:
URI FullWildcard*.mp4。 -
Cache eligibility で Bypass cache を選択します。
-
Place at で Last を選択します。
1 つ目のルールは MP4 ファイルの強い ETag を保持し、レンジリクエスト処理に対する Safari の要件を満たします。2 つ目のルールはキャッシュをバイパスするため、Cloudflare は ETag が食い違う可能性のあるキャッシュ済みレスポンスを返すのではなく、レンジリクエストをオリジンサーバーへ転送します。
Cache Rules の一覧では、1 つ目のルールを 2 つ目のルールより上に置く必要があります。