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

HTML

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

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タイプ について語られている事が多くてなかなか見つけられなかったが、下記で解決
https://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

 

コメント

  1. たまちゃん より:

    オサムちゃん
    こんにちは、たまちゃんです。
    「ありがとう」をありがとう!!
    ちょっと違う条件で、同じ問題にはまって検索して、こちらにお邪魔しました(笑)。
    今後もよろしくお願いします(笑)。

    • osamushi より:

      たまちゃん
      うわぁご本人登場!
      こちらこそ本当に助かりました
      しかしあれから1年以上更新してない。。。
      wpの管理画面だけは見ていたのでコメントいただいたのに気づきました
      こちらこそ今後ともよろしくお願いします。osamushi