iOS Safariで動画が再生されず、つまづいたため備忘録として残します。
はじめに
自分では解決できなかったため、社内のエンジニアの方に相談したところ、検証をしていただき解決することができました。
動画のコーデックやプロファイルによっては再生されないことがあるのは知っていましたが、解像度とfpsによってLevelというものが決まっており、Levelによっても再生できないものがあることを初めて知りました。
実際にどういうことなのかもう少し調べてみることにします。
事象
ファーストビューに埋め込んだループ動画がiOSだけ再生されない問題が発生しました。 再生されない動画のサイズなどは以下の通りでした。
解像度:4000×2250
FPS:60fps
コーデック:H.264
原因
原因は動画の H.264 Level が 6.0 だったことでした。
そもそもコーデックとは何か?
動画データを圧縮・展開するアルゴリズムのことです。
動画ファイルはデータ容量が大きいため、圧縮・変換し再生する際に元の状態に変換しています。
コーデックの種類には、H.264、H.265、VP8、VP9、AV1、MPEG-4、MPEG-2、MPEG-1などがあります。
補足
.mp4や.movといった拡張子はMP4やMOVといった動画形式(コンテナ)を表します。
MP4とは
正式名称はMPEG-4となります。 高い圧縮率を持っており、 H.264やH.265といった高効率なコーデックに対応しているため、画質を保ちながらファイルサイズを小さくできるという特徴があります。 Webブラウザ上では広く対応されており、MP4を使用することが一般的になっています。 ストリーミング配信や動画共有サービスでもよく使用されています。
補足
WebMというWeb上での使用を目的とした動画形式もありますが、ブラウザサポートや安定性の面でMP4に劣っているため、MP4を使用することが一般的のようです。
H.264 とはなんなのか?
高画質を維持しながら従来のMPEG-2の2倍以上の効率で動画を圧縮する、現在最も広く普及しているコーデックです。 高い圧縮率と高画質を維持しながら、データ量を削減することができるため、現在でも最も広く使用されています。 ほとんどのデバイスやウェブサイトでサポートされています。 また、ストリーミング配信や動画共有サービスでもよく使用されています。
H.264 Level とはなんなのか?
動画再生時に利用するメモリや処理の重さの上限を定義したもので、画面解像度やフレームレートの上限が決まります。 レベルによって決まるのは以下の3つです。
- 最大解像度(縦×横のピクセル数)
- 最大フレームレート(fps)
- 最大ビットレート(Mbps)
例えば、Wikipediaを参照すると、 Level 6.0であれば、8192×4320(8K相当)の解像度をサポートし、最大ビットレートが240Mbpsとなります。 Level 5.1であれば、4096×2304の解像度で最大60fpsをサポートし、4Kコンテンツ向けのレベルとなります。
補足
H.264のLevelは元々5.2が最高でしたが、2016年にLevel 6.0、6.1、6.2が追加され、8K解像度までサポートされるようになりました。
なぜH.264 Level6.0はiOSで再生されなかったのか
Level 6.0は8K相当の解像度をサポートする高いレベルです。 iOSがどのLevelまで対応しているかはAppleの公式ドキュメントに明確には記載されていませんが、 iPhone 6s以降ではH.264 High Profile Level 5.1までの対応が確認されています。 今回は実機検証によってLevel 6.0が再生できないことが確認できました。
メモ
Appleの公式ドキュメントにはLevelの対応上限が明記されておらず、今回は実機検証によってLevel 6.0が再生できないことが確認できました。
動画のコーデックやLevelなどをまとめて確認できるコマンド
finderから詳細情報を確認するだけではLevelまではわからないため、コマンドを使用します。 あらかじめffprobe をインストールしておきます。
ffprobe次に以下のコマンドを実行します。
ffprobe -v error -select_streams v:0 \ -show_entries stream=codec_name,profile,level,width,height,r_frame_rate \ -of default=noprint_wrappers=1 \ "your_file_path"your_file_pathの部分は動画ファイルのパスを指定してください。
Levelが大きすぎる場合は、Levelを下げることで再生できるようになります。
動画が再生されないときの対応方法まとめ
動画が再生されないときは、以下を順番に確認するのがよさそうです。
- videoタグの属性が正しく設定されているのか確認する
- 動画のコーデックを確認する
- 動画のLevelを確認する