videoタグ埋め込みしたmp4について、【HTML5】iOSのSafariでvideoタグ埋め込みのmp4が再生できないのはインターレースだから という事件に続いて、Internet Explorerや旧Edge(Chromium版じゃないやつ)で動画が再生できないという問題が発生しました。
エラー表示の概要
Google Chromeや新Edge(Chromium版のやつ)では再生できるvideoタグ埋め込みのMP4について、IE11や旧Edgeで下記のような表示が出てビデオを再生できません。
ビデオをエンコードできませんでした(旧Edge)
ビデオをデコードできませんでした(IE11)
Firefoxの場合は?
動画読み込みは行われても再生されなかったり、「ファイルが壊れているため動画を再生できません」と表示されます。
結論:再生されない動画の特徴=プロファイルがHigh 4:2:2 またはHigh 4:4:4
調査を重ねた結果、H.264のMP4のなかでも、High 4:2:2(Hi422P)やHigh4:4:4(Hi444PP)という種類のもの(プロファイル)になっていると旧Edge、IE11で再生できないことが分かりました。
動画のコーデックを確認する定番ソフト「真空波動研」で調査した結果は下記の通り。
■再生できる動画のコーデック
■再生できない動画のコーデック
当初はMP4 v2かISO Base Media v1かの違いによるものかと予測しましたが、違いました。
動画変換を重ねて検証した結果、High 4:2:2(Hi422P)やHigh4:4:4(Hi444PP)で作成したMP4について、ビデオをエンコードできませんでした/ビデオをデコードできませんでしたのエラーが出ることを確認しました。
動作検証デモページ(IE11や旧Edgeで閲覧すると、エラーが確認できます)
また、videoタグでMP4を設置した際にposterを設定していない場合IE11、旧Edgeともに「デコードエラー」の表示が出ました。
動画の設置方法の微妙な差で表示されるメッセージが異なるようです。
再生されない動画はWindows10の「映画&テレビ」アプリでも再生できない
今回ブラウザで再生できなかった動画については、MP4ファイルそのものをWindows10の動画再生アプリ「映画&テレビ」で開いた時も、再生できないことを確認しました。
再生できません
別のものを選んで再生してください。このアイテムのフォーマットはサポートされていません。
0xc101003
videoタグ埋め込みで再生できない動画について、Windows10の動画再生ソフトで再生できない場合はプロファイルを疑うとよいでしょう。
MP4ファイルの修正方法
【mp4】Webのメインビジュアルに入れる動画を作る【Premier】 でも紹介しているAdobe製品を利用した動画変換を試すとよいでしょう。
※上記の記事では、動画のファイルサイズ変更や音声トラックの消去を行っていますが「プリセットから「Mobile Device」を選ぶ」のみを行えば再生できる動画に変換可能です。
また、下記のようなオンライン動画コンバーターを利用しても、プロファイルを選択した動画変換が可能です。
(MP4→MP4変換ができないときは、一度AVIなどに変換してから、再度MP4に変換してみてください)
コメント