Safariだけ HTMLのvideoタグで動画が再生されない

Category develop 2024/12/25

問題

videoタグでmp4の動画を埋め込んだのですが、iPhoneだけ動画が再生されません。

主流のブラウザでは、H.264のmp4をvideoタグで設置でき、自動再生もできる。

基本はそうなのだが、ちょこちょこ落とし穴があった。

動画の走査方式で、インターレース方式だとiOSがうまく取り扱えないらしい。

iOSではインターレース方式の動画は再生できないようなので、プログレッシブ方式に変更する。

Webサーバーが HTTP Range Requests に対応する必要がある。

長い動画を全てダウンロードしなくても、途中の部分だけダウンロードしたり、途中で通信が失敗しても失敗した部分からダウンロードを再開したりできる仕組み。

Safariの場合、対応が必要なようです。どんなに短い動画であっても。

HTTPレスポンスヘッダに Accept-Ranges: bytes や Content-Range: ～など出していないシステムで問題が発生していたので、そういうことなんだなと気づきました。