note-pc

IEでmp4動画が再生できない「ビデオタイプがサポートされていない、またはファイルパスが無効です」

久しぶりにハマったので書きます

browser

サーバーに mp4 ファイルを上げて HTML5 の video 属性を使って再生させるというのを試みたが下記のエラーとなった

  1. 「ビデオタイプがサポートされていない、またはファイルパスが無効です」
  2. 「無効なソース」

1.のエラーが出るコード
<video poster=”sample.jpg” controls>
<source src=”sample.webm” type=”video/webm” />
<source src=”sample.ogv” type=”video/ogg” />
<source src=”sample.mp4″ type=”video/mp4″ />
</video>

2.のエラーが出るコード
<video src=”sample.mp4″ poster=”sample.jpg” controls></video>

元の動画ファイルが mp4 だが、 opera と firefox では未対応であるとの記述を見かけるので 1.はその対応策で .ogv ファイルと .webm ファイルを読み込めるようにしたが IE だけエラーになったので、切り分けの為 2.のコードへ変更した

結果、どちらのコードでもNGだった訳だが、ググってみると「” MIMEタイプ “の指定が必要なんじゃないか」などと書いてある

サーバーの対象ファイルが置いてあるフォルダに .htaccess ファイルを設置してみた
中身はこう
AddType video/ogg .ogv
AddType video/webm .webm
AddType video/mp4 .mp4

最終行に空白行を入れろなどという注意もあったので、それもやったが結果は同じくNGだった

キーワードを変えていろいろググってみたが、 MIMEタイプ について語られている事が多くてなかなか見つけられなかったが、下記で解決
http://tamachan.tama777.com/Reference/small_technic_Video_mp4.html

たまちゃん ありがとう!

簡単に言ってしまうと「mp4でもいろいろ種類があるんだよ」という事

正直、動画の事がよくわからないのだが、符号化・圧縮・コンテナなど要素が多すぎて一言で mp4 といっても「どのmp4?」みたいな感じ

わからないながらも、とにかくH.264という形式にすれば良いという事だけはわかったので、 mp4 ファイルを H.264 形式に エンコード して解決した

解決後は IE 、 Chrome はもちろん opera と firefox でも2.のコードで再生できたので、現在は全てのブラウザで mp4 に対応しているらしいことがわかった

検証したブラウザのバージョン

  • IE 11.0.96017914
  • Chrome 43.0.2357.134 m
  • opera 30.0.1835.125
  • firefox 39.0

mac環境が無いので safari は未検証

解決するのに日をまたいで丸1日くらいかかっちまった

動画の事をもう少し理解していれば、ここまでハマらなかったのだが、追及する課題かと言われると「再生できればイイ」くらいなので、今回はこれにて閉店ガラガラ。osamushi