ホーム > カテゴリ > HTML5・JavaScript >

MEDIA12899: オーディオ/ビデオ: 不明な MIME の種類です。

Internet Explorerで音声、動画ファイルを再生する際に発生する「MEDIA12899: オーディオ/ビデオ: 不明な MIME の種類です。」のエラーを回避する方法をご紹介します。

エラーの原因

「MEDIA12899」のエラーの原因は「サーバー側」または「JavaScript」でMIMEタイプを設定しない事により発生するエラーとなります。

ただ、面白いことに「IE11」にWebmプラグインをインストールして「Webm動画」を読み込むと1回目はエラーは発生しません。2回目に他の「Webm動画」を読み込むとこのエラーが発生します。IEのロジックが意味不明です＾＾；

JavaScriptでエラーとなる例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
var src_video;
 
window.onload = function(){   
  src_video= document.getElementById("SrcVideo");
}

function onAddFile(event) {
  var files = event.target.files;;
 
  if (files[0] != undefined){    
    src_video.onerror = function(e){
      alert('このファイルは読み込めません。');
    };   

    src_video.src = URL.createObjectURL(files[0]);
  }
  document.getElementById("inputfile").value = '';  
}      
</script>
</head>
<body>
<input type="file" id="inputfile" accept="video/mp4,video/webm,video/ogg" onchange="onAddFile(event);" style="padding:0;width:240px;">
<br><br>
<video id="SrcVideo" controls width="480"></video>
</body>
</html>

問題の箇所は20行目の「URL.createObjectURL」です。ここで明示的にMIMEタイプを指定するとエラーは発生しません。

そのサンプルコードは次の節をご覧ください。

JavaScriptでエラーにならない例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
var src_video;
 
window.onload = function(){   
  src_video= document.getElementById("SrcVideo");
}

function onAddFile(event) {
  var files = event.target.files;;
 
  if (files[0] != undefined){    
    filename = files[0].name;
    src_video.onerror = function(e){
      alert('このファイルは読み込めません。');
    };   

    // 拡張子の取得 
    var ext = filename.split('.');
    ext = ext[ext.length-1].toUpperCase();
    
    // MIMEを指定して動画を読み込む
    var mime = "video/mp4";
    if(ext == "WEBM"){
      mime = "video/webm";
    }else if (ext == "OGG" || ext == "OGX" || ext == "OGV"){
      mime = "video/ogg";
    }               
    src_video.src = URL.createObjectURL(new Blob([files[0]], { type: mime }));
  }
  document.getElementById("inputfile").value = '';  
}      
</script>
</head>
<body>
<input type="file" id="inputfile" accept="video/mp4,video/webm,video/ogg" onchange="onAddFile(event);" style="padding:0;width:240px;">
<br><br>
<video id="SrcVideo" controls width="480"></video>
</body>
</html>

26行目から32行目でファイルのMIMEを指定からcreateObjectURLでURLオブジェクトを生成しています。

このようにするとIEでエラーは発生しません。

以上です。





関連記事


前の記事：zlib.js 0.2.0のzip.js/zip.min.jsのバグの修正[ZIPファイルの破損]
次の記事：OpenToonzの入射光エフェクトをJavaScriptに移植する[C++/OpenCV]

公開日：2016年05月02日
記事NO：01931