【HTML5】iOSのSafariでvideoタグ埋め込みのmp4が再生できないのはインターレースだから

2019年5月17日

自動再生でなければ、mp4をvideoタグで設置して問題ない

主流のブラウザについてはH.264のmp4をvideoタグで設置することには何も問題ないはずです。

Can I Use

音声アリの自動再生については、特にモバイル環境では以前からできないかと思いますが、再生ボタンをちゃんと押せばOKのはずです。

なぜかiOSのSafariでだけ再生できない動画がある

複数の動画をvideoタグで設置(preload=”none”で)するページを作成したときに、特定の動画のみiOSで再生できないとの指摘を受けました。

ファイルサイズや解像度(フレームサイズ)、ビットレートなどの問題かと思い、再生できない動画のみPremier Proで「H.264」「Movile Device 720p HD」で書き出したところ解決したのですが……

結局原因は「プログレッシブ」か「インターレース」かの問題らしい

お仕事としては解決しましたが、どこに問題があったか分からないままでは釈然としないため、解像度(フレームサイズ)、ビットレートの違う複数の動画を用意して実験したところ……

全て再生できてしまいました!!

1980×1080だろうが、10Mbpsだろうがお構いなしです。

そこで、動画のコーデックを確認する定番ソフト「真空波動研」に頼ってみました。

再生できる方

8bit AVC/H.264 Main@4.1 Unspecified Progressive 29.97fps

再生できない方

8bit AVC.H.264 High@4.1 4:3(Extend) Interlace 29.97fps

違いはプロファイルと走査方式?

再生できる:Main@4.1 Unspecified Progressive

再生できない:High@4.1 4:3(Extend) Interlace

MainとかHighとかはH.264のプロファイルの違いだそうで、そのあとのProgressiveとInterlaceは動画におなじみの走査方式です。

調べてみたところiOSが全体的にインターレース(Interlace)方式を上手く取り扱えない様子……

書き出したMP4ファイルがiPhoneで再生できません。

もしもiOSで再生できないMP4ファイルがあったら、プログレッシブ方式に変更してからアップロードしてみましょう!

プログレッシブ形式で書きだすには、フィールドオーダーを「プログレッシブ」にする