【MP4】SafariでMP4動画が再生できない問題を解決

※この記事は5年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。
※同内容の最新記事があります。
最新記事はこちら→

うーん、どうにも釈然としないんだけど、とりあえず解決したので記事に書いてみた。 なんか少し前のアップデートあたりから、再生できなくなったんだけど、解決できたんでね・・・。

今回は、macOS、iOSのSafariにおいての、サーバー上での動画再生の話。

調べてみてもらえればわかると思うが、
様々な理由が考えられるため、けっこう多くの記事が散見される。

修正が、比較的簡単なものから順にやっていこう。
（当サイトでの解決できた方法は一番最後）

1.JavaScriptないし、属性によっての自動再生をしている時

これはすぐ解決できる。
Safariはユーザビリティの観点から、
Web上で、いきなり音声が再生されることに対して、
制限を設けている。
そのため、video要素の、autoplay属性、jsコントロールによる、playメソッドでの自動再生は、
音声がない動画ないし、mute設定（属性にmuteをつけている、もしくはjsにおいての音声ミュート処理）している動画に限り有効となっている。
macOSのSafariは最近制限が緩和されているようだが、
iOSにおいては、いまだに制限解除はされていない。
これは、audio要素においても同様の処置がされている。

それもそのはず、Webページ見るのって、会社で暇つぶしとかに見る時多いからね。
いきなり音鳴ったら、いろいろ迷惑になるしね。そういう観点だろうおそらく。
（特に、Webページの場合、ちゃんと制御しないと、マナーモード中でも音声が鳴ってしまう）

まぁ、これに関しては、
自動再生を妥協すれば、すぐ解決できるし、
動画ファイルの読み込み自体を制限してるわけじゃないから、
どうとでもなるわけだ。
問題は次以降の問題・・・。

2.ブラウザのリクエストに対して、サーバー側が合わないレスポンスを返している

これよ、これ、もうHTMLとか、JSといった、フロント側では解決できない部分。
Safariは、動画などの重い容量のファイルには、「少しずつ容量小分けして、レスポンス返せよ！」
とリクエストするらしい。

Safariで動画を表示する際、サーバーのHTTP Range Request対応が必須になっている - Qiita

上記エントリーを参考に、要素検証などをして、やってみたが、確かに

Range: bytes=0-1

というリクエストが入っていた。
この部分ずつで、容量小分けでレスポンスを返すことに対応していないサーバーとかだと、
Safariでは動画が再生できないのだ。おいたわしや。

だが、当サイトにおいては、これに対してPHPをかませて、レスポンスヘッダを調整したりなどをしてみたが、いっこうに再生できなかった・・・。
だいたいにおいて、天下のロリポップ様が、小分けレスポンスに対応してないわけがない。

3.QuickTime（Safariの動画プラグイン）からのアクセスを制限している

そう、当サイトでの解決の糸口はここにあった。
もう、サーバー側でしか原因わからんと、ロリポップに問い合わせたところ、
どうやら、こちらで設定している、.htaccess上で、QuickTimeからのアクセスを制限している可能性がある記述がある、
と返事がきた。
値千金の情報だったよ、ありがとうロリポップ！
それまで、もう何が原因かわからなかったからね。
どこが原因か可能性が高い箇所さえわかればこっちのもんだ。

下記の箇所だと、教えてもらったので、コメントアウトしてみた。

#SetEnvIf Referer "^(.*)compliance-(.*)\.xyz" ref_ng
#SetEnvIf Referer "^(.*)test(.*)" ref_ng
#order allow,deny
#allow from all
#deny from env=ref_ng

#<Files ~ "^(.*)compliance-(.*)\.xyz$">
# Deny from all
#</Files>

・・・再生できた！

上記制御に関して、.xyzやcomplianceなど、一時期、不正アクセスが相次ぎ起こった時に、
そのアクセスを制限するために入れたものである。
確か、前回のアメリカの大統領選挙の時にやたら世界中で流行った不正アクセスだった気が。
おそらく、xyzで引っかかってたのかなと思う。
だから、もう解除しても大丈夫かな、とは思う。

以上、Safariで動画が再生できない可能性がある時の対応でした。
ちなみに、.htaccessは、キャッシュがかなり強く、下手したら、キャッシュクリアでもうまく更新されないことがあるので注意してください。

今回の、macOS、iOSのSafariにおいて、MP4動画が再生できない問題は、
以上の、どれかをやれば、だいたいは問題解決できると思う。
今回、僕が行った修正工程では、この順番だったが、
本来なら、1、3、2の順で検証を行うといいと思います。
どう考えても、サーバーが最終的に考えられる原因だからね。

僕がこういう順番になったのは、あれだ、すぐ人のせいにするからだよw

では、また。