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

2019年12月17日

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

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

Can I Use

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

まずはこれを確認

<video>要素にplaysinline属性を記述しているでしょうか?

<video autoplay loop muted poster="poster.jpg" playsinline>
       <source src="video.mp4">
</video>

なかったら、とりあえずつけてみましょう。再生できるかも……!

参考:iOS10 Mobile Safariにおけるビデオの自動再生(インライン再生)

 

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ファイルがあったら、プログレッシブ方式に変更してからアップロードしてみましょう!

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

 

追記(2019.11.8)

その他の原因の場合もあるようですので、まだ解決しない場合は↓も参考に…。
https://highmoon-miyabi.net/blog/2019/03/17_000550.html