ウェブページのコーディングを行う中で、
特定のスマートフォン環境において、動画（mp4）が表示されない現象が発生しました。

原因を調査したところ、動画ファイル自体の仕様が影響していることが分かりました。
そのため本記事では、動画を埋め込む際にご用意いただくデータの注意点として、今回の事例を共有いたします。

同様の実装を行う際の参考になれば幸いです。

形式について

今回最初にご提供いただいた動画は、映像コーデックがAV1、音声コーデックがAACの形式でした。
調査の結果、本事象は映像コーデックであるAV1が、一部の端末で再生に対応していなかったことが原因だと判明しました。

コーデックとは、動画や音声などのデータを圧縮・復元するための技術のことで、現在Web制作で主に利用されている映像コーデックにはH.264、H.265（HEVC）、AV1が挙げられます。

H.264は2003年にJVT（Joint Video Team）によって策定・公開された規格です。古くから利用されていることもあり、ほとんどの端末やブラウザで再生できる点が特長です。
H.265（HEVC）は2013年にJCT-VC（Joint Collaborative Team on Video Coding）によって公開されたH.264の後継規格です。より高画質な映像を小さいファイルサイズで扱える一方、対応環境はH.264より限定されます。
AV1は2018年にGoogle、Amazon、Netflix、Microsoft、Mozilla、Intelなどが参加するAOMedia（Alliance for Open Media）によって公開された比較的新しい規格です。H.265よりもさらに高い圧縮効率を持ち、同等の画質でより小さいファイルサイズを実現できます。また、ロイヤリティフリー（使用料なし）という点も大きな特徴の1つです。しかし、現時点では未対応の端末もあるため、Webサイトに動画を埋め込む際には再生環境への配慮が必要です。

対応機種について

どの端末がどの映像コーデックに対応しているのかを、簡単に表にまとめてみました。

H.264

H.265（HEVC）

AV1

Chrome・Firefox・Edge・Safariなど主要なブラウザ自体はAV1に対応していますが、実際に再生できるかどうかは、閲覧に使用している端末（機種）の対応状況によって左右されます。

↓各ブラウザの対応状況については、以下の記事をご覧ください。↓
Chrome
AV1→Chrome 90
H.265（HEVC）→Chrome 136
Firefox
AV1→Firefox Release Notes 125.0.1
H.265（HEVC）→Firefox Release Notes 134.0
Edge
AV1→var.121.0.2277.49
※H.265（HEVC）はOS（Windows）のコーデック依存のため、Edgeの公式リリースノートには記載なし
Safari
AV1→WebKit Features in Safari 17.0
※H.265（HEVC）は公式リリースノートでの明確な言及なし

まとめ

H.265（HEVC）や AV1 は、現時点では対応していない端末も一定数存在するため、幅広い環境での再生を考えると、H.264を採用するのが安全な選択と言えます。
検証時には、使用している端末によっては問題なく再生できてしまい、不具合に気付きにくいケースもあります。そのため、動画データを受け取る際には、あらかじめ映像コーデックを確認しておくことが重要です。